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(
    $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.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.