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


amazon

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 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
2 Ways We Can Write Multiple Line Commands in PHPPHPCSS Attribute SelectorsCSSHow to create a simple digital clock using JavaScript?JavaScriptSQL Inner JoinSQL/MySQLHow to apply style only to first child and/or only to children other than the first child?CSSWhere is the PHP log file located on Mac OS?PHP