- Sass Tutorial
- Sass - Home
- Sass - Overview
- Sass - Installation
- Sass - Syntax
- Using Sass
- Sass - CSS Extensions
- Sass - Comments
- Sass - Script
- Sass - @-Rules and Directives
- Control Directives & Expressions
- Sass - Mixin Directives
- Sass - Function Directives
- Sass - Output Style
- Extending Sass
- Sass Useful Resources
- Sass - Interview Questions
- Sass - Quick Guide
- Sass - Useful Resources
- Sass - Discussion
Sass - Mixin Arguments
Description
The SassScript values can be taken as arguments in mixins, which are passed when mixin is included and are available as variable within the mixin. The argument is a name of a variable, which is separated by comma while defining a mixin. There are two types of arguments such as −
- Keyword Arguments
- Variable Arguments
Keyword Arguments
Explicit keyword argument can be used to include in mixins. The arguments, which are named can be passed in any order and the default values of argument can be omitted.
For instance, create one SASS file with the following code −
@mixin bordered($color, $width: 2px) { color: #77C1EF; border: $width solid black; width: 450px; } .style { @include bordered($color:#77C1EF, $width: 2px); }
The above code will be compiled to the CSS file as shown below −
.style { color: #77C1EF; border: 2px solid black; width: 450px; }
Variable Arguments
Variable argument is used to pass any number of arguments to mixin. It contains keyword arguments passed to the function or mixin. Keyword arguments passed to the mixin can be accessed using keywords($args) function which return values mapped to String.
For instance, create one SASS file with the following code −
@mixin colors($background) { background-color: $background; } $values: magenta, red, orange; .container { @include colors($values...); }
The above code will be compiled to the CSS file as shown below −
.container { background-color: magenta; }
Example
The following example demonstrates the use of arguments in the SCSS file −
argument.htm
<html> <head> <title> Mixin example of sass</title> <link rel = "stylesheet" type = "text/css" href = "argument.css"/> </head> <body> <div class = "style"> <h1>Example using arguments</h1> <p>Different Colors</p> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> </div> </body> </html>
Next, create file argument.scss.
argument.scss
@mixin bordered($width: 2px) { background-color: #77C1EF; border: $width solid black; width: 450px; } .style { @include bordered(2px); }
You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −
sass --watch C:\ruby\lib\sass\argument.scss:argument.css
Next, execute the above command; it will create the argument.css file automatically with the following code −
style.css
.style { background-color: #77C1EF; border: 2px solid black; width: 450px; }
Output
Let us carry out the following steps to see how the above given code works −
Save the above given html code in argument.htm file.
Open this HTML file in a browser, an output is displayed as shown below.