Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The animation mixin supports comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.

box:hover {
  // Animation shorthand works the same as the CSS3 animation shorthand
  @include animation(scale 1.0s ease-in, slide 2.0s ease);

  // The above outputs the same CSS as using independent, granular mixins.
  @include animation-name(scale, slide);
  @include animation-duration(2s);
  @include animation-timing-function(ease);
  @include animation-iteration-count(infinite);
}

Demo

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The animation-delay property specifies when an animation should start.

@include animation-delay(2s);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The animation-direction property indicates whether the animation should play in reverse on alternate cycles.

@include animation-direction(alternate-reverse);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The animation-duration property specifies the length of time that an animation should take to complete one cycle.

@include animation-duration(2s);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The animation-fill-mode property specifies how a CSS animation should apply styles to its target before and after it is executing.

@include animation-fill-mode(backwards);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The animation-iteration-count property defines the number of times an animation cycle should be played before stopping.

@include animation-iteration-count(infinite);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The animation-name property specifies a list of animations that should be applied to the selected element.

@include animation-name(scale, slide);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The animation-play-state property determines whether an animation is running or paused.

@include animation-play-state(paused);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle.

@include animation-timing-function(ease);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The appearance CSS property is used to display an element using a platform-native styling based on the operating system’s theme.

@include appearance(none);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The CSS backface-visibility property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed.

@include backface-visibility(visible);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The background mixin is used for adding multiple backgrounds using shorthand notation.

@include background(linear-gradient(red, green) left repeat);
@include background(linear-gradient(red, green) left repeat, radial-gradient(red, orange));
@include background(url("/images/a.png"), linear-gradient(red, green), center no-repeat orange scroll);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The background-image mixin is helpful for chaining multiple comma delimited background images and/or linear/radial-gradients into one background-image property. The background-image mixin supports up to 10 background-images.

Use in combination with the linear-gradient function and the radial-gradient function.

// Image asset with a linear-gradient
@include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));

// Multiple linear-gradients - Demo
@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%),
                           linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)));

// NOT SUPPORTED
@include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat);

// Background-image is not a shorthand property, therefore this doesn't make sense.

Demo

Note about shorthand notation

All CSS background properties support comma delimited values. For multiple background images you can specify the background properties like position, repeat, etc. for each image. For example:

@include background-image(url("/images/a.png"), url("images/b.png"));
background-position: center top, center;
background-repeat: no-repeat, repeat-x;

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

Supports shorthand notation.

@include border-image(url(/images/border.png) 27 repeat);

Demo

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

Changes the CSS box model of the element it’s applied to.

@include box-sizing(border-box);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

A mixin for vendor-prefixing the CSS3 calc function. It accepts a property and a value.

@include calc(width, "100% - 80px");

$width: 100%;

@include calc(width, "#{$width} - 80px");

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

All current CSS3 column properties are supported. See the complete list of mixins for more info.

@include columns(12 8em);
@include column-rule(1px solid green);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

A mixin for generating clean, vendor-prefixed CSS3 filters.

@include filter(grayscale(50%));

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The flexbox mixins are up to date with the 2014 W3C spec. The mixins also include fallbacks for the 2009 spec.

View all flexbox mixins

.parent {
  @include align-items(stretch);
  @include display(flex);
  @include flex-direction(row);
  @include justify-content(flex-start);
}

.parent > .child {
  @include flex(1);
}

Generates an @font-face declaration. Accepts arguments for weight, style, usage with the Rails Asset Pipeline and file formats.

@include font-face("source-sans-pro", "/fonts/source-sans-pro/source-sans-pro-regular");
@include font-face("source-sans-pro", "/fonts/source-sans-pro/source-sans-pro-bold", bold);
@include font-face("source-sans-pro", "/fonts/source-sans-pro/source-sans-pro-italic", normal, italic);

The $file-formats argument allows you specify your font’s file formats (the default is eot woff2 woff ttf svg:

@include font-face("source-sans-pro", "/fonts/source-sans-pro/source-sans-pro-regular", $file-formats: eot woff2 woff);

You can also use the Rails Asset Pipeline (place the fonts in app/assets/fonts/:

@include font-face("source-sans-pro", "source-sans-pro/source-sans-pro-regular", normal, $asset-pipeline: true, $file-formats: eot woff ttf);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The font-feature-settings mixin is helpful for using the advanced typographic features included in some OpenType fonts.

// Use ligatures if the typeface and font file include them
@include font-feature-settings("liga");

// Use proportional numbers, but not automatic kerning
@include font-feature-settings("pnum", "kern" false);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The hidpi mixin allows you to generate a media query that targets HiDPI devices. It accepts an optional ratio argument, with the default ratio being 1.3. Find my device pixel ratio.

@include hidpi(1.5) {
  width: 20em;
}

CSS Output

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5/1),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
  width: 20em;
}

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The hyphens property tells the browser how to split words when wrapping lines. The mixin accepts either none, manual, or auto, and defaults to none if left blank.

@include hyphens(manual);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The image-rendering mixin provides a hint to the user agent about how to handle its image rendering.

@include image-rendering(optimizeSpeed);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

A mixin for generating clean vendor-prefixed keyframes.

@include keyframes(fadeIn) {
  from {
    @include transform(scale(0));
  }
  to {
    @include transform(scale(1));
  }
}

CSS Output

@-webkit-keyframes fadeIn {
  from {
    -webkit-transform: scale(0); }

  to {
    -webkit-transform: scale(1); } }

@-moz-keyframes fadeIn {
  from {
    -moz-transform: scale(0); }

  to {
    -moz-transform: scale(1); } }

@-o-keyframes fadeIn {
  from {
    -o-transform: scale(0); }

  to {
    -o-transform: scale(1); } }

@keyframes fadeIn {
  from {
    transform: scale(0); }

  to {
    transform: scale(1); } }

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

Gradient position is optional. Position can be a degree (90deg). Mixin supports up to 10 color-stops.

This mixin will output a fallback background-color: #first-color; declaration. A $fallback argument can be passed to change the fallback color.

@include linear-gradient(#1e5799, #2989d8);
@include linear-gradient(to top, #8fdce5, #3dc3d1);
@include linear-gradient(to top, #8fdce5, #3dc3d1, $fallback: red);
@include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

Demo

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective.

The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.

@include perspective(300px);
@include perspective-origin(30% 30%);

Demo

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

Outputs vendor-prefixed placeholders for styling. Must be nested in a rule-set.

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS Output

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

Takes up to 10 gradients. See also the Background Image mixin.

This mixin will output a fallback background-color: #first-color; declaration. A $fallback argument can be passed to change the fallback color.

@include radial-gradient(#1e5799, #3dc3d1);
@include radial-gradient(#1e5799, #3dc3d1, $fallback: red);
@include radial-gradient(circle at 50% 50%, #eee 10%, #1e5799 30%, #efefef);

Demo

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

Outputs the spec and prefixed versions of the ::selection pseudo-element. Pass an argument of true to take the current element into consideration.

@include selection {
  background-color: #ffbb52;
}

.element {
  @include selection(true) {
    background-color: #ffbb52;
  }
}

CSS Output

::-moz-selection {
  background-color: #ffbb52;
}

::selection {
  background-color: #ffbb52;
}

.element::-moz-selection {
  background-color: #ffbb52;
}

.element::selection {
  background-color: #ffbb52;
}

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

CSS3 changes the text-decoration property to be a shorthand for text-decoration-color, text-decoration-line, and text-decoration-style. This mixin will generate the necessary prefixes for these new properties and shorthand.

@include text-decoration(underline double rgb(124,213,224));
@include text-decoration-line(line-through);
@include text-decoration-style(double);
@include text-decoration-color(#e71d02);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set

The transform-origin CSS property lets you modify the origin for transformations of an element.

The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.

@include transform(translateY(50px));
@include transform(scale(0.9) rotate(-3deg));
@include transform-origin(center top);
@include transform-style(preserve-3d);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

This mixin provides a shorthand syntax and supports multiple transitions.

@include transition(all 2.0s ease-in-out);
@include transition(opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);

To transition vendor-prefixed properties, e.g. -webkit-transform and -moz-transform, do not use the shorthand mixin. Instead, use the individual transition mixins:

@include transition-property(transform);
@include transition-duration(1.0s);
@include transition-timing-function(ease-in);
@include transition-delay(0.5s);

Deprecation Warning: This mixin has been deprecated and will be removed in v5.0.

Controls the appearance (only) of selection. This does not have any affect on actual selection operation.

@include user-select(none);