Learn

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

1.

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

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?