O que eu aprendi com Sass

@lucasmazza

http://www.casadocodigo.com.br/products/livro-html-css

O que eu aprendi com Sass

Best. Feature. Ever.

1.5 - Março 2007

Sass (yeap)

!main_color = #82fc08 ! #main :width 80% :color = !main_color :font :family sans-serif :size 1.3em ! p :color = !main_color - #404040 :font-size 0.8em

Muita coisa mudou desde 20072010

E algumas lições foram aprendidas

Sass não vai resolver os seus problemas com CSS

Organização Reaproveitamento

Seletores Performance

MAS…

Ele será uma ferramenta muito útil

Você só precisa fazer bom uso dele

_Partials!

// application.scss @import 'normalize'; @import 'functions'; @import 'defaults'; @import 'modules/home'; @import 'sprites/icons';

application.css

Cada partial é um módulo

(Arquivos pequenos, bem escritos e de fácil manutenção)

MAS…

Mais módulos, mais arquivos

Código fragmentado e muitas peças móveis

Modularização é difícil pra #@$#%!

DRYCSS OOCSS

Smacss BEM

?

// application.scss // CSS CSS CSS...

// application.scss @import 'normalize'; // SCSS SCSS SCSS... // SCSS SCSS SCSS...

// application.scss @import 'normalize'; @import 'functions'; // SCSS SCSS SCSS...

// application.scss @import 'normalize'; @import 'functions'; @import 'modules/home'; @import 'modules/page';

// application.scss @import 'normalize'; @import 'functions'; @import 'modules/home'; @import 'modules/page'; // ...

Deixe o seu CSS crescer aos poucos

Aceite que você não precisa acertar de primeira

Nesting!DRY

Seletores

aninhados!

wow

código agrupado

MAS…

Blocos muito aninhados ficam impossíveis de se ler

E você já viu o CSS que é gerado?

.section-developers #petition-inner #main-content-wrapper .services-documentation-version .services-documentation-resources .services-documentation-resource .resource-method-bundle .resource-method .implementations .implementation-bundle .implementation .implementation-download { font-weight: bold; text-transform: uppercase; margin: .25em 0; }

ಠ_ಠ

3 níveis 40/50 linhas

E uma boa desculpa (liberado para pseudo selectors)

The Inception Rule “don’t go more than four levels deep"

http://thesassway.com/beginner/the-inception-rule

20/11/2011

Mixins, placeholders

e functions

Abstrações para padrões que se repetem

.close-modal { background-image: url('/assets/sprites.png'); background-repeat: no-repeat; background-position: 0 -20px; // ... } !.delete-post-button { background-image: url('/assets/sprites.png'); background-repeat: no-repeat; background-position: 0 -20px; // ... }

%icons-sprite-cross { background-image: url('/assets/sprites.png'); background-repeat: no-repeat; background-position: 0 -20px; } !.close-modal { @extend %icons-sprite-cross; // ... } !.delete-post-button { @extend %icons-sprite-cross; // ... }

Prefixos Sprites

Módulos parametrizáveis Propriedades legadas

E não apenas para gerar código

// application.scss .thingy { @include size(30px 70px); } !!!!// application.css .thingy { width: 30px; height: 70px; }

vs

@mixin triangle ($size, $color, $direction) { height: 0; width: 0; ! $width: nth($size, 1); $height: nth($size, length($size)); ! $foreground-color: nth($color, 1); $background-color: if(length($color) == 2, nth($color, 2), transparent); ! @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { ! $width: $width / 2; $height: if(length($size) > 1, $height, $height/2); ! @if $direction == up { border-left: $width solid $background-color; border-right: $width solid $background-color; border-bottom: $height solid $foreground-color; ! } @else if $direction == right { border-top: $width solid $background-color; border-bottom: $width solid $background-color; border-left: $height solid $foreground-color; ! } @else if $direction == down { border-left: $width solid $background-color; border-right: $width solid $background-color; border-top: $height solid $foreground-color; ! } @else if $direction == left { border-top: $width solid $background-color; border-bottom: $width solid $background-color; border-right: $height solid $foreground-color; } } ! @else if ($direction == up-right) or ($direction == up-left) { border-top: $height solid $foreground-color; ! @if $direction == up-right { border-left: $width solid $background-color; ! } @else if $direction == up-left { border-right: $width solid $background-color; } } ! @else if ($direction == down-right) or ($direction == down-left) { border-bottom: $height solid $foreground-color; ! @if $direction == down-right { border-left: $width solid $background-color; ! } @else if $direction == down-left { border-right: $width solid $background-color; } } ! @else if ($direction == inset-up) { border-width: $height $width; border-style: solid; border-color: $background-color $background-color $foreground-color; } ! @else if ($direction == inset-down) { border-width: $height $width; border-style: solid; border-color: $foreground-color $background-color $background-color; } ! @else if ($direction == inset-right) { border-width: $width $height; border-style: solid; border-color: $background-color $background-color $background-color $foreground-color; } ! @else if ($direction == inset-left) { border-width: $width $height; border-style: solid; border-color: $background-color $foreground-color $background-color $background-color; } }

.thing { @include triangle(12px, gray, down); } !!!!.thing { height: 0; width: 0; border-color: transparent; border-style: solid; border-width: 6px; border-top-color: gray; }

Novamente, confira o CSS que é gerado

CSS não é Ruby/Java/Python/etc

MAS…

Só isso não é o suficiente

Documentação e Styleguides

Documentação é um canal de comunicação

E serve como outra abstração do código

// ======================================================= // Profile card to display the players in the leaderboard. // // Supports an avatar wrapper, follower count and the // user name. Note that the 'avatar' and the ‘follower // count' are wrapped inside an 'a' tag so everything // will be clickable.

Descrição

// <div class='profile-card'> // <a href='#' class='profile-card-avatar'> // <img class='profile-card-avatar' width='120' height='120'> // <span class='profile-card-follower-count'>13220</span> // <p class='profile-card-star'>@HackerNewsOnion</p> // </a> // <a href='#' class='profile-card-name'>Hacker News Onion</a> // </div> // ==============================================================

Exemplos

Modificadores

// ============================================================= // A full fledged replacement for '<select>' using a list of // unordered items. // // Modifiers: // // :hover - Subtle hover highlight. // .expanded - Expanded state, displaying the choices list. // .right-aligned - Aligns the 'toggle' icon to the right. // ============================================================= !// Expanded state for the 'combo-selector'. // ============================================================== .combo-selector.expanded { !}

E qualquer outra informação importante

Foque em documentar o que é relevante

Módulos complexos Variações importantes

Mixins e funções Qualquer outro hotspot

http://guidelines.plataformatec.com.br/css

O importante é escrever alguma coisa

Toolkits para todos os projetos e gostos

Compass vs

Bourbon

bitters sassaparilla

neat Susy

refills compass-*

…

Escolha dependências do tamanho que você precisa

compass-rails

CompassO que eu

realmente preciso

Eu só quero gerenciar meus sprites

lucasmazza/spriteful

CLI <3 Não é uma dependência de execução

500 linhas de código

E você pode ter o seu próprio toolkit

fnando/sassquatch

mdo/preboot

Use o que funcione para você

Use o que funcione para você

para o seu time

TL;DR

“Sass doesn't create bad code. Bad coders do.”

http://thesassway.com/editorial/sass-doesnt-create-bad-code-bad-coders-do

Escute o seu código

Kent Beck @ Smalltalk Best Practice Patterns

“Code doesn't lie. If you're not listening, you won't hear the

truths it tells.”

Converse com o seu time

Kyle Neath @ http://warpspire.com/posts/kss/

“Maintainability comes from shared understanding.”

Obrigado!https://twitter.com/lucasmazza https://speakerdeck.com/lucas