Sass Variable
You are Here:
Sass Variable
Using Sass variable you assign a value to a name that begins with $, and then you can refer to that name instead of repeating the value over and over again.
Example
SASS TO CSS CONVERTER
$myFont: 'Open sans', 'Segoe UI', 'Segoe WP', Helvetica, Arial, sans-serif;
$myColor: red;
body {
font-family: $myFont;
color: $myColor
}
Syntax
$myVariable: value
Sass Local and Global Variables
Global variables can be accessed anywhere, whereas Local variables can only be accessed within the block they were declared.
Example
SASS TO CSS CONVERTER
// Global variable
$myFont: 'Open sans', 'Segoe UI', 'Segoe WP', Helvetica, Arial, sans-serif;
body {
$myColor: red; // local variable
font-family: $myFont;
color: $myColor
}
p {
font-family: $myFont;
}
Sass Variable vs CSS Variable
CSS has variables of its own, which are totally different than Sass variables.
| Sass Variable | CSS Variable |
|---|---|
| Sass variables are all compiled away by Sass. | CSS variables are included in the CSS output. |
| Sass variables only have one value at a time. | CSS variables can have different values for different elements. |
| Sass variables are imperative, which means if you use a variable and then change its value, the earlier use will stay the same. | CSS variables are declarative, which means if you change the value, it’ll affect both earlier uses and later uses. |
Reminder
Hi Developers, we almost covered 99.1% of Sass Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in Sass.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
