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.

Syntax


@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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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
What is a component helper function in React?ReactCreate a galley with overlapping images using CSS gridCSSHow to show slider value in HTML5 range input using JavaScript?HTMLHow to host Google fonts on your server and add them using CSS?CSSHow to get user’s Browser and Operating Systems information using PHP?PHPPHP Variables ScopePHP