Skip to Content
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; }

Instructions

1.

At the top of main.scss, create the following mixin:

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

Next, include the mixin inside the joint .front, .back selector:

.front, .back { width: 100%; height: 100%; position: absolute; @include backface-visibility; }

Note: backface-visibility is a vendor specific property that is perfect for mimicking an index card with a front and a back.

Click “Run” to see your changes in the browser and inspect them in main.css. Hover over you card and see the effects of a hidden backface in motion.

Folder Icon

Sign up to start coding

Already have an account?