Skip to Content
Codecademy Logo
Learn Sass
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?