Download - QConSP 2012: CSS3 com Sass e Compass

Transcript
Page 1: QConSP 2012: CSS3 com Sass e Compass

Loiane Groner@loianehttp://loiane.com

CSS 3 com Sass e Compass

Page 2: QConSP 2012: CSS3 com Sass e Compass
Page 3: QConSP 2012: CSS3 com Sass e Compass

.msg { padding: 24px; }

.msg h3 {padding: 24px;

}

Page 4: QConSP 2012: CSS3 com Sass e Compass

.msg { padding: 24px; }

.msg h3 {padding: 24px;

}

Page 5: QConSP 2012: CSS3 com Sass e Compass

.msg { padding: 24px; }

.msg h3 {padding: 24px;

}

Page 6: QConSP 2012: CSS3 com Sass e Compass

.msg { padding: 24px; }

.msg h3 {padding: 24px;

}

Problemas• Repetição gera problemas para manter codigo• Relacionamentos não estão claros• Razões para tais valores estão na cabeça de quem fez o design

Page 7: QConSP 2012: CSS3 com Sass e Compass
Page 8: QConSP 2012: CSS3 com Sass e Compass

Sass é uma extensão do CSS3 que permite que você crie folhas de estilo melhores com um esforço menor

Page 9: QConSP 2012: CSS3 com Sass e Compass

Don’tRepeatYourself

Page 10: QConSP 2012: CSS3 com Sass e Compass

Variáveis

Page 11: QConSP 2012: CSS3 com Sass e Compass

$blue: #3bbfce;$margin: 16px;

.content-navigation { border-color: $blue; color: darken($blue, 9%);}

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

/* CSS */

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

.scss .css

Page 12: QConSP 2012: CSS3 com Sass e Compass

$blue: #3bbfce;$margin: 16px;

.content-navigation { border-color: $blue; color: darken($blue, 9%);}

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

/* CSS */

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

.scss .css

Page 13: QConSP 2012: CSS3 com Sass e Compass

$blue: #3bbfce;$margin: 16px;

.content-navigation { border-color: $blue; color: darken($blue, 9%);}

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

/* CSS */

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

.scss .css

Page 14: QConSP 2012: CSS3 com Sass e Compass

$blue: #3bbfce;$margin: 16px;

.content-navigation { border-color: $blue; color: darken($blue, 9%);}

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

/* CSS */

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

.scss .css

Page 15: QConSP 2012: CSS3 com Sass e Compass

$blue: #3bbfce;$margin: 16px;

.content-navigation { border-color: $blue; color: darken($blue, 9%);}

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

/* CSS */

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

.scss .css

Page 16: QConSP 2012: CSS3 com Sass e Compass

$blue: #3bbfce;$margin: 16px;

.content-navigation { border-color: $blue; color: darken($blue, 9%);}

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

/* CSS */

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

.scss .css

Page 17: QConSP 2012: CSS3 com Sass e Compass

$blue: #3bbfce;$margin: 16px;

.content-navigation { border-color: $blue; color: darken($blue, 9%);}

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

/* CSS */

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

.scss .css

Page 18: QConSP 2012: CSS3 com Sass e Compass

$blue: #3bbfce;$margin: 16px;

.content-navigation { border-color: $blue; color: darken($blue, 9%);}

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

/* CSS */

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

.scss .css

Page 19: QConSP 2012: CSS3 com Sass e Compass
Page 20: QConSP 2012: CSS3 com Sass e Compass

Com Sass...• Não tem repetição -> custo de manuntenção é baixo• Variáveis deixam os relacionamentos claros• Razões para tais valores ficam evidentes

Page 21: QConSP 2012: CSS3 com Sass e Compass

Nesting

Page 22: QConSP 2012: CSS3 com Sass e Compass

.scss .csstable.hl { margin: 2em 0; td.ln { text-align: right; }}

li { font: { family: serif; weight: bold; size: 1.2em; }}

/* CSS */

table.hl { margin: 2em 0;}table.hl td.ln { text-align: right;}

li { font-family: serif; font-weight: bold; font-size: 1.2em;}

Page 23: QConSP 2012: CSS3 com Sass e Compass

Herança

Page 24: QConSP 2012: CSS3 com Sass e Compass

.scss .css.error { border: 1px #f00; background: #fdd;}.error.intrusion { font-size: 1.3em; font-weight: bold;}

.badError { @extend .error; border-width: 3px;}

/* CSS */

.error, .badError { border: 1px #f00; background: #fdd;}

.error.intrusion,

.badError.intrusion { font-size: 1.3em; font-weight: bold;}

.badError { border-width: 3px;}

Page 25: QConSP 2012: CSS3 com Sass e Compass

.scss .css.error { border: 1px #f00; background: #fdd;}.error.intrusion { font-size: 1.3em; font-weight: bold;}

.badError { @extend .error; border-width: 3px;}

<div class="error badError">Erros Graves</div>

/* CSS */

.error, .badError { border: 1px #f00; background: #fdd;}

.error.intrusion,

.badError.intrusion { font-size: 1.3em; font-weight: bold;}

.badError { border-width: 3px;}

Page 26: QConSP 2012: CSS3 com Sass e Compass

.scss .css.error { border: 1px #f00; background: #fdd;}.error.intrusion { font-size: 1.3em; font-weight: bold;}

.badError { @extend .error; border-width: 3px;}

<div class="error badError">Erros Graves</div>

/* CSS */

.error, .badError { border: 1px #f00; background: #fdd;}

.error.intrusion,

.badError.intrusion { font-size: 1.3em; font-weight: bold;}

.badError { border-width: 3px;}

Page 27: QConSP 2012: CSS3 com Sass e Compass

.scss .css.error { border: 1px #f00; background: #fdd;}.error.intrusion { font-size: 1.3em; font-weight: bold;}

.badError { @extend .error; border-width: 3px;}

<div class="error badError">Erros Graves</div>

/* CSS */

.error, .badError { border: 1px #f00; background: #fdd;}

.error.intrusion,

.badError.intrusion { font-size: 1.3em; font-weight: bold;}

.badError { border-width: 3px;}

Page 28: QConSP 2012: CSS3 com Sass e Compass

Mixins

Page 29: QConSP 2012: CSS3 com Sass e Compass

@mixin table-base { th { text-align: center; font-weight: bold; } td, th {padding: 2px}}

@mixin left($dist) { float: left; margin-left: $dist;}

#data { @include left(10px); @include table-base;}

/* CSS */

#data { float: left; margin-left: 10px;}#data th { text-align: center; font-weight: bold;}#data td, #data th { padding: 2px;}

.scss .css

Page 30: QConSP 2012: CSS3 com Sass e Compass

Imports

Page 31: QConSP 2012: CSS3 com Sass e Compass

_core.scss

_footer.scss

_header.scss

projeto.scss projeto.css

/* projeto.scss */@import "core";@import "header", "footer";

Page 32: QConSP 2012: CSS3 com Sass e Compass

Operações

Matemáticas

Page 33: QConSP 2012: CSS3 com Sass e Compass

Operadores Matemáticos

Operadores Matemáticos (+, -, *, /, %) funcionam com números

2em + 2em; //4em2em - 1em; //1em1in + 72pt; //2in5px * 4; //20px19 % 3; //1

Page 34: QConSP 2012: CSS3 com Sass e Compass

Funções Numéricas

percentage(13/25); //52%round(4.4); //4ceil(4.2); //5floor(4.6); //4abs(-5); //5

Page 35: QConSP 2012: CSS3 com Sass e Compass

Loop e Condicionais› Operadores Condicionais < > <= => == !=

› @if, @else, @else if

› @for, @each, @while

› and, or

Page 36: QConSP 2012: CSS3 com Sass e Compass

Operadores Relacionais (<, >, <=, >=) comparam números1 < 25 // true10 <= 30 // true3 > 2 // true3 >= 2 // true

Operacores de Comparação (==, !=) comparam qualquer tipo1 + 1 == 2 // truesmall != big // true#000 == black // true

Page 37: QConSP 2012: CSS3 com Sass e Compass

Loop @for

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}

.item-1 { width: 2em; }.item-2 { width: 4em; }.item-3 { width: 6em; }

.scss

.css

Page 38: QConSP 2012: CSS3 com Sass e Compass

Cores!

Page 39: QConSP 2012: CSS3 com Sass e Compass

fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)fade-out(#fab, .5)

fade-in(rgba(#fab,.5),.5)fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)

darken(#6cf620,30%) lighten(#2e7805,50%)

adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)

saturate(#9b8a60,50%) desaturate(#d9a621,50%)

darken(#6cf620,30%) lighten(#2e7805,50%)

adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)

saturate(#9b8a60,50%) desaturate(#d9a621,50%)

darken(#6cf620,30%) lighten(#2e7805,50%)

adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)

saturate(#9b8a60,50%) desaturate(#d9a621,50%)

darken(#6cf620,30%) lighten(#2e7805,50%)

adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)

saturate(#9b8a60,50%) desaturate(#d9a621,50%)

darken(#6cf620,30%) lighten(#2e7805,50%)

Page 40: QConSP 2012: CSS3 com Sass e Compass

Funções

Page 41: QConSP 2012: CSS3 com Sass e Compass

@function pxem($px, $context: 16px) { @return ($px / $context) * 1em;}article h2 { font-size: pxem(45px); }

article h2 { font-size: 2.813em; }

.scss

.css

Page 42: QConSP 2012: CSS3 com Sass e Compass
Page 43: QConSP 2012: CSS3 com Sass e Compass

Compass is an open-source CSS Authoring Framework.

Page 44: QConSP 2012: CSS3 com Sass e Compass

Coleção de MixinsFunções SassAmbienteExtensões

Page 45: QConSP 2012: CSS3 com Sass e Compass

http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"fonts_dir = "fonts"javascripts_dir = "javascripts"output_style = :compressed

Page 46: QConSP 2012: CSS3 com Sass e Compass

Quem usa?

Page 47: QConSP 2012: CSS3 com Sass e Compass
Page 48: QConSP 2012: CSS3 com Sass e Compass
Page 49: QConSP 2012: CSS3 com Sass e Compass

Obrigada!

Loiane Groner@loianehttp://loiane.com