Arguments in @mixin rules in SCSS (Sass)

As we saw the @mixin animation example, we can pass arguments in @mixin rules and add some dynamic styles.

@mixin rules are reusable and arguments makes it even more powerful since each time we @include them, we can pass a new different argument and create a new customized style.

Same like a PHP or JavaScript functions, the argument can be passed in the parentheses() after the @mixin name. You can also pass multiple parameters. You need to make sure that when you pass the exact number of parameters when you include the @mixin.

For example, here’s the SCSS code to pass the argument and then include the rules:

Optional Arguments

What if you’re not sure about the number of arguments in your @mixin call. No problem. Just add optional arguments so that even if the argument value is not passed, it can use it’s default value.

It works in similar way as JavaScript optional arguments.

The way same you declare a variable, you can declare a default values.

Just like this SCSS example:

Keyword Arguments

Keyword Arguments are the arguments passed using the name not just position in the argument list. You need this when you have multiple optional argument so that you know what you’re passing and for which variable.

Just like this:

The only disadvantage of passing the arguments using keywords is when you change the keyword name, you need to make sure you make change in the passing parameter too or else it will break your code!

Taking Arbitrary Arguments

Just like Rest Parameters in JavaScript, we can pass number of additional arguments that are not specified specifically while declaring the @mixin rules.

In a similar way to Rest Parameters in JavaScript, the arbitrary arguments in @mixin ends in 3 dots (…) as well.

In SCSS (Sass), they call arguments list.

Example

Taking Arbitrary Keyword Arguments

The same way we passed keyword arguments, we can use Argument lists to pass arbitrary keyword arguments.

In the example below, the meta.keywords() function processes the argument list and returns extra keywords passed to the @mixin function. It returns the keywords as a map from the names to the values.

@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

Compiled code in CSS :

pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}

Passing Arbitrary Arguments

The way we take arbitrary keyword arguments in @mixin using argument list, we can also pass argument to @mixin.

To pass positional arguments, we need to pass a list followed by 3 dots (…) in @include.

A map followed by 3 dots (…) will be treated as additional keyword arguments.

We can pass both at the same time! Like this:

$form-selectors: "input.name", "input.address", "input.zip" !default;

@include order(150px, $form-selectors...);

Source: Sass Docs

Share this post