o que eu aprendi com sass · 2014-08-27 · o que eu aprendi com sass. 1.5 - março 2007. sass...
Post on 07-Jul-2020
7 Views
Preview:
TRANSCRIPT
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
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
top related