0
Sass - Syntactically          Awesome        StylesheetsGuilherme Cavalcanti
Purpose• Sass makes CSS fun again. Sass is an  extension of CSS3, adding nested  rules, variables, mixins, selector  inher...
Purpose• CSS superset • Every valid CSS file is a valid SCSS • The other way is not true
Nesting                                      1   /* line 1, ../sass/corners.scss   */                                     ...
Mixins 1   /* line 7, ../sass/corners.scss */ 2   #navbar li { 3     border-top-radius: 10px;           1 @mixin rounded($...
Variables                           1   /* line 7, ../sass/corners.scss */1 $main-color: #ce4dd6;    2   #navbar li {2    ...
Compass1 @import "compass/css3/border-radius";23 .simple { @include border-radius(4px, 4px); }1 /* line 3, ../sass/corners...
Upcoming SlideShare
Loading in...5
×

Dojo: Sass - Syntactically Awesome Stylesheets

1,216

Published on

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

Published in: Technology, Lifestyle
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,216
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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 }
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×