1. Sass - Syntactically
Awesome
Stylesheets
Guilherme Cavalcanti

2. Purpose
• Sass makes CSS fun again. 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.

3. Purpose
• CSS superset
• Every valid CSS file is a valid SCSS
• The other way is not true

4. Nesting
1 /* line 1, ../sass/corners.scss */
2 #navbar {
3 width: 80%;
4 height: 23px;
1 #navbar {
5 }
2 width: 80%;
6 /* line 5, ../sass/corners.scss */
3 height: 23px;
7 #navbar ul {
4
8 list-style-type: none;
5 ul { list-style-type: none; }
9 }
6 li {
10 /* line 6, ../sass/corners.scss */
7 float: left;
11 #navbar li {
8 a { font-weight: bold; }
12 float: left;
9 }
13 }
10 }
14 /* line 8, ../sass/corners.scss */
15 #navbar li a {
16 font-weight: bold;
17 }

5. Mixins
1 /* line 7, ../sass/corners.scss */
2 #navbar li {
3 border-top-radius: 10px; 1 @mixin rounded($side, $radius: 10px) {
4 -moz-border-radius-top: 10px; 2 border-#{$side}-radius: $radius;
5 -webkit-border-top-radius: 10px; 3 -moz-border-radius-#{$side}: $radius;
6 } 4 -webkit-border-#{$side}-radius: $radius;
7 5 }
8 /* line 8, ../sass/corners.scss */ 6
9 #navbar2 li { 7 #navbar li { @include rounded(top); }
10 border-top-radius: 10px;
11 -moz-border-radius-top: 10px;
12 -webkit-border-top-radius: 10px;
13 }

6. Variables
1 /* line 7, ../sass/corners.scss */
1 $main-color: #ce4dd6; 2 #navbar li {
2 3 border-top-radius: 10px;
3 a { 4 -moz-border-radius-top: 10px;
4 color: $main-color; 5 -webkit-border-top-radius: 10px;
5 } 6 }
7
8 /* line 8, ../sass/corners.scss */
9 #navbar2 li {
10 border-top-radius: 10px;
11 -moz-border-radius-top: 10px;
12 -webkit-border-top-radius: 10px;
13 }

7. Compass
1 @import "compass/css3/border-radius";
2
3 .simple { @include border-radius(4px, 4px); }
1 /* line 3, ../sass/corners.scss */
2 .simple {
3 -webkit-border-radius: 4px 4px;
4 -moz-border-radius: 4px / 4px;
5 -o-border-radius: 4px / 4px;
6 -ms-border-radius: 4px / 4px;
7 -khtml-border-radius: 4px / 4px;
8 border-radius: 4px / 4px;
9 }