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 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 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
Column and Table Alias in PostgresPostgresAngular: Templates, directives, data binding, Services and dependency injectionAngularAt-rules: @error and @warn in SCSSSCSSWhat is a “promise” in JavaScript?JavaScriptHow to add MySQL alternate port and sockets/pipes in WordPress?WordPressHow to modify navigation menus in WordPress?WordPress