Front End Developer Arsenal: Master SASS Installation with This Quick Guide
0
0
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 -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/
SASS installation
If you have Ruby interpreter you can start SASS installation. Write it in your terminal:
sudo gem install sassSASS short introduction
Compilation
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/. 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 compressedUsage
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_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)
