Difference between .sass and .scss
When I first started down the path of CSS preprocessors I was overwhelmed by the different options (sass, less, stylus), the differences in the syntax, and most of all I had no idea how I was supposed to get started with this new approach to writing CSS.
If you are a frequent user of CodePen.io you will notice that there are a few options when it comes to the flavour of CSS that you can choose.
- SASS with Compass
- SCSS with Compass
- LESS
- Regular ol’ CSS
Don’t be confused by the SASS and SCSS options, although I was initially, .scss is Sassy CSS and is the next generation of .sass. An explanation from the website
If that didn’t make sense you can see the difference in code below.
/* SCSS */
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}
In the code above we use ;
to separate the declarations. I’ve even added all the declarations for .border
onto a single line to illustrate this point further.
In contrast, the SASS code below must be on different lines with indentation and there is no use of the ;
.
/* SASS */
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
You can see from the CSS below that the SCSS style is a lot more similar to regular CSS than the older SASS approach.
/* CSS */
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
I think most of the time these days if someone mentions that they are working with Sass they are referring to authoring in .scss rather than the traditional .sass way.
You might also want to check out some helpful @mixins that will help you with your responsive build.