Sass

Syntactically awesome (sexy) style-sheets i should say. Once you start using it, you will be in ❤ with it for sure. Warm welcome to the SassyVilla where you get a luxurious 14 chapter ride on the main sass features.

 Ever since we started the web development, the pattern of writing css styles is soo common that i dont even need to write a single line of it. You already know the classes and IDs and the style precedence. The fact that 3 of the major css frameworks - Bootstrap, Zurb foundation, Gumby all has its base set on sass itself is the proof that this is here to stay..and flourish...So if you still havent grabbed the ship to Sassvilla, get started..

"I dont know SASS... dats okay, when i started i dint knew a damn thing as well..If i can, you certainly can.."

As the name suggests, " PRE-PROCESSOR " is nothing but:

 You write a pre-processor language like SASS/LESS/Stylus etc. As far as the browser is concerned, it only understands plain old CSS. So there will be a middle-man compiler who takes in your pre-processor styles (.less, .sass, .scss etc ), complies it and spits out the .css files. 

Here, both  developers as well as the browsers are kept happy. We can write sass based modular-reuseable-sharable style-sheets and use it throughout the projects or can modularize and reuse an entire sections in other projects. The point to note is that the pre-processor stylesheets is purely for the development purpose. For the production purpose, you need to give the compiled css ( if possible, minified and compressed ) so that , as far as the expected output from the Front end User Interface team is concerned, for the backend team or development team, its still CSS. Since we are not directly dealing with css stylesheet and the responsibility of creating a css stylesheet is being passed on to the compiler, , never touch your css stylesheet once you adopt sass based development.
Agree that it might be a bit tough to come out of the css mindset, but believe me, its worth! And you will never go back to the css format once you get the hang of it.

Lets take a look at some of the concepts that we will take a look at. Dont be overwhelmed by the names or terminologies. Its not as tough as it initially looks.

Core SASS concepts:

1. Partials
2. Variables
3. Nesting,Nesting namespaced properties
4. Referencing parent selectors with & selector
5. Mixins, parameterized mixins, Mixins with default values.
6. Creating conditional styles that works based on ids/classes attached to the body ( helpful when doing responsive web development where in we modify the styles based on the device or the browser in which it is in, currently.
7. Commenting
8. Extend and (Mixins Vs extend)
9. Placeholder selectors
10. Responsive bookmarklets
11. Media query and retina devices
12. Source maps
13. Workspace
14. GUI tools and Command Line Installation steps

Once this is wrapped up, we can take a look at the Bourbon-Neat-Bitter-Refill based development in another series of posts. ( Forget this piece as of now..dont smoke your head...stick with the basics first, grab hold of it and then come back here )

Note that sass comes in two flavours:

1. The css kind of writing with curly braces (which ends in .scss ) , and 
2. The style where there is no braces, semi -colons to terminate and so the spaces and indentation becomes quite important. ( which ends in .sass )

To make it easy for you to understand , and me to explain, we will stick with the .scss syntax ( the one that looks like our own css styles ) in the examples.

So, 3, 2, 1.....start!