Skip to Content
Learn
Mixins and the & Selector
List Arguments

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.

Folder Icon

Sign up to start coding

Already have an account?