SCSS Quick Start — Make CSS Fun
From getting to know Sass, to writing intermediate level of SCSS.
Background
After extensively writing CSS in projects, one starts to observe a pattern where lots of CSS code is repetitive, redundant, lacks modularity and as the lines of code(LOC) increase, chances of errors also increase. This situation gives rise to a lot of challenges from Software Engineering point-of-view, with the principles of maintainability, scalability, reusability, extensibility.
To reinvigorate the fun of writing CSS and to give it ‘super powers’, Hampton Catlin designed a style sheet language known as Sass(Syntactically Awesome Style Sheets) in 2006, written in Ruby for Haml templating language. He stayed in the core team till 2009 and later Natalie Weizenbaum became the primary developer and designer of Sass, who was involved in this project “since the second commit”. She was also joined by Chris Eppstein in 2008 and they both together are responsible for leading design and development of Sass.
From the Sass’s repository:
Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a plugin for your build system.
Over the years, there is no doubt that Sass has definitely become an industry-standard and is the go-to language to write CSS for professionals.
Usage
Sass has two syntaxes — Sass also called the indented syntax and SCSS which uses the file extension .scss and can be considered as the superset of CSS. This post will be using the SCSS syntax.
In order to get up and running with Sass you just need NPM(or download the package from Github and just add to your PATH environment variable) and execute the following command:
npm install sass -gNow, you can make use of the sass CLI for majorly one task central to the implementation of Sass i.e. compile SCSS/Sass files to CSS files. For example:
sass awesomeSassyCss.scss goodOldCss.css --watch --poll -s=expanded --embed-source-mapNote the usage of different flags, which make the CLI very powerful.
Read the rest of the blog post at my webspace:
