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
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.