As a UI Developer you must fetched few real-time problems while working in CSS. For an example how it is if we will declare a color variable and refer that in all classes with same color code. Such kind of problems we can fix using SASS. SASS gives power to CSS. SASS is a feature rich powerful CSS extension language. SASS is compatible with all versions of CSS. We can structure our CSS using SASS.
The complete name of SASS is “Syntactically Awesome Stylesheets”. It was developed by Natalie Weizenbaum in 2006. Using SASS including default behaviors of CSS additionally we can do selector inheritance, nested rules, variables, inline imports & mixins. SASS is available in 2 versions. The first version is SCSS (Sassy CSS). The extension of SCSS file is .scss.
SASS Getting Started
Nesting: In Sass we can able to nest selectors in the same hierarchy as of HTML.
Variables: Using Sass it can possible to store any CSS values to variables. Variable name begins with a dollar($) sign and assignment uses a colon (:). We can do arithmetic operations to variables also.
Mixins: In SCSS using Mixins technique we can define styles & the same styles can re-used throughout the stylesheet. To make more programmer friendly we can also pass arguments to Mixins.
Inheritance: Using @extend selector in Sass we can inherit the styles from an another selector.
Partials: To made modularization easy Sass introduced partial Sass files technique. A partial Sass file is named with a leading underscore, like _tempvariables.scss. This file is not converted to a CSS file. But we can import partial Sass files with the @import directive.
How to install SASS on Windows?
To install SASS in Windows first you required to download Ruby. You can download ruby from http://rubyinstaller.org. Once you installed with ruby start the command prompt. From Command line to install Sass gem run the following Command:
gem install sass
SASS required one line Command to Setup. During installation if you found downloading issue, you can download the setup file manually from https://rubygems.org/gems/sass.
To double check whether SASS installed successfully or not you can issue the following command.
sass -v
This will give you the version number of current installation like “Sass 3.4.22 (Selective Steve)”.
SASS to CSS. Using the following command you can convert a SASS file to CSS.
sass input.scss output.css
SASS compiler can watch the changes in the SASS file and update the CSS using the following Command:
sass –watch input.scss:output.css
