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


Most Read

#1 How to add Read More Read Less Button using JavaScript? #2 How to check if radio button is checked or not using JavaScript? #3 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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
How to remove trailing characters from a string using JavaScript?JavaScriptWordPress: How to display fields from ACF Flexible Contents?WordPressAccessing and Setting features of JavaScript ObjectsJavaScriptStyling Lists with CSSCSSHow to use images instead of HTML radio buttons using CSS?CSSWhat are Controlled Components in React?React