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.


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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How does AdSense calculate page loading time?JavaScriptCheck If a String Contains a Specific Word in PHPPHPWordPress: How to find all posts from a custom post type with multiple custom fields values?WordPressThe actual difference between indexOf() and search() in JavaScriptJavaScriptHow to remove WordPress TinyMCE Editor buttons?WordPressWhat is a “promise” in JavaScript?JavaScript