Learn

Sass allows you to pass in multiple arguments in a list or a map format.

For example, take the multiple properties needed to create the college-ruled stripes in the back of our notecard.

@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) { background: repeating-linear-gradient( $direction, $stripe-background, $stripe-background ($width-percent - 1), $stripe-color 1%, $stripe-background $width-percent ); }

In this scenario, it makes sense to create a map with these properties in case we ever want to update or reference them.

$college-ruled-style: ( direction: to bottom, width-percent: 15%, stripe-color: blue, stripe-background: white );

When we include our mixin, we can then pass in these arguments in a map with the following ... notation:

.definition { width: 100%; height: 100%; @include stripes($college-ruled-style...); }

Note: Remember to always prioritize readability over writing less code. This approach is only useful if you find it adds clarity to your codebase.

Instructions

1.

At the top of main.scss, make a new list variable:

$stripe-properties: to bottom, 15%, blue, white;

Include the stripes mixin inside of the .definition selector:

.definition { @include stripes($stripe-properties...); }

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?