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:
ruby -vIf 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/](http://www.rubyinstaller.org/ "Ruby installer for windows") ## 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.
sass filename.sass:filename.cssThis 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.cssWhen 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/](https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/ "FireSass"). Using it is available when you will compile file with this command:
sass --watch filename.sass:filename.css --debug-infoFor 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_blueWhen 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)