SASS with Visual Studio Part 3 Real World

Mira Javora
Page content

Since I already covered the intro, install, features and syntax of SASS. It’s time to show some real-world application of SASS. If used properly, SASS can really save you time.

Sprites

One area that I find SASS particularly helpful is sprite creation. The idea optimising your site by pasting few images together and decreasing the number of requests is not new and is pretty cool. Usually, you would create the image and then manually write the CSS or upload the files on-by-one to online services that would create the spites for you. With SASS, you have can create a helper method … and that’s it!

 1@mixin sprite($image, $numberOfItems) {
 2    $itemHeight: image-height($image) / $numberOfItems;
 3    $height: 0;
 4 
 5    #nav li a {
 6        background-image: image-url($image);
 7    }
 8 
 9    @for $i from 1 through $numberOfItems {
10         
11        #nav li a.item#{$i} {
12            background-position:0px $height;
13        }
14        #nav li a:hover.item#{$i} {
15            background-position:100px $height;
16        }
17        $height: $itemHeight + $height;
18    }    
19}
20 
21 
22@include sprite("image.jpeg", 2);

This mixin will let you easily create any sprites and result in CSS below. Note the usage of image-url and image-height methods. They are in-build compass features, that will automatically get properties form the set image.

 1#nav li a {
 2  background-image: url('/images/image.jpeg?1308598897');
 3}
 4#nav li a.item1 {
 5  background-position: 0px 0;
 6}
 7#nav li a:hover.item1 {
 8  background-position: 100px 0;
 9}
10#nav li a.item2 {
11  background-position: 0px 968px;
12}
13#nav li a:hover.item2 {
14  background-position: 100px 968px;
15}

If you want to go even further, compass will create sprites for you automatically. Check out sprite utils.

Mixing CSS

Another cool way to use SASS is the ability to combine multiple scss files together. In this way, you can mix and match between your stylesheets, move your mixins and variables into separate reusable files and then decide what you need. SASS will pull it all together into single file.

1@import "_base";
2@import "_reset";
3@import "_mixins";
4@import "_iefixes";
5 
6/* scss here */

Imports all the scss files into a single file – great for re-using parts.

Grid Systems

We push 3-4 apps live every month, most of them based on the grid system. However, some of them would have 2-3 different layouts – a site based on 960px, Facebook tab on 520px and canvas on 760px. Each of them also have different gutters, different column numbers, sometimes some other funk in them. In short, we deal with loads of grid variations. There are sites that create these for you, but it’s faster if you have something that does it all for you that you can alter in place.

Just configure the

1$totalWidth: 520;
2$gutterWidth: 20;
3$columns: 12;

and you SASS will re-create the grid for you.

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