Skip to Content
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.



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?