Front End Developer Arsenal: Master SASS Installation with This Quick Guide
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 https://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 browser DevTools with source maps. Note: FireSass/Firebug are deprecated. Modern browsers have built-in support for SASS source maps. Using source maps 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)
