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
