Mixins

Alignment

Float

VariableTypeDefaultDescriptionRequired

@value

preset

left

Left or right

@width

unit

-

Width value

.float();
float: left;
.float(right; 2);
float: right;
width: 2rem;

Left & Right

.left();
.right();
float: left;
float: right;

If a value is passed to the left or right mixins they reflect the left and right CSS properties and not float settings.

Clearfix

.clearfix();
&:after {
    clear: both;
    content: ' ';
    display: table;
}

Clear

VariableTypeDefaultDescriptionRequired

@value

preset

both

Both, left, or right

.align(justify);
.align(middle);
text-align: justify;
vertical-align: middle;

Vertical Align

VariableTypeDefaultDescriptionRequired

@value

value

-

Alignment value

.vertical-align(text-top);
vertical-align: text-top;

Display

VariableTypeDefaultDescriptionRequired

@value

value

-

Display value

.display(block);
display: block;

Inline

.inline();
display: inline;

Inline-Block

VariableTypeDefaultDescriptionRequired

@width

unit

-

Width value

@height

unit

-

Height value

.inline-block();
display: inline-block;
.inline-block(4; 2);
display: inline-block;
width: 4rem;
height: 2rem;

Animation

VariableTypeDefaultDescriptionRequired

@arguments

value

-

Animation rules

.animation(name 4s linear 0s 1);
-webkit-animation: name 4s linear 0s 1;
animation: name 4s linear 0s 1;

Keyframes

VariableTypeDefaultDescriptionRequired

@name

value

-

Animation name

@start

value

-

Starting value

@end

value

-

Ending value

.keyframes(fade-in, {
    .transparent();
}, {
    .opaque();
});
@-webkit-keyframes fade-in {
    0% {
        opacity: 0:
    }
    100% {
        opacity: 1:
    }
}
@keyframes fade-in {
    0% {
        opacity: 0:
    }
    100% {
        opacity: 1:
    }
}

Backgrounds

VariableTypeDefaultDescriptionRequired

@value

string, keyword

-

Background rules

.background(transparent);
.background('url("bg.png") #00f no-repeat');
background: transparent;
background: url("bg.png") #00f no-repeat;
VariableTypeDefaultDescriptionRequired

@color

color

@bodyBackground = @white

Background color

@filename

string

-

Image file

@repeat

string, keyword

-

Image repeat

VariableTypeDefaultDescriptionRequired

@color

color

-

Background color

@opacity

unit

-

Background opacity

.background(#00f; 0.2);
background-color: rgba(0, 0, 255, 0.2);
VariableTypeDefaultDescriptionRequired

@color

color

-

Background color

@filename

string

-

Image file

@x

unit

-

Horizontal offset

@y

unit

0

Vertical offset

@repeat

keyword

no-repeat

Image repeat

.background(#00f; 'bg.png'; 10%; 15%);
background: #00f url('../img/bg.png') 10% 15% no-repeat;
VariableTypeDefaultDescriptionRequired

@value

preset

-

Light or dark

@opacity

unit

@defaultOpacity = .2

Background

@fallback

color

fff, #000

Fallback background color

.background(light; 50%);
background-color: rgba(255, 255, 255, 0.5);

Background Color

VariableTypeDefaultDescriptionRequired

@color

color

https://www.weepower.com/style/variables#base = @white

Background color

.background-color(blue);
background-color: #00f;

Background Image

VariableTypeDefaultDescriptionRequired

@value

keyword

-

Image file

.background-image(bg.png);
background-image: '../img/bg.png';
VariableTypeDefaultDescriptionRequired

@filename

string

-

Image file

@repeat

keyword

-

Image repeat

.background-image('bg.png'; no-repeat);
background-image: url('../img/bg.png');
background-repeat: no-repeat;
VariableTypeDefaultDescriptionRequired

retina

keyword

-

Retina preset

@filename

string

-

Image file

@width

unit

auto

Size or width

@height

unit

auto

Height

.selector {
    .background-image(retina; 'bg.png'; 10px);
}
.selector {
    background-image: url('../img/bg.png');
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .selector {
        background-image: url('../img/bg-2x.png');
        background-size: 10px auto;
    }
}
VariableTypeDefaultDescriptionRequired

@filename

string

-

Image file

@x

unit

-

Horizontal offset

@y

unit

0

Vertical offset

@repeat

keyword

no-repeat

Repeat

.background-image('bg.png'; 10px);
background-image: url('../img/bg.png');
background-position: 10px 0;
background-repeat: no-repeat;
VariableTypeDefaultDescriptionRequired

retina

keyword

-

Retina present

@filename

string

-

Image file

@width

unit

-

Width

height

unit

-

Height

@x

unit

0

Vertical offset

@repeat

keyword

no-repeat

Image repeat

.selector {
    .background-image(retina; 'bg.png'; 4rem; 3rem; 10px);
}
.selector {
    background-image: url('../img/bg.png');
    background-position: 10px 0;
    background-repeat: no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .selector {
        background-image: url('../img/bg-2x.png');
        background-size: 4rem 3rem;
    }
}

The value of the retina filename suffix is set by the @retinaSuffixvariable.

VariableTypeDefaultDescriptionRequired

@filename

string

-

Image file

@x

unit

-

Horizontal offset

@y

unit

0

Vertical offset

@repeat

keyword

no-repeat

Image repeat

@attachment

keyword

-

Image attachment

.background-image('bg.png'; 10px; 8px; no-repeat; fixed);
background-attachment: fixed;
background-image: url('../img/bg.png');
background-position: 10px 8px;
background-repeat: no-repeat;
VariableTypeDefaultDescriptionRequired

retina

preset

-

Retina

@filename

string

-

Image file

@width

unit

-

Width value

height

unit

-

Height value

@x

unit

-

Horizontal offset

@y

unit

-

Vertical offset

@repeat

keyword

-

Image repeat

@attachment

keyword

-

Attachment value

.selector {
    .background-image(retina; 'bg.png'; 4rem; 3rem; 10px; 8px; no-repeat; fixed);
}
.selector {
    background-attachment: fixed;
    background-image: url('../img/bg.png');
    background-position: 10px 8px;
    background-repeat: no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .selector {
        background-image: url('../img/bg-2x.png');
        background-size: 4rem 3rem;
    }
}
VariableTypeDefaultDescriptionRequired

@filename

string

-

Image file

@x

unit

-

Horizontal offset

@y

unit

-

Vertical offset

@repeat

keyword

-

Repeat

@attachment

keyword

-

Attachment value

@size

unit

-

Size

.background-image('bg.png'; 10px; 8px; no-repeat; fixed; 40);
background-attachment: fixed;
background-image: url('../img/bg.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 40rem;
VariableTypeDefaultDescriptionRequired

@filename

string

-

Image file

@x

unit

-

Horizontal offset

@y

unit

-

Vertical offset

@repeat

keyword

-

Repeat

@attachment

keyword

-

Attachment value

@width

unit

-

Width

@height

unit

-

Height

.background-image('bg.png'; 10px; 8px; no-repeat; fixed; 400px; 300px);
background-attachment: fixed;
background-image: url('../img/bg.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 400px 300px;

Background Gradient

VariableTypeDefaultDescriptionRequired

@color

color

@gray

Fallback color

@start

color

rgba(0,0,0,0.8)

Starting color

@end

color

rgba(0,0,0,0.2)

Ending color

@angle

integer

180

Angle

.background-gradient(blue; green; yellow; 90);
background-color: #00f;
background: -webkit-linear-gradient(0deg, #008000, #ff0);
background: linear-gradient(90deg, #008000, #ff0);
VariableTypeDefaultDescriptionRequired

@color

color

@gray

Fallback color

@spread

percentage

-

Color range

@angle

integer

180

Angle

.background-gradient(blue; 15%; 90);
background-color: #00f;
background: -webkit-linear-gradient(0deg, #4d4dff, #0000b3);
background: linear-gradient(90deg, #4d4dff, #0000b3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4dff', endColorstr='#0000b3', GradientType=0);

Background Attachment

VariableTypeDefaultDescriptionRequired

@arguments

keyword

-

Attachment value

.background-attachment(scroll);
background-attachment: scroll;

Background Position

VariableTypeDefaultDescriptionRequired

@x

unit

0

Horizontal offset

@y

unit

0

Vertical offset

.background-position(10px; 5px);
background-position: 10px 5px;

Background Repeat

VariableTypeDefaultDescriptionRequired

@arguments

keyword

-

Repeat value

.background-repeat(repeat);
background-repeat: repeat;

Background Size

VariableTypeDefaultDescriptionRequired

@size

unit

-

Size value

.background-size(3rem);
background-size: 3rem;

Background Clip

VariableTypeDefaultDescriptionRequired

@value

keyword

border-box

Clip value

.background-clip();
background-clip: border-box;

Sprite

VariableTypeDefaultDescriptionRequired

@color

color

-

Background color

@x

unit

0

Horizontal offset

@y

unit

0

Vertical offset

@repeat

keyword

no-repeat

Repeat

@filename

string

@spriteFilename

Image file

.sprite(blue);
background: #00f url('../img/sprite.png') 0 0 no-repeat;
VariableTypeDefaultDescriptionRequired

retina

keyword

-

Retina preset

@color

color

-

Background Color

@width

unit

auto

Width

@height

unit

auto

Height

@x

unit

0

Horizontal offset

@y

unit

0

Vertical offset

@repeat

keyword

no-repeat

Repeat

@filename

string

@spriteFilename

Image file

.selector {
    .sprite(retina; blue);
}
.selector {
    background: #0000ff url('../img/sprite.png') 0 0 no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .selector {
        background-image: url('../img/sprite-2x.png');
        background-size: auto auto;
    }
}
VariableTypeDefaultDescriptionRequired

@x

unit

0

Horizontal offset

@y

unit

-0

Vertical offset

@repeat

keyword

no-repeat

Repeat

@filename

string

@spriteFilename

Image file

.sprite()
background-image: url('../img/sprite.png');
background-position: 0 0;
background-repeat: no-repeat;
VariableTypeDefaultDescriptionRequired

retina

keyword

-

Retina preset

@x

unit

0

Horizontal offset

@y

unit

0

Vertical offset

@width

unit

@retinaSpriteWidth

Width

@height

unit

@retinaSpriteHeight

Height

@repeat

keyword

no-repeat

Repeat

@filename

string

@spriteFilename

Image file

.selector {
    .sprite(retina);
}
.selector {
    background-image: url('../img/sprite.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .selector {
        background-image: url('../img/sprite-2x.png');
        background-size: auto auto;
    }
}

All image paths are relative to the @imagePath variable which defaults to "…/img". It can be overridden in variables.less.

Blocks

Centered Block

VariableTypeDefaultDescriptionRequired

@maxWidth

unit

-

Max width

@margin

unit

-

Bottom margin

.centered-block();
display: block;
margin-left: auto;
margin-right: auto;
.centered-block(5);
display: block;
margin-left: auto;
margin-right: auto;
max-width: 5rem;
.centered-block(50%; 2);
display: block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
margin-bottom: 2rem;

Borders

Border

VariableTypeDefaultDescriptionRequired

@value

string, keyword

'1px solid #404040'

Border rules

.border('2px dotted #00f');
border: 2px dotted #00f;
VariableTypeDefaultDescriptionRequired

@color

color

@lighterGray

Color

@value

unit

1px

Size

@style

keyword

solid

Style

.border(red; 4px; dotted);
border: 4px dotted #f00;
VariableTypeDefaultDescriptionRequired

light, dark

keyword

-

Light or dark preset

@opacity

integer

@defaultOpacity = .2

Opacity

@value

unit

1px

Width

@style

keyword

solid

Border style

@fallback

color

@black = #000

Fallback color

.border(dark; 40%; 2px);
border: 2px solid rgba(0, 0, 0, 0.4);
VariableTypeDefaultDescriptionRequired

top, right, bottom, left

keyword

-

Side preset

@color

color

@lighterGray = @darkestGray

Color

@value

unit

1px

Width

@style

keyword

solid

Style

.border(top; blue);
border-top: 1px solid #00f;
VariableTypeDefaultDescriptionRequired

top, right, bottom, left

keyword

-

Side preset

light, dark

keyword

-

Light or dark preset

@opacity

integer

@defaultOpacity = .2

Color

@value

unit

1px

Width

@style

keyword

solid

Style

@fallback

color

@white = #fff, @black = #000

Fallback color

.border(top; light; 50%; 3px; dotted);
border: 3px dotted rgba(255, 255, 255, 0.5);
VariableTypeDefaultDescriptionRequired

horizontal, vertical

keyword

-

Horizontal or vertical preset

@color

color

@lighterGray = @darkestGray

Color

@value

unit

1px

Width

@style

keyword

solid

Style

.border(horizontal; red; 2px; dotted);
border-left: 2px dotted #ff0000;
border-right: 2px dotted #ff0000;
VariableTypeDefaultDescriptionRequired

horizontal, vertical

keyword

-

Horizontal or vertical preset

light, dark

keyword

-

Light or dark preset

@opacity

integer

@defaultOpacity = .2

Opacity

@value

unit

1px

Width

@style

keyword

solid

Style

.border(vertical; dark; 0.4);
border-top: 1px solid rgba(0, 0, 0, 0.4);
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
VariableTypeDefaultDescriptionRequired

@top

unit

-

Top size

@right

unit

-

Right size

@bottom

unit

-

Bottom size

@left

unit

-

Left size

@color

color

@lighterGray = @darkestGray

Color

@style

keyword

solid

Style

.border(1px; 3px; 4px; 2px; blue; dotted);
border-bottom: 4px dotted #00f;
border-left: 2px dotted #00f;
border-right: 3px dotted #00f;
border-top: 1px dotted #00f;

Border Image

VariableTypeDefaultDescriptionRequired

@filename

string

-

Name of file

@slice

unit

100%

Slice offset

@width

unit

1

Border width

@outset

unit

0

Extend beyond border box

@repeat

keyword

stretch

Match size of border

.border-image('border.png');
-webkit-border-image: url('../img/border.png') 100% 1 0 stretch;
border-image: url('../img/border.png') 100% 1 0 stretch;

Border Color, Style & Width

VariableTypeDefaultDescriptionRequired

@color, @style, @width

color, keyword, unit

-

Color, style, or width

.border-color(blue);
border-color: #00f;
VariableTypeDefaultDescriptionRequired

top, right, bottom, left

keyword

-

Side presets

@color, @style, @width

color, keyword, unit

-

Color, style, or width

.border-color(top; blue);
border-top-color: #00f;
.border-style(dotted);
border-style: dotted;
.border-style(right; dotted);
border-right-style: dotted;
.border-width(4px);
border-width: 4px;
.border-width(bottom; 4px);
border-bottom-width: 4px;

Box Shadows

VariableTypeDefaultDescriptionRequired

@value

string, keyword

'1px 1px 0 0 rgba(0, 0, 0, @{defaultOpacity})'

Box-shadow rules

.shadow('3px 2px 1px 0 #000');
box-shadow: 3px 2px 1px 0 #000;
VariableTypeDefaultDescriptionRequired

inner

keyword

-

Inner preset

@color

color

-

Shadow color

@x

value

1px

Horizontal offset

@y

value

1px

Vertical offset

@blur

value

0

Blur distance

@spread

value

0

Shadow size

.shadow(blue);
box-shadow: 1px 1px 0 0 #00f;
.shadow(rgba(0, 0, 0, 0.6); 4px; 3px; 2px; 2px);
box-shadow: 4px 3px 2px 2px rgba(0, 0, 0, 0.6);
.shadow(inner; blue);
box-shadow: inset 1px 1px 0 0 #00f;
VariableTypeDefaultDescriptionRequired

light, dark

keyword

-

Light or dark preset

@value

@percentage

@defaultOpacity = .2

Opacity

@x

unit

1px

Horizontal offset

@y

unit

1px

Vertical offset

@blur

unit

0

Blur

@spread

unit

0

Spread

.shadow(light; 40%);
box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.4);
.shadow(dark; 50%);
box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.5);
VariableTypeDefaultDescriptionRequired

inner

keyword

-

Inner preset

light, dark

keyword

-

Light or dark preset

@opacity

percentage

@defaultOpacity = .2

Opacity

@x

unit

1px

Horizontal offset

@y

unit

1px

Vertical offset

@blur

unit

0

Blur

@spread

unit

0

Spread

.shadow(inner; light; 40%);
box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.4);
.shadow(inner; dark; 50%);
box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, 0.5);

circle

circle(diameter, crop, display = 'block')
circle(.5);
height: 0.5rem;
width: 0.5rem;
display: block;
background-clip: border-box;
border-radius: 0.25rem;
circle(.5, true);
height: 0.5rem;
width: 0.5rem;
display: block;
background-clip: border-box;
border-radius: 0.25rem;
overflow: hidden;
circle(.5, display: inline);
height: 0.5rem;
width: 0.5rem;
display: inline-block;
background-clip: border-box;
border-radius: 0.25rem;

clearfix

clearfix();
&:after {
    clear: both;
    content: '';
    display: block;
}

Colors

VariableTypeDefaultDescriptionRequired

@color

color

@baseColor = @darkestGray

Color value

.color(blue);
color: #00f;

Shortcuts

.primary();
.secondary();
.tertiary();
.white();
.lightestGray();
.lighterGray();
.lightGray();
.gray();
.darkGray();
.darkerGray();
.darkestGray();
.black();

The values for all the above colors are configurable with variables.less.

Content

VariableTypeDefaultDescriptionRequired

@value

string, keyword

''

Content

@font

string, keyword

false

Font family

@size

unit

false

Font size

.content(text);
content: 'text';
.content(example; Georgia; 2);
content: 'example';
font-family: Georgia;
font-size: 2rem;

Prefix, Suffix & Bookends

VariableTypeDefaultDescriptionRequired

@value

string, keyword

'-'

Content

@margin

unit

0.5em

Left or right margin

@font

string, keyword

false

Font family

@color

color

false

Font color

.prefix();
:before {
    content: '-';
    margin-right: 0.5em;
}
.suffix('text'; 1em; Georgia; blue);
:after {
    content: 'text';
    margin-left: 1em;
    font-family: Georgia;
    color: #0000ff;
}
.bookends();
:before {
    content: '-';
    margin-right: 0.5em;
}
:after {
    content: '-';
    margin-left: 0.5em;
}

Display

Hide

.hide();
display: none;

Show

.show();
display: inherit;

Hidden

.hidden();
visibility: hidden;

Visible

.visible();
visibility: visible;

Block

VariableTypeDefaultDescriptionRequired

@width

unit

-

Width

@height

unit

-

Height

.block(4; 3);
display: block;
width: 4rem;
height: 3rem;

Spaced

VariableTypeDefaultDescriptionRequired

@margin

unit

@blockMarginBottom = 4

Bottom margin

.spaced(0.5);
margin-bottom: 0.5rem;

Spaced Block

VariableTypeDefaultDescriptionRequired

@margin

unit

@blockMarginBottom = 4

Bottom margin

@width

unit

-

Width

@height

unit

-

Height

.spaced-block(0.5; 2; 4);
display: block;
margin-bottom: 0.5rem;
width: 2rem;
height: 4rem;

Box Sizing

VariableTypeDefaultDescriptionRequired

@val

keyword

border-box

Box-sizing value

.box-sizing(content-box);
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;

Border Box

.border-box();
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

Content Box

.content-box();
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;

fill

fill();
height: 100%;
width: 100%;

Filters

Filter

VariableTypeDefaultDescriptionRequired

@value

string, keyword

-

Filter rules

.filter('grayscale(50%)');
-webkit-filter: grayscale(50%);
filter: grayscale(50%);

Blur

VariableTypeDefaultDescriptionRequired

@value

unit

2px

Radius

.blur(4px);
-webkit-filter: blur(4px);
filter: blur(4px);

Brightness

VariableTypeDefaultDescriptionRequired

@value

unit

0.5

Multiplier

.brightness(0.8);
-webkit-filter: brightness(0.8);
filter: brightness(0.8);

Contrast

VariableTypeDefaultDescriptionRequired

@value

unit

1.5

Multiplier

.contrast(1.2);
-webkit-filter: contrast(1.2);
filter: contrast(1.2);

Grayscale

VariableTypeDefaultDescriptionRequired

@value

unit

1

Amount

.grayscale();
-webkit-filter: grayscale(1);
filter: grayscale(1);

Hue Rotate

VariableTypeDefaultDescriptionRequired

@value

unit

180deg

Angle

.hue-rotate(60deg);
-webkit-filter: hue-rotate(60deg);
filter: hue-rotate(60deg);

Invert

VariableTypeDefaultDescriptionRequired

@value

unit

1

Amount

.invert(20%);
-webkit-filter: invert(20%);
filter: invert(20%);

Saturate

VariableTypeDefaultDescriptionRequired

@value

unit

0.5

Amount

.saturate(200%);
-webkit-filter: saturate(200%);
filter: saturate(200%);

Sepia

VariableTypeDefaultDescriptionRequired

@value

unit

0.5

Amount

.sepia(100%);
-webkit-filter: sepia(100%);
filter: sepia(100%);

Drop Shadow

VariableTypeDefaultDescriptionRequired

@value

string, keyword

'1px 1px 0 rgba(0, 0, 0, @{defaultOpacity})'

Drop-shadow rules

.drop-shadow('2px 2px 1px rgba(120, 80, 40, 0.5)');
filter: drop-shadow('2px 2px 1px rgba(120, 80, 40, 0.5)');
VariableTypeDefaultDescriptionRequired

@color

color

-

Color

@x

unit

1px

X-offset

@y

unit

1px

Y-offset

@blur

unit

0

Blur radius

.drop-shadow(blue; 2px; 4px; 1px);
filter: drop-shadow('2px 4px 1px #00f');
.drop-shadow(light; 0.4);
filter: drop-shadow('1px 1px 0 rgba(255, 255, 255, 0.4)');
.drop-shadow(dark; 0.8; 2px; 1px; 1px);
filter: drop-shadow('2px 1px 1px rgba(0, 0, 0, 0.8)');

Font Family

VariableTypeDefaultDescriptionRequired

@value

string, keyword

@baseFont = Arial, Helvetica, sans-serif

Font family rules

.font-family(Georgia, Serif);
font-family: Georgia, Serif;

Font Loading

Load Font

VariableTypeDefaultDescriptionRequired

@name

string

-

Font family rules

@file

file

@name

Font file

@weight

integer, keyword

normal

Font weight

@style

keyword

normal

Font style

.load-font(icons);
@font-face {
    font-family: Example;
        src: url('../fonts/icons.eot');
        src: url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
            url('../fonts/icons.woff2') format('woff2'),
             url('../fonts/icons.woff') format('woff'),
             url('../fonts/icons.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;

    // Window Chrome fix
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        @font-face {
            font-family: ~'@{name}';
            src: url('../fonts/icons.svg#icons') format('svg');
        }
    }
}

Font Selection

VariableTypeDefaultDescriptionRequired

@family

font

@baseFont = Arial, Helvetica, sans-serif

Font family rules

@size

unit

-

Font size

@weight

unit

-

Font weight

@lineHeight

unit

-

Line height

@style

keyword

-

Font style

.font(Helvetica; 2; 100; 2; italic);
font-family: Helvetica;
font-size: 2rem;
font-weight: 100;
line-height: 2rem;
font-style: italic;

Font Size

VariableTypeDefaultDescriptionRequired

@value

unit

@baseFontSize = 1.6

Font size

.font-size(2);
font-size: 2rem;
VariableTypeDefaultDescriptionRequired

@value

unit

-

Font size rules

@lineHeight

unit

-

Line height rules

.font-size(3; 1.6);
font-size: 3rem;
line-height: 1.6rem;

Font Style

VariableTypeDefaultDescriptionRequired

@value

keyword

normal

Font style

.font-style(italic);
font-style: italic;

Font Weight

VariableTypeDefaultDescriptionRequired

@value

unit

@baseFontWeight = normal

Font weight

.font-weight(300);
font-weight: 300;

Forms

Input Placeholder

VariableTypeDefaultDescriptionRequired

@color

color

@inputPlaceholderColor = lighten(@inputColor, 40%)

Placeholder color

.input-placeholder(gray);
:-moz-placeholder {
    color: #808080;
}
::-moz-placeholder {
    color: #808080;
}
:-ms-input-placeholder {
    color: #808080;
}
::-webkit-input-placeholder {
    color: #808080;
}

Grid

Row & Row-Modify

VariableTypeDefaultDescriptionRequired

@margin

percentage

@gridMargin = 5%

Left margin

.selector {
    .row(2%);
}
.selector {
    margin-left: -2%;
    max-width: 102%;
}
.selector:after {
    clear: both;
    content: ' ';
    display: table;
}
.row-modify(2%);
margin-left: -2%;
max-width: 102%;

Row Reset

.row-reset();
margin-left: 0;
max-width: none;

Column & Column-Modify

VariableTypeDefaultDescriptionRequired

@width

unit

false

Column width

.column(30%);
float: left;
width: 30%;
VariableTypeDefaultDescriptionRequired

spaced

keyword

-

Set margin between columns

@share

integer

-

Column span

@columns

integer

@gridColumns = 8

Number of columns

@margin

percentage

@gridMargin = 5%

Left margin

.column(2; 3);
float: left;
width: 66.66666667%;
.column(spaced; 2; 3; 2%);
float: left;
width: 64.66666667%;
margin-left: 2%;
.column-modify(spaced; 2; 3; 2%);
width: 64.66666667%;
margin-left: 2%;

Column Reset

VariableTypeDefaultDescriptionRequired

@resetMargin

boolean

false

Reset left margin

.column-reset(true);
float: none;
width: auto;
margin-left: 0;

Column Pull & Push

VariableTypeDefaultDescriptionRequired

@share

integer

-

Column span

@columns

integer

@gridColumns = 8

Number of columns

.column-pull(2);
position: relative;
right: 25%;
.column-push(3; 4);
left: 75%;
position: relative;

Column Offset

VariableTypeDefaultDescriptionRequired

spaced

keyword

-

Set margin between columns

@share

integer

-

Column span

@columns

integer

@gridColumns = 8

Number of columns

@margin

percentage

(@gridMargin / 2)

Left margin

.column-offset(2; 4);
margin-left: 50%;
.column-offset(spaced; 1; 3; 0.02);
margin-left: 33.33%;

hidden

hidden();
visibility: hidden;

hide

hide();
display: none;

Inline Grid

Inline Row

VariableTypeDefaultDescriptionRequired

@margin

percentage

@gridMargin = 5%

Left margin

@gridSpaceless

boolean

@gridMargin = 5%

Add whitespace hack

.selector {
    .inline-row(2%);
}
.selector {
    margin-left: -2%;
    max-width: 102%;
    letter-spacing: -.32em;
}

Inline Column

VariableTypeDefaultDescriptionRequired

spaced

keyword

-

Set margin between columns

@share

integer

-

Column span

@columns

integer

@gridColumns = 8

Number of columns

@gridSpaceless

boolean

@gridMargin = 5%

Add whitespace hack

.inline-column(2; 3);
width: 66.66666667%;
display: inline-block;
vertical-align: top;
.inline-column(spaced; 2; 3; 2%);
margin-left: 2%;
width: 64.66666667%;
display: inline-block;
vertical-align: top;

Line Height

VariableTypeDefaultDescriptionRequired

@value

unit

@baseLineHeight

Line Height

.line-height(1.2);
line-height: 1.2em;

The default unit is em. To use a different unit update the @defaultLineHeightUnit variable in the variables file.

lineThrough

line-through();
text-decoration: line-through;

Lists

Line List

.inline-list();
li {
    display: inline;
}
VariableTypeDefaultDescriptionRequired

@spacing

unit

-

Left margin

.inline-list(2);
li {
    display: inline;
    margin-left: 2;
}
li:first-child {
    margin-left: 0;
}
VariableTypeDefaultDescriptionRequired

@content

string

-

Content

@margin

unit

0

Right margin

.inline-list('foo'; 2px);
li {
    display: inline;
    margin-right: 2px;
}
li:before {
    content: 'foo';
    margin-right: 2px;
}
li:first-child:before {
    display: none;
}

List Style

VariableTypeDefaultDescriptionRequired

@value

keyword(s)

-

List-style rules

.list-style(circle inside);
list-style: circle inside;

List Position

VariableTypeDefaultDescriptionRequired

@value

keyword

outside

List-style position

.list-position(inside);
list-style-position: inside;

Unstyled

.unstyled();
list-style: none;

lowercase

lowercase();
text-transform: lowercase;

Margin

VariableTypeDefaultDescriptionRequired

@value

unit

-

Margin value

.margin(5);
margin: 5rem;
VariableTypeDefaultDescriptionRequired

top, right, bottom, left

keyword

-

Side presets

@value

unit

-

Margin value

.margin(left; 2);
margin-left: 2rem;
VariableTypeDefaultDescriptionRequired

horizontal, vertical

keyword

-

Horizontal or vertical preset

@value

unit

-

Margin value

.margin(vertical; 2);
margin-top: 2rem;
margin-bottom: 2rem;
VariableTypeDefaultDescriptionRequired

horizontal, vertical

keyword

-

Horizontal or vertical preset

@left, @top

unit

-

Margin value

@right, @bottom

unit

-

Margin value

.margin(horizontal; 2; 3);
margin-left: 2rem;
margin-right: 3rem;
VariableTypeDefaultDescriptionRequired

@y

unit

-

Vertical margins

@x

unit

-

Horizontal margins

.margin(2; 3);
margin-top: 2rem;
margin-right: 3rem;
margin-bottom: 2rem;
margin-left: 3rem;
VariableTypeDefaultDescriptionRequired

@top

unit

-

Top margin

@right

unit

-

Right margin

@bottom

unit

-

Bottom margin

@left

unit

-

Left margin

.margin(2; 3; 3; 4);
margin-top: 2rem;
margin-right: 3rem;
margin-bottom: 3rem;
margin-left: 4rem;

Multiple Columns

VariableTypeDefaultDescriptionRequired

@count

integer

2

Column width

@gap

unit

-

Column gap

@style

keyword

@gridColumns = 8

Column rule style

@width

unit

@gridMargin = 5%

Column width

.columns(3; 2);
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 2rem;
-webkit-column-gap: 2rem;
column-gap: 2rem;

Column Count

VariableTypeDefaultDescriptionRequired

@value

integer

-

Column count

.columns-count(2);
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;

Column Gap

VariableTypeDefaultDescriptionRequired

@value

unit

-

Column gap width

.columns-gap(1);
-moz-column-gap: 1rem;
-webkit-column-gap: 1rem;
column-gap: 1rem;

Column Style

VariableTypeDefaultDescriptionRequired

@value

keyword

-

Column style

.columns-style(dotted);
-moz-column-rule-style: dotted;
-webkit-column-rule-style: dotted;
column-rule-style: dotted;

Column Width

VariableTypeDefaultDescriptionRequired

@value

integer

-

Column width

.columns-width(20);
-moz-column-rule-width: 20rem;
-webkit-column-rule-width: 20rem;
column-rule-width: 20rem;

noClear

no-clear();
&::-ms-clear {
    display: none
}
&::-webkit-search-cancel-button {
    -webkit-appearance: none
}

Opacity

VariableTypeDefaultDescriptionRequired

@value

unit

-

Opacity

.opacity(50%);
filter: alpha(opacity=50);
opacity: 0.5;

Transparent

.transparent();
filter: alpha(opacity=0);
opacity: 0;

Opaque

.opaque();
filter: alpha(opacity=100);
opacity: 1;

Other

Resize

VariableTypeDefaultDescriptionRequired

@value

keyword

-

Resize value

.resize(horizontal);
resize: horizontal;

Resizable

VariableTypeDefaultDescriptionRequired

@value

keyword

both

Resize value

.resizable(vertical);
overflow: hidden;
resize: vertical;

Hide Text

.hide-text();
overflow: hidden;
text-indent: 100%;
white-space: nowrap;

Selection

VariableTypeDefaultDescriptionRequired

@color

color

@selectionColor = @white

Selection color

@background

color, string, keyword

@selectionBackground = @linkColor

Selection background

.selection();
::-moz-selection {
    text-shadow: none;
    background: #167da3;
    color: #ffffff;
}
::selection {
    text-shadow: none;
    background: #167da3;
    color: #ffffff;
}

Cursor

VariableTypeDefaultDescriptionRequired

@value

keyword

pointer

Cursor value

.cursor();
cursor: pointer;

Overflow

VariableTypeDefaultDescriptionRequired

x, y

keyword

-

Overflow axis

@value

keyword

-

Overflow value

.overflow(hidden);
overflow: hidden;
.overflow(x; scroll);
overflow-x: scroll;
VariableTypeDefaultDescriptionRequired

@x

keyword

-

Overflow-x value

@y

keyword

-

Overflow-y value

.overflow(hidden; scroll);
overflow-x: hidden;
overflow-y: scroll;

Crop & Scroll

VariableTypeDefaultDescriptionRequired

horizontal, vertical

keyword

-

Horizontal or vertical preset

@value

keyword

true

Overflow value

.crop(both);
overflow: hidden;
.crop(vertical);
overflow-y: hidden;
.scroll();
overflow: scroll;
.scroll(horizontal);
overflow-x: scroll;

Fill

VariableTypeDefaultDescriptionRequired

horizontal, vertical, both

keyword

-

Horizontal, vertical, or both preset

@value

keyword, color

true

Fill value

.fill(horizontal);
width: 100%;
.fill(blue);
fill: #00f;
.fill(both);
width: 100%;
height: 100%;

No Clear

.no-clear();
::-ms-clear {
    display: none;
}
::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

Padding

VariableTypeDefaultDescriptionRequired

@value

unit

-

Padding value

.padding(5);
padding: 5rem;
VariableTypeDefaultDescriptionRequired

top, right, bottom, left

keyword

-

Side presets

@value

unit

-

Padding value

.padding(left; 2);
padding-left: 2rem;
VariableTypeDefaultDescriptionRequired

horizontal

keyword

-

Sets padding to @bumperPadding

.padding(horizontal);
padding-left: 6%;
padding-right: 6%;
VariableTypeDefaultDescriptionRequired

horizontal, vertical

keyword

-

Horizontal or vertical preset

@value

unit

-

Padding value

.padding(vertical; 2);
padding-top: 2rem;
padding-bottom: 2rem;
VariableTypeDefaultDescriptionRequired

horizontal, vertical

keyword

-

Horizontal or vertical preset

@left, @top

unit

-

Left or top padding value

@right, @bottom

unit

-

Right or bottom padding value

.padding(horizontal; 2; 3);
padding-left: 2rem;
padding-right: 3rem;
VariableTypeDefaultDescriptionRequired

@vertical

unit

-

Vertical padding

@horizontal

unit

-

Horizontal

.padding(2; 3);
padding-top: 2rem;
padding-right: 3rem;
padding-bottom: 2rem;
padding-left: 3rem;
VariableTypeDefaultDescriptionRequired

@top

unit

-

Top padding

@right

unit

-

Right padding

@bottom

unit

-

Bottom padding

@left

unit

-

Left padding

.padding(2; 3; 3; 4);
padding-top: 2rem;
padding-right: 3rem;
padding-bottom: 3rem;
padding-left: 4rem;
VariableTypeDefaultDescriptionRequired

@padding

unit

@bumperPadding = 6%

Padding value

Padded

.padded(2%);
padding-left: 2%;
padding-right: 2%;

Position

Top, Right, Bottom & Left

VariableTypeDefaultDescriptionRequired

@value

unit

0

Amount

.top(4);
top: 4rem;
.right(2);
right: 2rem;

Position

VariableTypeDefaultDescriptionRequired

@value

keyword

-

Positioning

@top

unit

-

Top

@right

unit

-

Right

@bottom

unit

-

Bottom

@left

unit

-

Left

.position(fixed; 4px; 3; 2%; 1rem);
position: fixed;
top: 4px;
right: 3rem;
bottom: 2%;
left: 1rem;

Absolute & Fixed

VariableTypeDefaultDescriptionRequired

@top

unit

-

Top position

@right

unit

-

Right position

@bottom

unit

-

Bottom position

@left

unit

-

Left position

.absolute();
position: absolute;
.absolute(3; 2);
position: absolute;
top: 3rem;
right: 2rem;
.fixed(2rem);
position: fixed;
top: 2rem;

Relative

.relative();
position: relative;

Static

.static();
position: static;

Z-Index

VariableTypeDefaultDescriptionRequired

@index

integer

1

Z-Index

.z-index(4);
z-index: 4;

Responsive

Media Query

VariableTypeDefaultDescriptionRequired

@maxWidth

unit

-

Breakpoint maximum width

@rules

rules

-

CSS rules

.selector {
    .media-query(500px; {
        .color(red);
    });
}
@media (max-width: 500px) {
    .selector {
        color: #f00;
    }
}
right();
float: right;
right(4);
right: 4rem;

Rounded Corners

VariableTypeDefaultDescriptionRequired

@value

unit

@defaultRadius = 3px

Size of radius

.rounded(3);
background-clip: border-box;
border-radius: 3rem;
VariableTypeDefaultDescriptionRequired

top, right, bottom, left

keyword

-

Side presets

@value

unit

@defaultRadius = 3px

Radius

.rounded(top);
background-clip: border-box;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
.rounded(right; 5);
background-clip: border-box;
border-top-right-radius: 5rem;
border-bottom-right-radius: 5rem;
VariableTypeDefaultDescriptionRequired

top, bottom

keyword

-

Top or bottom preset

left, right

keyword

-

Left or right preset

@value

unit

@defaultRadius = 3px

Radius

.rounded(bottom; left);
background-clip: border-box;
border-bottom-left-radius: 3px;
.rounded(top; right; 4);

``css background-clip: border-box; border-top-right-radius: 4rem;

VariableTypeDefaultDescriptionRequired

@top

unit

-

Top radius

@right

unit

-

Right radius

@bottom

unit

-

Bottom radius

@left

unit

-

Left radius

.rounded(2px; 3rem; 4px; 5px);
background-clip: border-box;
border-top-left-radius: 2px;
border-top-right-radius: 3rem;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 5px;

sepia

sepia(value = 0.5)
sepia(1);
filter: sepia(1);

Shapes

Caret

VariableTypeDefaultDescriptionRequired

up, down, right, left

keyword

-

Direction

@color

color

@darkGray = lighten(#000, 45%)

Color

@size

unit

5px

Size

@horizontalSize, @verticalSize

unit

@size

Horizontal or vertical size

.caret(up; red; 10px);
content: ' ';
height: 0;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ff0000;
.caret(left; blue);
content: ' ';
height: 0;
width: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 5px solid #0000ff;

show

show();
display: inherit;

Sizing

VariableTypeDefaultDescriptionRequired

@value

unit

-

Width or Height

@maxWidth, @maxHeight

unit

-

Maximum

.width(4; 5);
.height(3; 40%);
width: 4rem;
max-width: 5rem;
height: 3rem;
max-height: 40%;
VariableTypeDefaultDescriptionRequired

@value

unit

-

Minimum or maximum

.max-width(4rem);
.min-width(2rem);
max-width: 4rem;
min-width: 2rem;
.max-height(5rem);
.min-height(3rem);
max-height: 5rem;
min-height: 3rem;

Size

VariableTypeDefaultDescriptionRequired

@width

unit

-

Width or Width/Height

@height

unit

-

Height

.size(15);
.size(100px; 6);
height: 15rem;
width: 15rem;

height: 6rem;
width: 100px;
.min-size(12);
.min-size(2; 3);

.max-size(20);
.max-size(4; 5);
min-height: 12rem;
min-width: 12rem;

min-height: 3rem;
min-width: 2rem;

max-height: 20rem;
max-width: 20rem;

max-height: 5rem;
max-width: 4rem;

Square

VariableTypeDefaultDescriptionRequired

@size

unit

-

Width & height

.square(50px);
height: 50px;
width: 50px;

Ratio

VariableTypeDefaultDescriptionRequired

embed

keyword

-

Embed

@ratio

unit

(16/9)

Ratio

.ratio((4 / 3));
display: block;
height: 0;
padding-top: 75%;
.selector {
    .ratio(embed; (16 / 9));
}
.selector {
    overflow: hidden;
    position: relative;
}
.selector:before {
    content: ' ';
    display: block;
    height: 0;
    padding-top: 56.25%;
}

Circle

VariableTypeDefaultDescriptionRequired

@diameter

unit

-

Diameter

@crop

boolean

false

Crop

@display

block, inline

block

Display value

.circle(10px; true);
display: block;
height: 10px;
background-clip: border-box;
border-radius: 5px;
width: 10px;
overflow: hidden;

SVG

Fill

VariableTypeDefaultDescriptionRequired

@color

color

@baseColor = @darkestGray

Color value

@value

unit

-

Opacity

.fill(#123);
fill: #123;
.fill(red; 50%);
fill: rgba(155, 155, 155, .5);

Fill Dark/Light

VariableTypeDefaultDescriptionRequired

light, dark

keyword

-

Light or dark preset

@opacity

unit

@defaultOpacity = .2

Fill opacity

.fill(light);
fill: rgba(255, 255, 255, .2);
.fill(dark; 25%);
fill: rgba(0, 0, 0, .25);

Stroke

VariableTypeDefaultDescriptionRequired

@color

color

@baseColor = @darkestGray

Color value

@width

unit

-

Stroke width

.stroke(#123);
stroke: #123;
.stroke(red; 2px);
stroke: red 2px;

Tables

Responsive Table

.selector {
    .responsive-table();
}
.selector
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    margin-bottom: 4rem;
    table {
        margin-bottom: 0;
    }
}

Text Shadows

VariableTypeDefaultDescriptionRequired

@value

string, keyword

'1px 1px 0 rgba(0, 0, 0, @{defaultOpacity})'

Text shadow rules

.text-shadow('2px 1px 0 #000');
text-shadow: 2px 1px 0 #000;
VariableTypeDefaultDescriptionRequired

inner

keyword

-

Inner preset

@color

color

-

Shadow color

@x

value

1px

Horizontal offset

@y

value

1px

Vertical offset

@blur

value

0

Blur distance

.text-shadow(blue; 4px; 3px; 2px);
text-shadow: 4px 3px 2px #00f;
.text-shadow(inner; blue);
.text-shadow(inner; blue);
VariableTypeDefaultDescriptionRequired

inner

keyword

-

Inner preset

light, dark

keyword

-

Light or dark preset

@value, @opacity

number

@defaultOpacity = .2

Opacity

@x

unit

1px

Horizontal offset

@y

unit

1px

Vertical offset

@blur

unit

0

Blur

.text-shadow(light; 0.4);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
.text-shadow(inner; dark; 50%);
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);

Text Styling

Text Sharpen

.text-sharpen();
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;

Capitalize

.capitalize();
text-transform: capitalize;

Lowercase

.lowercase();
text-transform: lowercase;

Uppercase

.uppercase();
text-transform: uppercase;

Text Transform

VariableTypeDefaultDescriptionRequired

@value

keyword

none

Text transform rules

.text-transform(uppercase);
text-transform: uppercase;

Wrap

.wrap();
white-space: initial;

No-Wrap

.no-wrap();
white-space: nowrap;

Ellipsis

VariableTypeDefaultDescriptionRequired

@maxWidth

keyword

-

Maximum width for element

.ellipsis(20);
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 20rem;

Underline

.underline();
text-decoration: underline;
VariableTypeDefaultDescriptionRequired

@style

keyword

-

Text decoration style

@color

color

inheret

Text decoration color

.underline(solid; white);
text-decoration: underline;
-moz-text-decoration-line: underline;
-moz-text-decoration-style: solid;
-moz-text-decoration-color: #fff;
text-decoration: #fff solid underline;

Line-Through

.line-through();
text-decoration: line-through;

Text Decoration

VariableTypeDefaultDescriptionRequired

@value

keyword

underline

Text decoration rules

.text-decoration(overline);
text-decoration: overline;
VariableTypeDefaultDescriptionRequired

@line

keyword

-

Line type

@style

keyword

-

Line style

@color

color

inheret

Line color

.text-decoration(underline; dotted; blue);
text-decoration: underline;
-moz-text-decoration-line: underline;
-moz-text-decoration-style: dotted;
-moz-text-decoration-color: #00f;
text-decoration: #00f dotted underline;

Outline

VariableTypeDefaultDescriptionRequired

@value

keyword

'thin dotted'

Element outline rules

.outline();
outline: thin dotted;

Text Overflow

VariableTypeDefaultDescriptionRequired

@value

keyword

-

Element text overflow value

.text-overflow(clip);
text-overflow: clip;

Text Overflow

VariableTypeDefaultDescriptionRequired

@value

keyword

-

Element text overflow value

.text-overflow(clip);
text-overflow: clip;

White Space

VariableTypeDefaultDescriptionRequired

@value

keyword

-

Element white space value

.white-space(initial);
white-space: initial;

Letter Spacing

VariableTypeDefaultDescriptionRequired

@value

unit

-

Letter kerning rules

.letter-spacing(2);
letter-spacing: 2rem;

Word Spacing

VariableTypeDefaultDescriptionRequired

@value

unit

-

Word spacing rules

.word-spacing(3);
word-spacing: 3rem;

Text Indent

VariableTypeDefaultDescriptionRequired

@value

unit

-

Text indention rules

.text-indent(1rem);
text-indent: 1rem;

User Select

VariableTypeDefaultDescriptionRequired

@value

keyword

none

Controls selection operation

.user-select(text);
-moz-user-select: text;
-ms-user-select: text;
-webkit-user-select: text;
user-select: text;

Tab Size

VariableTypeDefaultDescriptionRequired

@value

integer

@codeBlockTabSize = 4

Tab length

.tab-size(4);
-moz-tab-size: 4;
tab-size: 4;

textSharpen

textSharpen();
font-smoothing: antialiased;

Transforms

Transform

VariableTypeDefaultDescriptionRequired

@arguments

keyword

-

Transform rules

.transform(translateX(10px));
-ms-transform: translateX(10px);
-webkit-transform: translateX(10px);
transform: translateX(10px);

Rotate

VariableTypeDefaultDescriptionRequired

@angle

integer

45

Angle

.rotate(30);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);

Scale

VariableTypeDefaultDescriptionRequired

@value, x, y

integer, keyword

1

Scale or dimension

@value

integer

1

Scale

.scale(x; 2);
-ms-transform: scaleX(2);
-webkit-transform: scaleX(2);
transform: scaleX(2);

Skew

VariableTypeDefaultDescriptionRequired

@x

integer

45

Horizontal skew

@y

integer

0

Vertical skew

.skew(30, 15);
-ms-transform: skew(30deg, 15deg);
-webkit-transform: skew(30deg, 15deg);
transform: skew(30deg, 15deg);
VariableTypeDefaultDescriptionRequired

x, y

keyword

-

X or Y preset

@x, @y

integer

45

Vertical skew

.skew(y; 15);
-ms-transform: skewY(15deg);
-webkit-transform: skewY(15deg);
transform: skewY(15deg);

Transform Origin

VariableTypeDefaultDescriptionRequired

@x

integer

-

Horizontal

@y

integer

0

Vertical origin

.transform-origin(15%; 10%);
-ms-transform: transform-origin(15%, 10%);
-webkit-transform: transform-origin(15%, 10%);
transform: transform-origin(15%, 10%);

Translate

VariableTypeDefaultDescriptionRequired

@x

integer

0

X translation

@y

integer

0

Y translation

@z

integer

-

Z translation

.translate(10px; 15px; 20%);
-webkit-transform: translate3d(10px, 15px, 20%);
transform: translate3d(10px, 15px, 20%);

Transitions

Transition

VariableTypeDefaultDescriptionRequired

@value

string

'all 0.2s ease-in-out 0s'

Transition rules

.transition('all 4s ease-in 1s');
-webkit-backface-visibility: hidden;
-webkit-transition: all 4s ease-in 1s;
transition: all 4s ease-in 1s;
VariableTypeDefaultDescriptionRequired

@property

keyword

all

Animatable Property

@duration

seconds

@defaultDuration = .2s

Duration

@ease

keyword

ease-in-out

Timing function

@delay

seconds

0s

Delay

.transition(all; 2s; ease-in; 0.2s);
-webkit-backface-visibility: hidden;
-webkit-transition: all 2s ease-in 0.2s;
transition: all 2s ease-in 0.2s;

Transition Delay

VariableTypeDefaultDescriptionRequired

@delay

seconds

1s

Delay value

.transition-delay(3s);
-webkit-transition-delay: 3s;
transition-delay: 3s;

Transition Duration

VariableTypeDefaultDescriptionRequired

@duration

seconds

@defaultDuration = .2s

Duration value

.transition-duration(0.5s);
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;

unstyled

unstyled();
list-style: none;

uppercase

uppercase();
text-transform: uppercase;

visible

visible();
visibility: visible;

wrap

wrap();
white-space: normal;