Sass vs SCSS

Sass provides two distinct syntax:

Sass
SCSS

Both are similar and do same thing, but written in different style. SCSS is latest one and considered better than Sass.

Difference between SASS and SCSS

Sass: Sass is derived from another preprocessor known as Haml. It was designed and written by Ruby developers so, Sass stylesheets use Ruby like syntax with no braces, no semi-colons and a strict indentation. In Sass, the variable sign is ! instead of $ and assignment sign is = instead of :.

See this example:

 
// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
    -webkit-border-radius= !radius
    -moz-border-radius= !radius
    border-radius= !radius

.my-element
    color= !primary-color
    width= 100%
    overflow= hidden

.my-other-element
    +border-radius(5px)

SCSS: SCSS provides the CSS friendly syntax to closing the gap between Sass and CSS. SCSS is called Sassy CSS.

See this example:

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.my-element {
    color: $primary-color;
    width: 100%;
    overflow: hidden;
}

.my-other-element {
    @include border-radius(5px);
}

Here, you can see that SCSS is definitely closer to CSS than Sass.

Advantage of Sass syntax:

he syntax of Sass is totally different from CSS but it is shorter and easier to type. You don't need to type semicolon or braces, even no need to use @mixin or @include, when a single character is enough: = and +.

It also provides clean coding standards because it follows indented syntax.

Advantage of SCSS syntax:

It is fully CSS compatible. You can rename a CSS file as .scss extension and it will also work. Due to the reason that it follows the syntax of CSS, makes it very easy to learn and work.

Next TopicSass Commands

← prev next →