CSS is dead, long live SASS

Any developer that has written some CSS probably knows the hard, sad, truth: CSS is ugly. not only that it is ugly, it is very hard to maintain and change. CSS was the big promise of the early 00 - no more tables and HTML attributes - just add some CSS to classes and ID and style your HTML neatly with clear separation between content and design.This never came to fruition and instead we  are left with long CSS files with thousand of lines - hard to maintain and very hard to change.


The solution finally came with several meta languages - the leading solutions are LESS and SASS. This article will discuss SASS -  the abbreviation of Syntactically Awesome Stylesheets.

How it works? We are writing SCSS files and compiling them, using Ruby, to valid CSS files. the CSS files go to our application as normal CSS files.

The SCSS files are  written in SASS syntax - enabling us to use program-language syntax on our CSS quite easily. The SCSS file syntax is quite simple and we can use variables. For example:

In the SCSS file:

$logo-background: #fefefe;

#header {
                background-color: $logo-background;
}

.logo {
                background-color: $logo-background;
}

 



It will compiled to

#header {
                background-color: #fefefe;
}

.logo {
                background-color: #fefefe;
}

 



We can write even functions, called mixin in SASS. Here is real-life example that I used for creating a font face:

The SCSS file:

@mixin hp-font($font-style, $font-weight, $font-source) {
                font-family: "HPSimplified";
                font-style: #{$font-style};
                font-weight: #{$font-weight};
                src: url("../font/#{$font-source}.eot"), url("../font/#{$font-source}.woff"), url("../font/#{$font-source}.ttf");
}

@font-face {
                @include hp-font('normal', '100', 'HPSimplifiedW01-light');
}
@font-face {
                @include hp-font('italic', '100', 'HPSimplifiedW01-lightItalic');
}
@font-face {
                @include hp-font('normal', 'normal', 'HPSimplifiedW01-Regular');
}
@font-face {
                @include hp-font('normal', 'bold', 'HPSimplifiedW01-bold');
}

 



After compilation, the CSS will be like this:

@font-face {
 font-family: "HPSimplified";
 font-style: normal;
 font-weight: 100;
 src: url("../font/HPSimplifiedW01-light.eot"), url("../font/HPSimplifiedW01-light.woff"), url("../font/HPSimplifiedW01-light.ttf"); }

@font-face {
 font-family: "HPSimplified";
 font-style: italic;
 font-weight: 100;
 src: url("../font/HPSimplifiedW01-lightItalic.eot"), url("../font/HPSimplifiedW01-lightItalic.woff"), url("../font/HPSimplifiedW01-lightItalic.ttf"); }

@font-face {
 font-family: "HPSimplified";
 font-style: normal;
 font-weight: normal;
 src: url("../font/HPSimplifiedW01-Regular.eot"), url("../font/HPSimplifiedW01-Regular.woff"), url("../font/HPSimplifiedW01-Regular.ttf"); }

@font-face {
 font-family: "HPSimplified";
 font-style: normal;
 font-weight: bold;
 src: url("../font/HPSimplifiedW01-bold.eot"), url("../font/HPSimplifiedW01-bold.woff"), url("../font/HPSimplifiedW01-bold.ttf"); }

 



You don’t need to be a system architect to understand the huge benefits of SASS that I have presented in these two examples. If a color logo needs to be changed, all we need to do is change a single variable instead of search-replace in all the CSS files. If we need to change the font or add to it - all we need to do is change only one mixin - and not dive into numerous CSS files.

The developing method and compilation is quite easy. The developer can “watch” his SCSS files - every time the SCSS files are changed - the compilation process begins and transforms the SCSS files to regular CSS files in less than a second.

The SASS can be compiled in Linux, Mac or Windows enviorments. For Windows and Mac there is an Open source free tool called Scout - built on Adobe Air.

Here is an example of the Scout program:

All the developer needs to do is to include the input folder (where the SCSS file are), the output folder (where the CSS files are supposed to be) and click on "Play". From that moment, every change in SCSS file will result in a change in the compiled CSS file.

In Linux, we need to activate SASS from the terminal.
Installing SASS is quite easy, first we install Ruby and then SASS:

sudo apt-get install ruby-full build-essential
sudo apt-get install rubygems
sudo gem install sass

After installing SASS, we activate watch mode with this line of code:
sass –watch /path/to/scss/:/path/to/css/

What about debugging? You can debug the SCSS files quite easily - both Scout and Linux shell can print the original SCSS lines on the compiled CSS files. For example, if I want to change some attribute - I activate my browser developing tools and find the line that is responsible for that attribute. For example:

When I open the CSS file, I can see a comment with the SCSS line number:

/* line 68, ../../../lib/hpstyle_0243.scss */

 



I can open the relevant SCSS file on the required line and change it according to my needs.

If the developer makes an error in the SCSS making, SASS makes sure that the developer knows where the error was  made by printing it on the screen (and on terminal). For example, Calling for non-existent variable:

.whatever {
                color: $not-exsiting-variable;
}

 


Will result in this error being printed on the HTML document:

Syntax error: Undefined variable: "$not-exsiting-variable".
       on line 53 of /var/www/test/tb/lib/hpstyle_0243.scss

48: }
49: 
50: //SCSS
51: 
52: .whatever {
53:          color: $not-exsiting-variable;
54: }
55: 
56: @font-face {
57:          @include hp-font('normal', '100', 'HPSimplifiedW01-light');
58: }

 



There is much more in SASS:

  • You can extend CSS classes
  • Nest the classes quite easily
  • Write elaborate functions
  •  Use control directives and operations on your variables and use specially defined Ruby functions to affect the CSS files. e

Everything is possble with SASS - the future of writing CSS files.

 

You can find more on SASS on the SASS site: http://sass-lang.com Scout tool (available for Mac and Windows for free) can be downloaded from here: http://mhs.github.com/scout-app/




This article has been written by Ran Bar-Zik

Tags: CSS| Ran Bar-Zik| SASS
Labels: SCSS| web
Leave a Comment

We encourage you to share your comments on this post. Comments are moderated and will be reviewed
and posted as promptly as possible during regular business hours

To ensure your comment is published, be sure to follow the Community Guidelines.

Be sure to enter a unique name. You can't reuse a name that's already in use.
Be sure to enter a unique email address. You can't reuse an email address that's already in use.
Type the characters you see in the picture above.Type the words you hear.
Search
Showing results for 
Search instead for 
Do you mean 
About the Author
Featured


Follow Us
The opinions expressed above are the personal opinions of the authors, not of HP. By using this site, you accept the Terms of Use and Rules of Participation.