SASS with Visual Studio Part 2 Features and Syntax

SASS is a super-set of CSS, that means, any existing CSS that you already wrote will just work. What we usually do, is paste any legacy CSS (if any) to our SASS file and take it from there. I’ve posted few examples of the syntax below. In my next post, I will focus on the real-world usage of SASS.

The useful stuff – Nested Syntax

If you like tidy CSS syntax, you’ll love this. Not my most favourite, but still worth mentioning. So something like this

ul{margin:0;li{float:left;}}

will be transferred into

ul{margin:0;}ulli{float:left;}

Cool Stuff – Variables

SASS lets you create variables and re-use them throughout. These may be plain your colours that you re-use or size values. Using SASS syntax, you can perform various calculations on them if need be.

Really Cool Stuff- Mixins and Inheritance

One of the key features of sass is the ability to declare mixins. These are basically functions that you can declare to run common tasks. For example, we can declare a function that handles background images for us

The Really, Really Cool Stuff – Compass Libraries

Now since we use compass, we can also tap into some existing methods and libraries inside compass. The compass core includes reset, layout and typography helpers, CSS helpers and CSS3 libs and utilities.