SASS is a CSS extension that will make frontend life easier. SASS extends CSS by providing some mechanism that is not available to traditional CSS. Some key features in SASS are nested rules, mixins, variables and imports. Coding stylesheets in SASS way really make life easier for developers.
A bit of history…
SASS (Syntactically Awesome StyleSheets) is influenced by another templating system, named Haml. Haml is mostly used for coding in Ruby (on Rails). Similar to Haml, SASS package is available to install from Ruby package manager,
gem install sass
Do browser understand SASS?
Sadly, the answer is no. That’s why we need to compile SASS to normal CSS. It can be done by using
sass command in command line.
As I mentioned earlier, SASS has some key features that make it really awesome.
The thing that make coding stylesheets fun again is nesting. Look what SCSS can do compared to normal CSS. It’s really make life much easier.
In SASS, variables can be made by using
$ symbol. It can be used throughout the codes and later be replaced with the real value when compiling. Variables is usually used by programmers to declaring colours, screen size, typography, etc. that are used in the site.
Another feature in SASS that is lacks in native CSS is inheritance and partials. In SASS, small module (mixins) can be made and used in some codes later. Mixins is called like a function that can have parameters, making the component customizable.
SASS mixins can be imported or even extended by other mixins or stylesheets, making the code more modular and easier to read.
Last but not least, SCSS vs SASS
SCSS syntax is newer than SASS and the difference between the two is syntax. SCSS (Sassy CSS) uses native CSS syntaxies, meaning all valid CSS are also valid SCSS, and has .scss file extension. Meanwhile SASS syntax uses indented syntax because it is influenced by Haml (templating engine) and has .sass file extension.
So, what will we use?
Our team decided to use SCSS as CSS template. Ruby on Rails has embedded functionality to compile SCSS to CSS and then minify them. For HTML elements naming convention, we will use BEM naming convention. BEM naming convention is interesting, there will be another blogpost discussing the topic.