Dojo: Sass - Syntactically Awesome Stylesheets
Upcoming SlideShare
Loading in...5
×
 

Dojo: Sass - Syntactically Awesome Stylesheets

on

  • 1,636 views

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

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

Statistics

Views

Total Views
1,636
Views on SlideShare
1,636
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Dojo: Sass - Syntactically Awesome Stylesheets Dojo: Sass - Syntactically Awesome Stylesheets Presentation Transcript

  • Sass - Syntactically Awesome StylesheetsGuilherme 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 /* 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 }
  • 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 }
  • 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 }
  • 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 }