Learn

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.

Instructions

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.

Sign up to start coding

Or sign up using:

Already have an account?