What is SCSS? Differences Between .sass and .scss

To get to know SCSS, you must first learn about Sass. Most developers will find it a bit confused when it comes to choosing syntax to write CSS. There are some options when it comes to flavour of CSS.

Some of them are:

  • SASS
  • SCSS
  • LESS
  • Regular ol’ CSS

What is SCSS?

Sass has two syntaxes, scss and sass. SCSS is Sassy CSS and it is an extension of the syntax of CSS. It is the most commonly used between the two. Files using this syntax have the .scss extension.

Differences between .sass and .scss

Sass is the 2nd and older syntax. It is known as the indented syntax.

SCSSSASS
File Extension.scss.sass
Indicate nesting of selectorsbracketsindentation
Separate propertiessemicolonsnew lines

SCSS

[css]
ul{
padding-left: 10px;
li{
color: blue;
}
}
[/css]

SASS

[css]
ul
padding-left: 10px
li
color: blue
[/css]

CSS

[css]
ul{
padding-left: 10px;
}
ul li{
color: blue;
}
[/css]

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close