Syntactically awesome stylesheets

1. London, 8 October 2012 | | 1

2. SASS

3. Installation
Download .exe file from the following URL:
http://rubyinstaller.org/downloads/
Install and run the command prompt with
ruby
Sass -- watch style.sass:style.css
Sass – watch <sass filename>:<css
filename>

4. SASS
• SASS (Syntactically Awesome Stylesheets) is a
stylesheet language designed by Hampton Catlin and
developed by Nathan Weizenbaum.
• SASS is a scripting languages and it is interpreted to
CSS.
• SASS uses indentation to separate code blocks and
semicolons to separate rules

5. Variables
• SASS allows variables. Variables are defined with “$”
dollar sign and variable assignment is done using “:”
colon. They can be used throughtout the stylesheet.
• Variables can be arguments or results of the several
functions. During translation, the values of the variables
are inserted in the output css

6. Examples
$red : #ff0000 OUTPUT:
$margin : 16px .nav {
border-color: red;
.nav margin: 8px; }
border-color : $red
margin: $margin / 2

7. Nesting
• It allows code to be inserted within each other
table.hl OUTPUT:
margin: 2em 0 table.hl {
td.ln margin: 2em 0; }
text-align: right table.hl td.ln {
text-align: right; }

8. Mixins
• Mixins is defined with directive “@mixin”
• Variables can be arguments or results of the several
functions. During translation, the values of the variables
are inserted in the output css

9. Examples 1
@mixin table-base {
OUTPUT:
th {
.data th {
text-align: center;
text-align: center;
font-weight: bold;
font-weight: bold;
}
}
td, th {padding: 2px}
.data td, .data th {
}
padding: 2px;
.data {
}
@include table-base;
}

10. Example 2
@mixin spacing($dist)
OUTPUT:
margin: 0 $dist 0 $dist .content {
.content margin: 0 10px 0 10px; }
@include spacing(10px)
.nav ul li {
@mixin primNav display: inline-block;
display: inline-block width: 100%;
width: 100% border-top: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6 border-bottom: 1px solid #e6e6e6; }
border-bottom: 1px solid #e6e6e6
.nav ul li
@include primNav

11. Selector inheritance
• Allows the selector to inherit all the
properties to another selector
• Duplication of code can be avoided

12. Example1
.heading OUTPUT:
color: red .heading, .big-heading {
color: red; }
.big-heading
@extend .heading .big-heading {
font-size: 48px font-size: 48px; }

13. Example2
clearfix OUTPUT:
content: "." .clearfix, .data:after {
display: block content: ".";
height: 0 display: block;
clear: both height: 0;
visibility: hidden clear: both;
.data:after visibility: hidden; }
@extend .clearfix

14. Advantages
• Css styles can be reused
• Common css styles can be brought
together through nesting
• It includes features like nesting, variables,
mixins which makes it more manageable

15. Disadvantages
• Need thorough learning to understand
sass
• Generated css is not aligned properly
• Difficult to understand since the syntax
has no curly braces to distinguish and very
confusing since all the styles are written
one after another.

16. Links referred
•https://gist.github.com/674726
•http://sass-lang.com/

17. End