Using CSS Preprocessors

I have been writing a lot of CSS these days, when it comes to a project with 20+ responsive components it is obvious to write tons of CSS code. I started to use CSS preprocessors for a while now and it reduced my css code and the time I spend with css a lot than before. So I thought to share few basic tips in getting started with SASS preprocessor.

Here you will write your css in .scss(stands for sassy CSS) files and then use sass (Syntactically Awesome Stylesheets) to generate your css file (say main.css?)

sass

First you need to install sass on your machine. You can find the installation steps here.  I use a mac machine and since Ruby is already installed, I simply run the following command to install it

$sudo gem install sass

Now create a component.scss file in your ‘ProjectFolder/styles/’.

Note: Make sure you save the file as ‘.scss’ instead of ‘.scss.txt’ file.

You can convert this preprocessed file to the final ‘css’ file to use in a website using sass command.

$sass component.scss main.css
  • Lets write our component.scss file now
//component.scss
.main{
  h1{
    color: red;
  }
  h2{
    color: yellow;
    &.heading2{
      background-color: black;
    } 
  }
}

when you run ‘sass component.scss main.css’ your file is processed and the generated ‘main.css’ looks like

//main.css
.main h1{
  color: red;
}
.main h2{
  color: yellow;
}
.main h2.heading2{
  background-color: black;
}
  • You can also use variables if you want a value to be used across the page.
//component.scss
$primary-color: #ff0000;
$secondary-color: #00ff00;
$default-color: #0000ff;

button{
  &.primary{
    background-color: $primary-color;
  }
  &.secondary{
    background-color: $secondary-color;
  }
  &.default{
    background-color: $default-color;
  }
}

when you sass the above code, you will get

//main.css
button.primary{
  background-color: #ff0000;
}
button.secondary{
  background-color: #00ff00;
}
button.default{
  background-color: #0000ff;
}
  • You can also include one scss file into another scss.
//variable.scss

$primary-color: #ff0000;
$secondary-color: #00ff00;
$default-color: #0000ff;
//component.scss

@import 'variable';

button{
  &.primary{
    background-color: $primary-color;
  }
  &.secondary{
    background-color: $secondary-color;
  }
  &.default{
    background-color: $default-color;
  }
}

when you sass it, you will get

//main.css
button.primary{
  background-color: #ff0000;
}
button.secondary{
  background-color: #00ff00;
}
button.default{
  background-color: #0000ff;
}
  • When you are developing a web application to use across different platforms then you will have to use prefixes such as ‘-webkit’ , ‘-moz’ , ‘-ms’. You can simply use mixins to make it easy.
//component.scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

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

When you sass it, the below css code is generated

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

If you are writing multiple components with multiple ‘.scss’ files then you can create a master ‘.scss’ file( say main.scss) and import all other ‘.scss’ file into it and sass it to generate your final ‘main.css’ file which you could include in your html page.

I gave only few examples about how you can use CSS preprocessors such as SASS to make it simple working on CSS. You can read more about SASS here.

Thank you for reading.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s