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.

Example:

Partials

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.

In SCSS

Coressponding CSS

Nesting Properties

Certain properties with matching namespaces can be nested.

In SCSS

Corresponding CSS

Nesting Selectors

While nesting, the & symbol references the parent selector

In SCSS

Corresponding CSS

Share
Tweet
+1
Share

E-book on Digital Business Transformation