QConSP 2012: CSS3 com Sass e Compass

CSS 3 com Sass e CompassLoiane Groner@loiane

.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 odesign

Sass é uma extensão doCSS3 que permite que vocêcrie folhas de estilo melhorescom um esforço menor

Don’tRepeatYourself

Var iáv eis

.scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}

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

Ne sting

.scss .csstable.hl { /* CSS */ margin: 2em 0; td.ln { table.hl { text-align: right; margin: 2em 0; } }} table.hl td.ln { text-align: right;li { } font: { family: serif; li { weight: bold; font-family: serif; size: 1.2em; font-weight: bold; } font-size: 1.2em;} }

H er an ça

.scss .css.error { /* CSS */ border: 1px #f00; background: #fdd; .error, .badError {} border: 1px #f00;.error.intrusion { background: #fdd; font-size: 1.3em; } font-weight: bold;} .error.intrusion, .badError.intrusion {.badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px; }} .badError { border-width: 3px; }

.scss .css .error { /* CSS */ border: 1px #f00; background: #fdd; .error, .badError { } border: 1px #f00; .error.intrusion { background: #fdd; font-size: 1.3em; } font-weight: bold; } .error.intrusion, .badError.intrusion { .badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px; } } .badError {<div class="error badError"> border-width: 3px;Erros Graves }</div>

M ix ins

.scss .css@mixin table-base { th { /* CSS */ text-align: center; font-weight: bold; #data { } float: left; td, th {padding: 2px} margin-left: 10px;} } #data th {@mixin left($dist) { text-align: center; float: left; font-weight: bold; margin-left: $dist; }} #data td, #data th { padding: 2px;#data { } @include left(10px); @include table-base;}

Im ports

/* projeto.scss */@import "core";@import "header", "footer"; sc ss _ core. .sc ss _ footer sc ss _h eader. projeto.css projeto.scss

Opera çõ es tem á tic asMa

Operadores MatemáticosOperadores Matemáticos (+, -, *, /, %) funcionam comnúmeros2em + 2em; //4em2em - 1em; //1em1in + 72pt; //2in5px * 4; //20px19 % 3; //1

Funções Numéricaspercentage(13/25); //52%round(4.4); //4ceil(4.2); //5floor(4.6); //4abs(-5); //5

Loo pe dic ion aisC on es Cond i ci o n a i s < > <= = > == !=›O perador else, @ e l se i f› @if, @ , @ e a ch , @w h i l e › @for › and, or

Operadores Relacionais (<, >, <=, >=) comparamnúmeros1 < 25 // true10 <= 30 // true3 > 2 // true3 >= 2 // trueOperacores de Comparação (==, !=) comparamqualquer tipo1 + 1 == 2 // truesmall != big // true#000 == black // true

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

C ore s!

saturate(#9b8a saturate(#9b8a60,50%) desatur saturate(#9b8a60,50%) desaturate(#d9a621,50%)darken(#6cf620,30%) lighten(#2e7805,50%) darken(#6cf620,30%) darken(#6cf620 darken(#6cf620,30%) lighten lighten(#2e7805,50%)fade-out(#fab, .5) fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5) fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5) fade-in(rgba(#fab,.5),.5) fade-out(#fab, .5) fade-in(rgb fade-out(#fab, .

Funções

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

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

Qu emusa?

Obrigada!Loiane Groner@loiane

http://eventifier.co	32
https://si0.twimg.com	3
https://twimg0-a.akamaihd.net	1
https://twitter.com	1

QConSP 2012: CSS3 com Sass e Compass

by Loiane Groner on Aug 04, 2012

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 37

Statistics

QConSP 2012: CSS3 com Sass e Compass Presentation Transcript