dots Created with Sketch.
Yogesh Chauhan's Blog

Arbitrary Arguments in SCSS functions

in SCSS on June 15, 2021

In Sass or SCSS function, you can pass Optional Arguments or Keyword Arguments.

But what if there are tons of variables that needed to be passed? It makes the task time consuming and code look a bit ugly. SassScript has a solution for that scenario.

SassScript Rest Parameter?

This SassScript feature is similar to JavaScript Rest Parameter.

If the last argument ends with 3 dots (…) then the rest of the arguments will be passed as extra arguments as a list. It’s called an argument list. No brainer!

Using this feature you can take any number of arguments in the function without specifically adding keywords arguments in the function declaration.

What’s an argument list?

When you declare a function (or a mixin) that takes arbitrary arguments, you will get those arbitrary arguments as a list inside the function. That’s an argument list.

The argument list has one extra advantage over the normal lists. You can access the keyword arguments passed by the user as a map. To do that, you need to pass the argument list to the meta.keywords() function.

Arbitrary Arguments Example in SCSS

Taking Arbitrary Keyword Arguments

As we discussed earlier in this post, you can make the argument lists to take arbitrary keyword arguments.

To do so, you need to use meta.keywords() function. It takes an argument list and returns extra keywords (if any) that were passed to the function. It returns the keywords as a map from argument names.

Passing Arbitrary Arguments

We can use the same function syntax to pass arguments whether they are positional arguments or keyword arguments.

So, when you call a function, add 3 dots (…) after the list. Those will be considered extra positional arguments. If you add 3 dots (…) after a map, then those arbitrary arguments will be treated as extra keyword arguments. You can pass both types of arguments in a single function call too.

Let’s play with the example above and pass the arbitrary arguments.

Passing Arbitrary Arguments Example in SCSS

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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
$this Keyword in PHPPHPHow to Use SQL MAX() Function with Dates?SQL/MySQLHow destructuring works in React?ReactHow to create a Child Theme in WordPress?WordPressHow to zoom an element on hover using CSS?CSSHow to set the permissions on all files and folders in Mac?Miscellaneous