Sass which will make my life easy

Hi there, this will be my first blog update on GSoC project Askfedora redesign. For the project I may need to write all the styles from scratch for all the interfaces of AskFedora and I will be using sass, compass and susy in the redesigning process.

I am totally new to the languages Sass and Susy and to the framework Compass and hence I'm learning these from scratch. Here are some notes on using Sass I learnt which might be useful for anyone interested in styling. So here goes. :)

Before going into details you might need to have an idea about CSS prepocessing.

CSS Preprocessing

CSS as we all know is used for styling web pages. Many beautiful styles can be created with CSS yet when the style sheets are getting more larger they become more difficult to maintain. CSS preprocessing can help us here. 

CSS Preprocessors like Sass have many features which are similar to those offered in programming languages like Java or C. These features include variables, nesting, mixins (discussed later), inheritance etc. which we cannot see in CSS. These features make maintenance of our styles more easier which reduces most of the work for the programmers.

What is Sass?

Sass a CSS Preprocessor and is the mostly used most powerful professional css extension tool in the world.
When coding it will be filename.scss that we will be editing and sass converts to a css file.

Installation

Installing Sass only requires just require you to type in the following commands in the terminal. To install Sass you need to have ruby gems installed in your computer. The set of commands below take care of that also.

sudo apt-get install rubygems

sudo gem update

sudo gem install sass

And if Sass is properly installed we can view its version by typing in "sass -v". It should display something like the following.

Sass 3.4.13 (Selective Steve)

Coding with Sass

To experiment with Sass I created a simple style.scss file and in the terminal you need to type in

sass --watch style.scss:style.css

This is to instruct Sass to watch over the edits that are done to the style.scss file and every time a change is done to the style.scss file it needs to update a style.css file accrodingly.

Sample code with Sass

This is the sample code that I typed referring the Sass tutorial [1] at their site which includes many features of Sass which are

• Sass variables
• Nesting
• Partials and require statement
• Mixins
• Inheritance
• Operators

----------------- style.scss -----------------

@import 'reset'; //importing sass partials

/* Use of variables */
$font-stack: Helvetica, sans-serif;   
$primary-color: #333;

body{
    font: 100% $font-stack;
    color: $primary-color;
}

/* Nesting */
nav{   
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li{display: inline-block}

    a{
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

@mixin border-radius($radius) {  //mixins
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

/* Inheritance */
.message{   
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success{
    @extend .message;
    border-color: red;
}

.error{
    border-solor: red;
}

.warning{
    @extend .message;
    border-color: yellow;
}


/* Creating a simple grid with sass operators */
.container{
    width: 100%;
}

article[role="main"]{
    float: left;
    width: 600px / 960px * 100%;
}

article[role="complimentary"]{
    float: right;
    width: 300px / 960px * 100%;
}

----------------- _reset.scss -----------------

html,
body,
ul,
ol{
    margin: 0;
    padding: 0;
}

The corresponding converted css file:

----------------- style.css -----------------

html,
body,
ul,
ol {
  margin: 0;
  padding: 0; }

/* Use of variables */
body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

/* Nesting */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }

/* Inheritance */
.message, .success, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: red; }

.error {
  border-solor: red; }

.warning {
  border-color: yellow; }

/* Creating a simple grid with sass operators */
.container {
  width: 100%; }

article[role="main"] {
  float: left;
  width: 62.5%; }

article[role="complimentary"] {
  float: right;
  width: 31.25%; }

/*# sourceMappingURL=style.css.map */

I would give you a briefing about the above code.

Sass Variables

First under the variables section we can declare Sass variables with a '$' mark infront of the name of the variable. For example if we want to use the same color in number of different places we can assign it to a variable and use it so that we only need to change the value of the variable if we want to change the color.

The variables are replaced by their corresponding values in the translated css file.

Nesting

Nesting is done to avoid complications, by having a clearly visible hierarchy. Like for instance instead of using "nav li" we can make "li" nested inside "nav" to make it more clearly visible and manageable.

Partials and Import Statement

Sass partials are used to include small sass code snippets inside scss files which starts with an underscore. The file names starts with underscore so that Sass will identify them as partials and include them in the scss files which import them.

Partials such as "_reset.scss" which I have indicated above can be included in your main scss files by importing them using the commands like:

@import 'reset'

Note that the underscore in front the file name and .scss extension is missing in the import statement.

Mixins

If you want to have a group of css statement together in many places we can use Mixins provided by Sass. In the above example we have a Mixin named "border-radius" which will accept a variable named "radius" and the same set of css codes will be repeated each time we include:

@include border-radius(10px);

Inheritance

The concept of inheritance that we come across in object oriented programming languages is applied for css styles also. In the above example all the styles which are applied for the message class will be inherited to error, success and warning classes also.

Operators

Sass has the following operators which we can deal with.

+, -, *, / and %

As you can see only the result of these operations will be displayed in the converted .css file.

References

[1] - http://sass-lang.com/guide
        Sass language guide