Skip to Content
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.



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.

Folder Icon

Sign up to start coding

Already have an account?