Working with
CSS preprocessor
(SASS)

Ashraful Karim Miraz

I will talk about

CSS weaknesses
Preprocessors features
Sass
Workflow

CSS Weaknesses

At the office...

Product Manager:

Can we try changing our theme quickly? I think blue buttons will be more engaging!

You:

Hm.. It's not that quick. Come back in 30 min?

Product Manager 30 min later:

Ah it's ugly! an we try lighter blue and compare it to this orange and green too?

3 Major CSS weaknesses

Lack of essential basic features
Hard to maintain (huge messy CSS files)
Not DRY enough - leads to mistakes

Working with multiple files

Having multiple CSS files is essential for maintainability and collaboration

But @import sucks (additional HTTP requests)

We need to use a build tool for concatenation.

... but maybe it can do more than just that?

This is what CSS preprocessor do :)

What is Css Preprocessor?

A scripting language that extends CSS and get compiled into regular CSS syntax.

3 most POPULAR Preprocessors

SASS (http://sass-lang.com)
LESS (http://lesscss.org)
Stylus (http://learnboost.github.com/stylus)

They are all great :)

Title

Cleaner code with reusable pieces
More flaxibility to do things on the fly
Shareable snippets and libraries
Easily produce CSS that works across browsers

Features

About those features

Less, Sass and Stylus support them all

They don't enhance CSS, but improve your

development workflow

Variables

They are actually constants (and it's fine)

    
    $my_blue: #4e6cb0; // Sass
    @my_blue: #4e6cb0; // Less
    my_blue = #4e6cb0; // Stylus
    
    $primary_color: $my_blue;
    h1 {
        color: $primary_color;
    }

Variables Types

Variable are not just for colors!

    
    $fonts: Helvatica, Arial, sans-serif;
    $images_path: "../img";
    $font_size: 1.5em;
    $margin: 20px;
    $width: 100%;

Operations and Color Funtions

Math and colors options

    
    width: 25px * 4 + 100px / 2 - 50px; // = 100px
    color: #990033 + #666666; // = #FF66CC

Color functions

    
    $light_blue: lighten($my_blue, 20%);
    $flashy_blue: saturate($my_blue, 50%);

Mixins

Functions like lighten() return a value.

Mixins don't return anything but output CSS.

    
    @mixin border-radius($radius: 10px) {
        -webkit-border-radius: $radius;
           -moz-border-radius: $radius;
                border-radius: $radius;
    }
    
    .button {
        @include border-radius(4px);
    }

Nesting

    
    .pop {
        .pop-btn{
    
        }
    }
    
    //======= OUTPUT =======//
    .pop {   }
    .pop .pop-btn {   }

    
    .link {
        &:hover{
    
        }
    }
    
    //======= OUTPUT =======//
    .link {   }
    .link:hover {   }

Don't nest too much ( 4 levels max )

Imports and minification

Imports now work with no performance costs!

    
    @import "colors"; 
    @import "typography"; 
    @import "layout"

CSS output can be clear or minified

    
#main{color:#fff;background-color:#000}#main p{width: 10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Syntactically Awesome StyleSheet

Sass Welcome Package

2 syntaxes: .sass and .scss (CSS like)
Twitter Bootstrap and ZURB Foundation
Even more crazy features (extend, if, for...)

Recomended blog:

Compass

Compass is a Sass framework, designed to make the work of styling the web smooth and efficient.

Compass is a collection of helpful tools and battle-tested best practices for Sass.

CSS3, Spriting, Grids, Typography, Data-URLs, Cross-browser, assets path, tons of helpers...

    @import "compass/css3/border-radius"; 
    .button { 
        @include border-radius(10px); 
    }

Workflow

INSTALLING and Running

Follow the instruction:

Go to http://www.sass-lang.com/install for Sass, and

http://compass-style.org/install/ for Compass

Just Sass:

> gem install sass
> sass --watch

Sass + Compass:

> gem install compass
> compass create 
> compass --watch

Gui Compilers

Syntax Highlighting

Editors and IDEs that support Sass:

VIM, Emacs, Sublime Text 2, TextMate, Eclipse, NetBeans, WebStorm, Visual Studio, PyCharm, RadRails, RubyMine, Komodo, Coda, GEdit, [...]

Plugin for Visual Studio

Web Workbench

Developer Efficiency Chart

Example...

Working with CSS preprocessor (SASS)