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.


$myFont: 'Open sans', 'Segoe UI', 'Segoe WP', Helvetica, Arial, sans-serif; $myColor: red; body { font-family: $myFont; color: $myColor }


$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.


// 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 VariableCSS 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.


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.

Share this Page

Meet the Author