General

variables

base-font-size

$base-font-size: 16px !default;

Description

Base font size for Andy

Type

Length

Used by

mixins

[private] prefix

@mixin prefix($property, $value, $prefixes: ()) { ... }

Description

Mixin helper to output vendor prefixes

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$property

Unprefixed CSS property

Stringnone
$value

Raw CSS value

Anynone
$prefixes

List of prefixes to output

List()

Requires

Used by

Author

  • HugoGiraudel

[private] keyframes

@mixin keyframes($name) { ... }

Description

Mixin helper to prefix @keyframes

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$name

Animation name

Stringnone

background-gradient

@mixin background-gradient($start-color, $end-color, $orientation) { ... }

Description

Background gradient helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$start-color

Start color

Colornone
$end-color

End color

Colornone
$orientation

Type of gradient, either vertical, horizontal or radial

Stringnone

Example

Usage

  .foo {
    @include background-gradient(red, black, 'vertical');
  }

Result

  .foo {
    background: -webkit-linear-gradient(top, red, black);
    background: linear-gradient(to bottom, red, black);
  }

background-size

@mixin background-size($width, $height: $width) { ... }

Description

Background size helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

Background width

Lengthnone
$height

Background height

Length$width

Example

Usage

  .foo {
    @include background-size(100%);
  }

Result

  .foo {
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
  }

Requires

border-radius-separate

@mixin border-radius-separate($top-left-radius, $top-right-radius, $bottom-left-radius, $bottom-right-radius) { ... }

Description

Separated border-radius helpers

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$top-left-radius

Top left radius

Lengthnone
$top-right-radius

Top right radius

Lengthnone
$bottom-left-radius

Bottom left radius

Lengthnone
$bottom-right-radius

Bottom right radius

Lengthnone

Example

Usage

  .foo {
    @include border-radius-separate(1px, 2px, 3px, 4px);
  }

Result

  .foo {
    -webkit-border-top-left-radius: 1px;
    -moz-border-top-left-radius: 1px;
    border-top-left-radius: 1px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-top-right-radius: 2px;
    border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

Requires

box-sizing

@mixin box-sizing($type) { ... }

Description

Box-sizing helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$type

Either border-box, padding-box or content-box

Stringnone

Example

Usage

  .foo {
    @include box-sizing(border-box);
  }

Result

  .foo {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

Requires

center-block

@mixin center-block() { ... }

Description

Block horizontal centering helper

Parameters

None.

Example

Usage

  .foo {
    @include center-block;
  }

Result

  .foo {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

center-both

@mixin center-both() { ... }

Description

Block horizontal and vertical centering helper Important: you must have a parent element with position: relative.

Parameters

None.

Example

Usage

  .foo {
    @include center-both;
  }

Result

  .foo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

Requires

center-h

@mixin center-h($height) { ... }

Description

Block vertical centering helper Require height to be known.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$height

Element's height

Lengthnone

Example

Usage

  .foo {
    @include center-h(42px);
  }

Result

  .foo {
    position: absolute;
    top: 50%;
    height: 42px;
    margin-top: -21px;
  }

center-h--unk

@mixin center-h--unk() { ... }

Description

Block vertical centering helper

Parameters

None.

Example

Usage

  .foo {
    @include center-h--unk;
  }

Result

  .foo {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

Requires

outline

@mixin outline() { ... }

Description

Outline

Parameters

None.

Example

Usage

  .foo {
    @include outline;
  }

Result

  .foo {
    box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0, inset rgba(0, 0, 0, 0.75) 0 1px 0;
  }

font-face

@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { ... }

Description

Font-face helper mixin

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$font-name

Font family name

Stringnone
$file-name

File name (no extension)

Stringnone
$weight

Font weight

String or Numbernormal
$style

Font style

Stringnormal

Example

Usage

  @include font-face('gotham', '/fonts/gotham');

font-size

@mixin font-size($size) { ... }

Description

Font sizing helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

Font size

Lengthnone

Example

Usage

  .foo {
    @include font-size(16px);
  }

Result

  .foo {
    font-size: 16px;
    font-size: 1rem;
  }

Requires

ha

@mixin ha() { ... }

Description

Hardware acceleration

Parameters

None.

Example

Usage

  .foo {
    @include ha;
  }

Result

  .foo {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

Requires

image-2x

@mixin image-2x($image, $width, $height) { ... }

Description

Retina helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$image

Image path

Stringnone
$width

Image width

Lengthnone
$height

Image height

Heightnone

Example

Usage

  .foo {
    @include image-2x('../images/image.png', 100%, auto);
  }

line-height

@mixin line-height($height-value: 12) { ... }

Description

Line height helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$height-value

Height value

Number12

Example

Usage

  .foo {
    @include line-height(16);
  }

Result

  .foo {
    line-height: 16px;
    line-height: 1rem;
  }

Requires

mquery

@mixin mquery($width, $ratio: false) { ... }

Description

Max-width media query helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

Max-width

Lengthnone
$ratio

Min device pixel ratio

Number or Falsefalse

Example

Usage

  .foo {
    @include mquery(350px, 2) {
      width: 100%;
    }
  }

mquery-r

@mixin mquery-r($ratio) { ... }

Description

Min ratio media query helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$ratio

Min device pixel ratio

Numbernone

Example

Usage

  .foo {
    @include mquery-r(2) {
      width: 100%;
    }
  }

opacity

@mixin opacity($opacity) { ... }

Description

Opacity helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$opacity

Opacity

Floatnone

Example

Usage

  .foo {
    @include opacity(0.5);
  }

Result

  .foo {
    opacity: 0.5;
    filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#50)";
  }

Requires

Used by

position

@mixin position($type, $left: null, $right: null, $top: null, $bottom: null) { ... }

Description

Position helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$type

Either relative, absolute or fixed

Stringnone
$left

Left offset

Lengthnull
$right

Right offset

Lengthnull
$top

Top offset

Lengthnull
$bottom

Bottom offset

Lengthnull

Example

Usage

  .foo {
    @include position(absolute, $top: 10px, $left: 10px);
  }

Result

  .foo {
    position: absolute;
    left: 10px;
    top: 10px;
  }

scale

@mixin scale($value) { ... }

Description

Scale helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$value

Scale factor

Numbernone

Example

Usage

  .foo {
    @include scale(2);
  }

Result

  .foo {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);
  }

Requires

Used by

size

@mixin size($width, $height: $width) { ... }

Description

Sizing helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

Width

Lengthnone
$height

Height

Length$width

Example

Usage

  .foo {
    @include size(350px);
  }

Result

  .foo {
    width: 350px;
    height: 350px;
  }

Used by

text-shadow

@mixin text-shadow($value) { ... }

Description

Embossing text shadow

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$value

Opacity value

Floatnone

Example

Usage

  .foo {
    @include text-shadow(0.5);
  }

Result

  .foo {
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
  }

translate-x

@mixin translate-x($value) { ... }

Description

Translate x helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$value

Offset value

Lengthnone

Example

Usage

  .foo {
    @include translate-x(1em);
  }

Result

  .foo {
    -webkit-transform: translatex(1em);
    -moz-transform: translatex(1em);
    transform: translatex(1em);
  }

Requires

translate-y

@mixin translate-y($value) { ... }

Description

Translate y helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$value

Offset value

Lengthnone

Example

Usage

  .foo {
    @include translate-y(1em);
  }

Result

  .foo {
    -webkit-transform: translatey(1em);
    -moz-transform: translatey(1em);
    transform: translatey(1em);
  }

Requires

transition

@mixin transition($time: 1s, $timing-function: ease-in-out) { ... }

Description

Transition helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$time

Duration

Time1s
$timing-function

Timing function or cubic bezier curve

Stringease-in-out

Example

Usage

  .foo {
    @include transition(0.3s, ease-in);
  }

Result

  .foo {
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
  }

Requires

scale-down

@mixin scale-down($time: 1s) { ... }

Description

Animation scale-down

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$time

Animation duration

Time1s

Example

Usage

  .foo {
    @include scale-down(4.2s);
  }

Result

  .foo {
    -webkit-animation: scale-down 4.2s ease-out backwards;
    animation: scale-down 4.2s ease-out backwards;
  }

Requires

scale-up

@mixin scale-up($time: 1s) { ... }

Description

Animation scale-up

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$time

Animation duration

Time1s

Example

Usage

  .foo {
    @include scale-up(4.2s);
  }

Result

  .foo {
    -webkit-animation: scale-up 4.2s ease-out backwards;
    animation: scale-up 4.2s ease-out backwards;
  }

Requires

fade-in

@mixin fade-in($time: 1s) { ... }

Description

Animation fade-in

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$time

Animation duration

Time1s

Example

Usage

  .foo {
    @include fade-in(4.2s);
  }

Result

  .foo {
    -webkit-animation: fade-in 4.2s ease-out backwards;
    animation: fade-in 4.2s ease-out backwards;
  }

Requires

slide-in-down

@mixin slide-in-down($time: 1s) { ... }

Description

Animation slide-in-down

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$time

Animation duration

Time1s

Example

Usage

  .foo {
    @include slide-in-down(4.2s);
  }

Result

  .foo {
    -webkit-animation: slide-in-down 4.2s ease-out backwards;
    animation: slide-in-down 4.2s ease-out backwards;
  }

Requires

slide-in-up

@mixin slide-in-up($time: 1s) { ... }

Description

Animation slide-in-up

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$time

Animation duration

Time1s

Example

Usage

  .foo {
    @include slide-in-up(4.2s);
  }

Result

  .foo {
    -webkit-animation: slide-in-up 4.2s ease-out backwards;
    animation: slide-in-up 4.2s ease-out backwards;
  }

Requires

slide-in-right

@mixin slide-in-right($time: 1s) { ... }

Description

Animation slide-in-right

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$time

Animation duration

Time1s

Example

Usage

  .foo {
    @include slide-in-right(4.2s);
  }

Result

  .foo {
    -webkit-animation: slide-in-right 4.2s ease-out backwards;
    animation: slide-in-right 4.2s ease-out backwards;
  }

Requires

slide-in-left

@mixin slide-in-left($time: 1s) { ... }

Description

Animation slide-in-left

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$time

Animation duration

Time1s

Example

Usage

  .foo {
    @include slide-in-left(4.2s);
  }

Result

  .foo {
    -webkit-animation: slide-in-left 4.2s ease-out backwards;
    animation: slide-in-left 4.2s ease-out backwards;
  }

Requires

placeholders

clearfix

%clearfix { ... }

Description

Clearfix placeholder

Example

Usage

  .foo {
    @extend %clearfix;
  }

functions

black

@function black($opacity) { ... }

Description

Transparent black helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$opacity

Opacity

Floatnone

Example

Usage

  .foo {
    border-color: black(0.1);
  }

Result

  .foo {
    border-color: rgba(0, 0, 0, 0.1);
  }

Requires

white

@function white($opacity) { ... }

Description

Transparent white helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$opacity

Opacity

Floatnone

Example

Usage

  .foo {
    border-color: white(0.1);
  }

Result

  .foo {
    border-color: rgba(255, 255, 255, 0.1);
  }

Requires