Sass is an extension of CSS that adds features like nested rules, variables, mixins, inheritance and more. It compiles to standard CSS. Sass allows CSS code to be more modular, reusable and maintainable by adding these advanced features. Some key features of Sass include nesting rules to organize CSS, creating mixins to reuse CSS rules, and using variables to define colors and values that can be changed globally. Sass code is translated to normal CSS for browser compatibility.

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 }