In this blog post i will be giving you a short tutorial on SASS that will clear most of the fundamental syntax and how the language work.
Sass is an extension of CSS3, adding nested rules, variables, mixins,selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
You can see how to install SASS here: http://sass-lang.com/
FUNDAMENTALS:
1. Declaring variables in SASS: You declare variables in SASS using following notation ::
$blue: #00F;
This can be used in you scss file as follows:
color: $blue;
2. Declaring list in SASS: You declare list in SASS using following notations ::
$icons: twitter facebook youtube.
List comes handy when you want generate a set of element in some common fashion. For example you might wish to generate a series of divs with different background images and having same dimensions. You can do that in following manner:
@each $social in $icon{
##{$social}{background: image-url("avatars/#{$social}.png") no-repeat}
}
MIXINS:
Mixin is a way by which you can declare a reusable chunk of code. This can also be called as advanced version of variable.
Example:
@mixin border-radius($radius:10px){
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-o-border-radius: $radius;
}
These mixins can be used in your code in following manner:
@include border-radius(5px)
SELECTOR INHERITANCE:
In SASS, you can inherit styles from one class into another class. This can be done in following manner:
.primaryClass{
/*Style declaration*/
}
.secondary{
@extend .primaryClass;
}
This feature can come handy when you want to reuse certain style attributes across multiple classes like fonts, color.
@IMPORT
Sass extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. In addition, any variables or mixins defined in imported files can be used in the main file.
Example:
@import "reset";
NESTING SELECTORS
Sass avoids repetition by nesting selectors within one another. The same thing works with properties.
Example for this:
.nav{
background-color: $brandcolor;
width:100%;
height: 64px;
@include setMargin("10px","20px","30px","40px");
.container{
.items{
position: relative;
.submenu{
width:96px;
@include border-radius(5px)
}
}
}
}
When compiled this will output:
.nav {
background-color: #ac2428;
width: 100%;
height: 64px;
margin: 10px 20px 30px 40px;
}
.nav .container .items {
position: relative;
}
.nav .container .items .submenu {
width: 96px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
USING LISTS AND @each
We can process a list to get some meaningful styles. Here is an example where i m creating social classes based on the list of social names that have been provided in the list.
$icon:twitter facebook youtube;
@each $social in $icon{
##{$social}{background: image-url("avatars/#{$social}.png") no-repeat}
}
BUILD YOUR OWN FUNCTION
It is possible to define your own functions in sass and use them in any value or script context.
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
LOOPING IN SASS USING FOR LOOP
We have provision in SASS where we can loop using for loop. Example of this:
$class-slug: for;
@for $i from 1 through 4{
.#{$class-slug}-#{$i}{
@if $i > 2{
width:60px;
}
@else{
width:40px;
}
}
}
As you can see in this example we are generating four classes using for loop. Within this loop we see the number of iteration and assign the width accordingly. This also shows implementation of if.
GENERATING CSS SHORTHANDS USING SASS
While working on SASS when writing this tutorials i cam across a scenario where i wanted to write a mixin that would throw me shorthand declaration instead of providing me separate declarations.
For example how would you generate a something like
margin: 10px 20px 30px 40px;
using SASS? Here's how you do it:
@mixin setMargin($top,$right,$bottom,$left){
margin: #{$top} #{$right} #{$bottom} #{$left};
}
You can use this mixin in following manner
@include setMargin("10px","20px","30px","40px");
Well this is it for fundamentals of SASS. You can also refer to this manual for trying out more stuff in SASS:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
Yet another good site for reference is:
http://thesassway.com/
For any queries feel free to write to : prabhu.anirudh@live.in
