Yogesh Chauhan's Blog

Arguments in @mixin rules in SCSS (Sass)

in SCSS on April 23, 2021

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


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Where is the PHP log file located on Mac OS?PHPIntroduction to Angular modules Part 1: NgModule metadataAngularLearn to create your skill bar using CSSCSSColumn and Table Alias in PostgresPostgresCheck If a String Contains a Specific Word in PHPPHPHow to Pop an Alert Box in PHP?JavaScript