Learn

Mixins and the & Selector

Mixins: Arguments

Mixins also have the ability to take in a value.

An argument, or parameter, is a value passed to the mixin that will be used inside the mixin, such as $visibility in this example:

@mixin backface-visibility($visibility) {
  backface-visibility: $visibility;
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
}

In fact, you should only ever use a mixin if it takes an argument. We will learn more about this in a later exercise.

The syntax to pass in a value is as follows:

@include backface-visibility(hidden);

In the code above, hidden is passed in to the backface-visibility mixin, where it will be assigned as the value of its argument, $visibility.

Instructions

In main.scss, modify backface-visibility mixin to take in a parameter, like so:

@mixin backface-visibility($visibility) { //Add an argument
  backface-visibility: $visibility;
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
}

Pass in the value of hidden inside the .front, .back selector:

.front, .back {
    @include backface-visibility(hidden);
}

Click “Run” to see your changes in the browser and inspect them in main.css.

Sign up to start coding

Or sign up using:

Already have an account?