- 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 - @each Multiple Assignment with Maps
Description
The multiple assignment works well with maps and they are considered as lists of pairs. If you want to use the map, then you have to change @each statement and use multiple assignments.
Syntax
@each $var1, $var2 in <map>
The syntax is briefly explained below −
$var1, $var2 − These represents the name of the variables.
<map> − It represents lists of pair.
Example
The following example demonstrates the the use of multiple assignment with maps −
<html> <head> <title>Control Directives & Expressions</title> <link rel = "stylesheet" type = "text/css" href = "style.css"/> </head> <body> <h1>Welcome to Tutorialspoint</p> <h2>Welcome to Tutorialspoint</p> <h3>Welcome to Tutorialspoint</p> </body> </html>
Next, create file style.scss.
style.scss
@each $header, $color in (h1: red, h2: green, h3: blue) { #{$header} { color: $color; } }
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\style.scss:style.css
Next, execute the above command; it will create the style.css file automatically with the following code −
style.css
h1 { color: red; } h2 { color: green; } h3 { color: blue; }
Output
Let us carry out the following steps to see how the above given code works −
Save the above given html code in @each_multiple_map.html file.
Open this HTML file in a browser, an output is displayed as shown below.