Sass stands for Syntactically Awesome Stylesheets
Sass is a CSS preprocessor which makes your work simple by facilitating you with variables, mixins, inheritance and ton of cool features that help you to write codes in a much less time. It can be pretty helpful for creating nice & neat code.
Using Sass
Sass consists of two syntax:
- Sass
- SCSS
Sass is the original syntax, called “The indented Syntax”. This syntax doesn’t require curly braces and semicolon that are a require in CSS. Using newlines and indentation(two white spaces), Sass is able to read and compile as if they were there:
SCSS – “Sassy CSS” is newer syntax that uses block formatting same as CSS. SCSS is uses the curly brackets to identify code blocks and semicolon to separate lines in blocks:
How it Works?
Sass is command line CSS compiler that reads and compiles the codes to clean and structured CSS that you have write in .sass or .scss. For example,
Some Features of Sass
The advantages of using Sass are the drivers behind the usage which is:
- Implementing the DRY(Don’t Repeat Yourself).
- Adding dynamic programming functionality instead of a very static language: CSS
- Code Reusability(Inheritance)
Let’s get familiar with Compass
Compass is an extension of Sass. It has its own compiler so, you use compass watch command instead of sass –watch.
It is a CSS framework that contains large collection of mixins and functions that you will find incredibly useful. This will generate a set of codes in your CSS file with the values you pass as parameters. For example,
Variables
Sass provides way to be able to use variables within CSS before it is compiled, allowing for re-usable data. The Sass variables begin with dollar sign($).
Nesting
This is one of the more useful features of Sass along with the variables. It allows you to target particularly nested HTML components such as navigation:
@import
CSS has @import functionality but each time you use @import in CSS it creates another HTTP requests. In Sass, it avoids to creating additional HTTP requests because files are imported and concatenated on compile rather than browser run-time.
Mixin
Mixin is a very brilliant feature of Sass and i personally love it. The excellent example of this feature is, when you need to use CSS property that has a vendor prefixes. For example, border-radius, box-shadow and many other.
Operators
Like many other programming languages, Sass has operator to perform basic math operation in your CSS.
Extend(Inheritance)
Most of all programming language has this feature called “inheritance”. Using @extend, you can share CSS properties from one selector to another so it helps keep your Sass very DRY
Sass is very easy to use and understand. I swear that, once you understand the Sass’ methods and syntax, you’ll never want to go back to writing static CSS again.
More Resources
- Guide on Sass: sass-lang.com
- Article on Sass: Wikipedia
- Beginner Guides and Tutorials on Sass and Compass: thesassway.com
