dots Created with Sketch.
Yogesh Chauhan's Blog

How to pass arguments in SCSS function?

in SCSS on June 14, 2021

Functions become very powerful and more reusable with arguments. You can customize the behaviour inside based on the passed arguments which makes it convenient as well.


@function name(args) { 

The function must be called with same number of arguments unless the arguments are optional.

What are Optional Arguments?

Just like JavaScript Optional Arguments or any other programming language, Optional Arguments are optional to pass.

Without Optional Arguments, each and every arguments in the function declaration are required to be passed. With Optional Arguments, no need to pass if you don’t have any value. Later when you have a vale, you can pass it.

You can make any argument optional by defining a default value for it.

Here’s an example from Sass official docs:

What are Keyword Arguments?

Keyword Arguments are nothing but arguments passed with keywords.

It makes easier to understand when you make a function call and less chances of making a mistake in case you are not aware of the keyword expected type.

Here’s another example from Sass official docs with some modification:

You have to be really careful about changing names for arguments since users might pass arguments using an old name and it’ll eventually break your code!

Renaming tip

Keep the old name as an optional argument and show a warning to users who passes argument using that keyword. Once users know that, they will migrate it and at the end you can remove the old name completely.


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
JavaScript Number MethodsJavaScriptThe difference between isFinite() method and isFinite() function in JavaScriptJavaScriptThe difference between 400(4xx) and 500(5xx) errorsMiscellaneousAll possible ways you can Insert Data in PostgresPostgresSorting Arrays in JavaScriptJavaScriptHow to send and receive query strings via links in Angular 9?Angular