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 check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
Learn to create profile card using HTML and CSSCSSHow to get category name using post id in WordPress?WordPressContent Blocks in SCSS (Sass)SCSSFor In Loop in Swift for BeginnersSwiftHow to get ACF values from custom post type?WordPresssubstring() Method in JavaScriptJavaScript