Sass

701 views

Published on

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
701
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sass

  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 }

×