Front End Developer arsenal – SASS. Installation and short manual

Have you ever been dreaming about variables in CSS code? Or maybe other functionalities like functions? The simplest way to have a variables in CSS is to work with preprocessor like SASS.

Ruby 

Firstly you need to know if you have Rudy on your machine.  Type in your terminal:

ruby -v

If execution of this comman something simillar to :

ruby 2.0.0p247 (2013-06-27 revision 41674) [universal.x86_64-darwin13]

you can go to next step and start sass installation process. If not you have to install ruby interpreter. On Mac OSX its installed as default. On Windows you can use this link http://www.rubyinstaller.org/

SASS installation

If you have Ruby interpreter you can start SASS installation. Write it in your terminal:

sudo gem install sass

SASS short introduction

Compilation

Compilation of file is pretty simple.

sass filename.sass:filename.css

This option will create for you filename.css CSS file from filename.sass SASS file.

If you dont want to repeat this option and need to add watcher just write:

sass --watch filename.sass:filename.css

When SASS file will be changed CSS file will be auto generated.

Compilation options

For better debugging I recommend to use a FireSass in Firefox. Its available here https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/. Using it is available when you will compile file with this command:

sass --watch filename.sass:filename.css --debug-info

For production files I recommend to use compilation with minification mode.

sass filename.sass:filename.css --style compressed

Usage

Variables

Using variables is useful when you need to parametrise some elements. For example colours.

$c_bg_gray: #252525 //bg color
$c_contact_blue: #00d8ff //font color

.nav a
 color: $c_bg_gray
 background: $c_contact_blue

.footer a
 color: $c_bg_gray
 background: $c_contact_blue

When you use a variables you dont have to search the code for colour. You just need to change value of variable and go ahead.

Mixins

Sometimes you need to repeat some code with like function in programming language you can use mixin:

=borderRadius($time)
  -webkit-border-radius: $time
  -moz-border-radius: $time
  border-radius: $time

.roundBox
  +borderRadius($radius)

Leave a Reply

Your email address will not be published. Required fields are marked *