Compass and SASS

Recently, I learned how to use Compass and SASS. It is a great help for all the web developers out there. It gives them ease on doing or editing the CSS of their projects. It allows you to create mixins, makes it easy creating sprites, generates your CSS file fast, allows you to import css file to another css file so you’ll just have to link 1 CSS file to your project. For a beginner like me, yes it benefits me a lot.

Compass is an open source application that uses SASS(Syntactically Awesome Style Sheets). SASS is an extension of CSS3 that allows you to nest rules, add variables, create mixins and etc. It is also the one who generates your CSS.

Examples of SASS Commands:

Nested Rules

#content{
    background-color:black;

    .box{
        background-color:black;
    }   

}

When compiled to CSS, it will look like this:

#content{
background-color:black;
}
#content .box{
background-color:black;
}

Variables

$black = #00000;
$w = white; 

Now you can use these variables anywhere on your project just don’t forget to import it to the CSS file where you need to use it. You can simply type, @import ‘name of the scss file’;. You can use the variables like this:

background-color:$black;
color:$w;

Mixins

@mixin myFont{
font:{
    family:Arial;
    size:15px;
    weight:bold;
}
}

You can use it by using the @include method.

#pageHead{
width:500px;
text-align:center;
@include myFont;
}

That’s all for now. I’ll update this blog again as soon as I learned something new! Thanks for reading! :)