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 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
IN and BETWEEN Operators in SQLSQL/MySQLHow to get the first element with a class name xyz using JavaScript?JavaScriptHow to make a UILabel clickable in Swift 5?SwiftThe basics of CSS Box modelCSSHow to render Lists in React?React4 different Ways to Get JavaScript OutputJavaScript