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
Table of Contents
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.
| SCSS | SASS | |
|---|---|---|
| File Extension | .scss | .sass |
| Indicate nesting of selectors | brackets | indentation |
| Separate properties | semicolons | new 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]