Tutorial by Examples

Variables are used to store a value once which will be used multiple times throughout a Sass document. They are mostly used for controlling things such as fonts and colors but can be used for any value of any property. Sass uses the $ symbol to make something a variable. $font-stack: Helvetica, s...

Just as in Sass, SCSS variables are used to store a value which will be used multiple times throughout a SCSS document. Variables are mostly used to store frequently-used property values (such as fonts and colors), but can be used for any value of any property. SCSS uses the $ symbol to declare a ...

Variables exist within a specific scope, much like in in JavaScript. If you declare a variable outside of a block, it can be used throughout the sheet. $blue: dodgerblue; .main { background: $blue; p { background: #ffffff; color: $blue; } } .header { ...

@at-root directive can be used to localize variables. $color: blue; @at-root { $color: red; .a { color: $color; } .b { color: $color; } } .c { color: $color; } is compiled to: .a { color: red; } .b { color: red; } .c { color: blue; }

Variables can be used in string interpolation. This allows you to dynamically generate selectors, properties and values. And the syntax for doing so a variable is #{$variable}. $className: widget; $content: 'a widget'; $prop: content; .#{$className}-class { #{content}: 'This is #{$content}'...

In SCSS variables begin with $ sign, and are set like CSS properties. $label-color: #eee; They are only available within nested selectors where they’re defined. #menu { $basic-color: #eee; color: $basic-color; } If they’re defined outside of any nested selectors, then they can be us...