QConSP 2012: CSS3 com Sass e Compass
-
Upload
loiane-groner -
Category
Technology
-
view
942 -
download
4
Transcript of QConSP 2012: CSS3 com Sass e Compass
.msg { padding: 24px; }
.msg h3 {padding: 24px;
}
.msg { padding: 24px; }
.msg h3 {padding: 24px;
}
.msg { padding: 24px; }
.msg h3 {padding: 24px;
}
.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
Sass é uma extensão do CSS3 que permite que você crie folhas de estilo melhores com um esforço menor
Don’tRepeatYourself
Variáveis
$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
$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
$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
$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
$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
$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
$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
$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
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
Nesting
.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;}
Herança
.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;}
.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;}
.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;}
.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;}
Mixins
@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
Imports
_core.scss
_footer.scss
_header.scss
projeto.scss projeto.css
/* projeto.scss */@import "core";@import "header", "footer";
Operações
Matemáticas
Operadores Matemáticos
Operadores Matemáticos (+, -, *, /, %) funcionam com números
2em + 2em; //4em2em - 1em; //1em1in + 72pt; //2in5px * 4; //20px19 % 3; //1
Funções Numéricas
percentage(13/25); //52%round(4.4); //4ceil(4.2); //5floor(4.6); //4abs(-5); //5
Loop e Condicionais› Operadores Condicionais < > <= => == !=
› @if, @else, @else if
› @for, @each, @while
› and, or
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
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
Cores!
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%)
Funções
@function pxem($px, $context: 16px) { @return ($px / $context) * 1em;}article h2 { font-size: pxem(45px); }
article h2 { font-size: 2.813em; }
.scss
.css
Compass is an open-source CSS Authoring Framework.
Coleção de MixinsFunções SassAmbienteExtensões
http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"fonts_dir = "fonts"javascripts_dir = "javascripts"output_style = :compressed
Quem usa?