SASS with Visual Studio Part 2 Features and Syntax

Mira Javora
Page content

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

1    ul
2    {
3        margin: 0;
4        li 
5        {
6            float: left;
7        }
8    }

will be transferred into

1    ul { margin: 0; }
2    ul li {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.

Declaring SASS variables

1    $primary-color: #ccc;
2    $secondary-color: #ebebeb;
3    $grid-height: 20;
4     
5    a { color: $primary-color;}
6    a:hover { color: $secondary-color;}
7    div.test { height: $grid-height + 10 + px;}

results into

1    a {
2      color: #cccccc;
3    }
4    a:hover {
5      color: #ebebeb;
6    }
7    div.test {
8      height: 30px;
9    }

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

 1    @mixin background($url, $color:transparent, $repeat:no-repeat, $position:0 0) {
 2        background: $color url($url) $repeat $position;
 3    }
 4     
 5    div {
 6        @include background('/some/url');
 7    }
 8     
 9    div.second {
10        @include background('/some/url', '#ebebeb');
11    }

which will transform into

1    div {
2      background: transparent url("/some/url") no-repeat 0 0;
3    }
4    div.second {
5      background: "#ebebeb" url("/some/url") no-repeat 0 0;
6    }

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.

Check them out at http://compass-style.org/reference/compass/

Uber Cool Stuff – Maths, Operations, Loops and conditions

Bring it all together, and you can go wild … quite wild … something like this

1    $gutterWidth: 20;
2    $columns: 12
3    $widthForColumns: $totalWidth - ($columns * $gutterWidth);
4    $columnWidth: floor($widthForColumns/$columns);
5     
6    @for $i from 1 through $columns {
7      .container_12 .grid_#{$i} { width:(($columnWidth*$i) + (($gutterWidth*$i)-$gutterWidth))+px; }
8    }

SASS with Visual Studio Part 1 Introduction SASS with Visual Studio Part 2 Features and Syntax SASS with Visual Studio Part 3 Real World SASS/SCSS and Compass Part 4 Spriting