Sass - Syntactically Awesome

Stylesheets

Guilherme Cavalcanti

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.

Purpose

• CSS superset

• Every valid CSS file is a valid SCSS

• The other way is not true

Nesting

1 #navbar { 2 width: 80%; 3 height: 23px; 4 5 ul { list-style-type: none; } 6 li { 7 float: left; 8 a { font-weight: bold; } 9 }10 }

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

Mixins

1 @mixin rounded($side, $radius: 10px) {2 border-#{$side}-radius: $radius;3 -moz-border-radius-#{$side}: $radius;4 -webkit-border-#{$side}-radius: $radius;5 }6 7 #navbar li { @include rounded(top); }

1 /* line 7, ../sass/corners.scss */ 2 #navbar li { 3 border-top-radius: 10px; 4 -moz-border-radius-top: 10px; 5 -webkit-border-top-radius: 10px; 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 }

Variables

1 $main-color: #ce4dd6;2 3 a {4 color: $main-color;5 }

1 /* line 7, ../sass/corners.scss */ 2 #navbar li { 3 border-top-radius: 10px; 4 -moz-border-radius-top: 10px; 5 -webkit-border-top-radius: 10px; 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 }

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 }