Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dojo: Sass - Syntactically Awesome Stylesheets

https://github.com/guiocavalcanti/sass-Dev-day

  • Be the first to comment

  • Be the first to like this

Dojo: Sass - Syntactically Awesome Stylesheets

  1. 1. Sass - Syntactically Awesome StylesheetsGuilherme Cavalcanti
  2. 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. 3. Purpose• CSS superset • Every valid CSS file is a valid SCSS • The other way is not true
  4. 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. 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. 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. 7. Compass1 @import "compass/css3/border-radius";23 .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 }

×