YogeshChauhan . com

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

WordPress get_posts ExamplesWordPressWhat is the difference between let and var in Swift?SwiftWhat is the difference between Loosely Typed Language and Strongly Typed Language?MiscKeyValuePipe in Angular 9AngularLearn to create your skill bar using CSSCSSHow different is Handling Events in React vs HTML DOM?React