SASS - Syntactically Awesome Stylesheets

Sass is an extension of CSS3. It is translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Most commonly used syntax of sass is "scss". SCSS files use the extension ".scss". The other syntax is "sass". We will talk about scss here.

Advantages of scss over css

• Variables: You can define variables like: $blue: #3bbfce; $margin: 16px; You can use it where you want to use the same value in class of css. There are also many functions available to define variable values. All available functions are listed over here: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

• Nesting: This one is very interesting. It is used to avoid repetition. We can use it like this:

  ul {
  float:left;
  margin-left:10px;

  li {
    float:left;
    padding-left:5px;

    img {
      border: none;
    }
  }
}

• Mixins: Mixin is Reusable code. They are very useful when we want to use a set of code repeatedly.

  @mixin left($dist) {
    float: left;
    margin-left: $dist;
    padding-left: $dist;
  }

  ul{
    @include left(10px);

    li{
      float:left;
      padding-left:5px;

      img {
        border:none;
      }
    }
  }

• Selector inheritance: There are some parameters common for a few classes. We usually write them like this:

   .first{color:black; font-weight:bold;}
  

In scss we can write this as,

 li.first{@extend .first; padding-left:0px; }
 ```

#### Where do you need to write it?

Create a directory **"sass"** in your theme directory. Put all your scss files in it. You don’t need to write a css file. You can write a scss file and generate a css file from it.

#### How to generate css from scss?

- Download ruby installer from this page: [http://rubyinstaller.org/downloads/](http://rubyinstaller.org/downloads/)
- After installing the installer package, open your command prompt.
- Write the command **"gem install compass"**
- After completing installation, use command **"compass version"** to check if properly installed
- Now go to your project theme directory and execute command **"compass init"**. This will generate config.rb file in your theme directory, which will have all the basic information that you will need to generate css from scss
   - http_path = "/"

   - css_dir = "css"

   - sass_dir = "sass"

   - images_dir = "images"

   -  javascripts_dir = "js"

- Now execute “compass watch”. This will convert all your scss file to css files.Also if there is any error it will show you.
- Once completed, press “ctrl + c” to finish.


<Author name="Neerav Mehta" isShort={false} />