Syntactically Awesome Stylesheet: Make Css fun again.

As I traverse the software engineering path, There is ONE thing I am certain of.

 

I HATE CSS. To keep it short, it is not my forte. It is one of my weaknesses.

 

Life is a journey of twist and turns that molds who we are. It all started with SASS.


So what’s so special about this “SASS” ?

 

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Sass makes writing maintainable CSS easier. You can get more done, in less code, more readability, in less time.

More done, less code, more readability, in less time? That sounds productivity.

 

Variables

CSS variables? No problem. Variables in Sass are scoped using the $ symbol. Just like in PHP.

variables

 

Usage:

variables

 

Mathematical Expressions

Unlike CSS, Sass allows us to use mathematical expressions.

Supported expressions include:

+ Addition
Subtraction
/ Division
* Multiplication
% Modulo
== Equality
!= Inequality

 

Usage:

expressions

 

Functions:

Sass has extensive array of functions  Click here.

 

Usage:

darken function

functions

 

Function Directives:

Function directives in Sass are similar to mixins, but instead of returning markup, they return values via the @return directive.

 

Usage:

directive

 

Imports:

 

imports allow you to break your styles into separate files and import them into one another.

Usage:

imports

 

**Note: import doesn’t require extension. example above targets grids.scss file

 

Nesting:

One of the most helpful, and also misused features of Sass, is the ability to nest declarations.

 

 

Usage:

nesting

 

**Note: The Inception Rule: don’t go more than four levels deep.

 

SASS Installation:

 

Windows Installation can be found here.

For linux:

 

1. Install Ruby first.

sudo apt-get install ruby-full

2. Install sass

sudo su -c "gem install sass"

3. Check Sass version if properly installed

sass -v

install

 

 

Happy Coding!