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.
Firstly you need to know if you have Rudy on your machine. Type in your terminal:
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/
2. SASS installation
If you have Ruby interpreter you can start SASS installation. Write it in your terminal:
sudo gem install sass
3. SASS short introduction
Compilation of file is pretty simple.
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.
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
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.
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)