O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Metasys Solução Educacional
Metasys Solução Educacional
Carregando em…3
×

Confira estes a seguir

1 de 7 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Semelhante a Sass (20)

Mais de Guilherme (20)

Anúncio

Mais recentes (20)

Sass

  1. 1. Sass - Syntactically Awesome Stylesheets Guilherme 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. 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 }

×