Tutorial by Examples

Although people often say Sass as the name of this CSS-preprocessor, they often mean the SCSS-syntax. Sass uses the .sass file extension, while SCSS-Sass uses the .scss extension. They are both referred to as "Sass". Speaking generally, the SCSS-syntax is more commonly used. SCSS looks li...

Sass tends to be the more "lazy" syntax. Nothing illustrates this nicer than how you define and include mixins. Defining a mixin = is how you define a mixin in Sass, @mixin in SCSS. // SCSS @mixin size($x: 10rem, $y: 20rem) { width: $x; height: $y; } // Sass =size($x: 10...

When it comes to maps, usually SCSS is the easier syntax. Because Sass is indent-based, your maps have to be saved in one line. // in Sass maps are "unreadable" $white: ( white-50: rgba(255, 255, 255, .1), white-100: rgba(255, 255, 255, .2), white-200: rgba(255, 255, 255, .3), white-30...

Comments in Sass vs. Scss are largely similar, except when multi-lines are concerned. SASS multi-lines are indentation-sensitive, while SCSS relies on comment terminators. Single-Line Comment style.scss // Just this line will be commented! h1 { color: red; } style.sass // Exactly the same ...

SCSS syntax resembles more like a CSS syntax but SASS syntax is little bit different from SCSS but both produces exactly the same CSS code. In SASS we are not ending the style properties with semicolon(;) but in SCSS we are ending the style properties with (;). In SCSS we used paranthesis {} to ...

With the release of sass 3.3 and plus version the @if and else conditions syntax got same. we can now use expressions with not only scss but also sass. sass syntax @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } Compiled to .item-1 { width: 2em; } .item-2 { width: 4em...