SASS vs LESS vs SCSS

Reading Time: < 1 minute

There is no clear winner between SASS and SCSS when it comes to CSS Pre-processors. When it comes to programmatically leverage CSS capabilities, both SASS and SCSS frameworks provide outstanding features. Unlike SASS, which is a form of CSS extension, SCSS is a simplified version of CSS, with all of its elements included.

 

What is SASS?

Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.

CSS variables are supported and can be utilized but not as well as pre-processor variables.

SASS consists of two syntaxes. The older one is called the indented syntax and is similar to Haml, which is a templating system aimed at generating clean HTML code by avoiding writing inline code in a web document.

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

 

 

What is SCSS(Syntactically Awesome Style Sheet) ?

• -SCSS contains all the features of CSS and contains more features that are not present in CSS which makes it a good choice for developers to use it.
• -SCSS is full of advanced features.
• -SCSS offers variables, you can shorten your code by using variables. It is a great advantage over conventional CSS.

In CSS

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

 

In SCSS

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}