Skip to Content
Mixins and the & Selector
Default Value Arguments

Mixin arguments can be assigned a default value in the mixin definition by using a special notation.

A default value is assigned to the argument if no value is passed in when the mixin is included. Defining a default value for each argument is optional.

The notation is as follows:

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

In the example above, if no value is passed in when backface-visibility is included, hidden would be assigned to all properties.



In main.scss add a default value of hidden to the argument in backface-visibility:

@mixin backface-visibility($visibility: hidden) { // Backface properties }

Inside of .front, .back remove the argument you previously passed to backface-visibility.

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

Folder Icon

Sign up to start coding

Already have an account?