Code Editor
main.css
Web Browser
Learn
Mixins and the & Selector

What is a Mixin?

In addition to variables and nesting, Sass has multiple constructs that reduce repetition.

In Sass, a mixin lets you make groups of CSS declarations that you want to reuse throughout your site.

The notation for creating a mixin is as follows:

@mixin backface-visibility { backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; }

Note: Mixin names and all other Sass identifiers use hyphens and underscores interchangeably. The following code:

.notecard { .front, .back { width: 100%; height: 100%; position: absolute; @include backface_visibility; } }

is equivalent to the following CSS:

.notecard .front, .notecard .back { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; }
Report a Bug
If you see a bug or any other issue with this page, please report it here.