With SASS you can do:
SASS is a preprocessor that translates SCSS file into CSS file. In the SCSS file you can:
- nested configuration of your code
- define functions
It helps you to be DRY (Don't Repeat Yourself). ;)
How to get SASS:
Install ruby:
sudo apt-get install ruby
Check if installation was successful:
ruby -v
On mine it says (maybe you'll get a more up-to-date version):
ruby 1.9.3p484 (2013-11-22 revision 43786) [i686-linux]
Install SASS:
sudo su -c "gem install sass"
or
gem install sass
Check if installation was successful:
sass -v
On mine it says (maybe you'll get a more up-to-date version):
Sass 3.4.10 (Selective Steve)
Install HAML:
sudo gem install haml
Check if installation is successful:
haml -v
On mine it says (maybe you'll get a more up-to-date version):
Haml 4.0.6
Start using SASS:
Open your terminal and go to your project folder:
sass --watch test.scss:test.css
Now everytime you change the scss file it updates to correctly css file. You can use different styles of how the css file will be presented: nested (the default setting), compressed, expanded. In this example I want my css file to be production ready and therefore will choose the "compressed" style version:
sass --style compressed test.scss:test.css
Examples:
With SASS you can define variables in your stylesheet that you can't do it in your CSS file (yet). For example you don't want to remember the color #FA024C7, then you can define a variable for that. In your SCSS file type in these:
$main-color: #FA024C7;
body{
background-color: $main-color;
}
div{
color: $main-color;
}
So, when ever you want to change the main-color you simply change in at one position instead of multiple positions.
With SASS you can also use Function. Let's say you want to have a rounded corner for a lot of elements in your page. Usually you'd have to write vendor-prefixes everytime you depending on the browsers you want to support the code can be very long. In SASSS you can define functions - so called mixins - to do this tedious and repetitive job for you:
@mixin rounded($radius: 5px){/*(optional) add a default value of 5px*/
-webkit-border-radius: $radius; /*chrome, safari*/
-moz-border-radius: $radius; /*firefox*/
-ms-border-radius: $radius; /*IE*/
-o-border-radius: $radius; /*opera*/
border-radius: $radius; /*official form always at the bottom*/
}
#box{
@include rounded;/*without argument*/
@include rounded(10px);/*with argument*/
}
#box2{
@include rounded;
}
The code will be translated into CSS file and looks like this:
#box {
/*(optional) add a default value of 5px*/
-webkit-border-radius: 5px;
/*chrome, safari*/
-moz-border-radius: 5px;
/*firefox*/
-ms-border-radius: 5px;
/*IE*/
-o-border-radius: 5px;
/*opera*/
border-radius: 5px;
/*official form always at the bottom*/
/*without argument*/
/*(optional) add a default value of 5px*/
-webkit-border-radius: 10px;
/*chrome, safari*/
-moz-border-radius: 10px;
/*firefox*/
-ms-border-radius: 10px;
/*IE*/
-o-border-radius: 10px;
/*opera*/
border-radius: 10px;
/*official form always at the bottom*/
/*with argument*/ }
#box2 {
/*(optional) add a default value of 5px*/
-webkit-border-radius: 5px;
/*chrome, safari*/
-moz-border-radius: 5px;
/*firefox*/
-ms-border-radius: 5px;
/*IE*/
-o-border-radius: 5px;
/*opera*/
border-radius: 5px;
/*official form always at the bottom*/ }
/*# sourceMappingURL=testSCSS.css.map */
A lot of repetition. We can do better. See selector inheritance:
selector inheritance:
@mixin rounded($radius: 5px){/*(optional) add a default value of 5px*/
-webkit-border-radius: $radius; /*chrome, safari*/
-moz-border-radius: $radius; /*firefox*/
-ms-border-radius: $radius; /*IE*/
-o-border-radius: $radius; /*opera*/
border-radius: $radius; /*official form always at the bottom*/
}
.rounded{
-webkit-border-radius: 5px; /*chrome, safari*/
-moz-border-radius: 5px; /*firefox*/
-ms-border-radius: 5px; /*IE*/
-o-border-radius: 5px; /*opera*/
border-radius: 5px; /*official form always at the bottom*/
}
#box3{
@extended .rounded;
color: red;
}
The code will be translated into CSS file and looks like this:
.rounded {
-webkit-border-radius: 5px;
/*chrome, safari*/
-moz-border-radius: 5px;
/*firefox*/
-ms-border-radius: 5px;
/*IE*/
-o-border-radius: 5px;
/*opera*/
border-radius: 5px;
/*official form always at the bottom*/ }
#box3 {
@extended .rounded;
color: red; }
Much shorter!
If you need help:
sass --h
If you have any questuibs or want me to get into more details or cover other SASS topics let me know. :)
