Sass – Happy styling - Part 2 - HashedIn Technologies

Sass – Happy styling - Part 2

Technology - 28 Jul 2016
Sampath K

This is the second part in our SASS series. See our earlier post for an introduction to SASS and installation instructions.

Comments in Sass:

For comments within the stylesheet, Sass supports single-line comments in addition to the standard, multi-line comments in CSS.

For example:

Importing other SASS files

CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request.

@import with .scss or .sass happens during compile rather than client-side. Sass will take the file that you want to import and combine it with the file you’re importing into, so you can serve a single CSS file to the web browser.



Adding an underscore creates a partial. Partials can be imported, but will not compile to .css. File extension is optional.

Nesting Rules

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.


Coressponding CSS

Nesting Properties

Certain properties with matching namespaces can be nested.


Corresponding CSS

Nesting Selectors

While nesting, the & symbol references the parent selector


Corresponding CSS

Free tag for commerce

E-book on Digital Business Transformation