Upgrade to Pro — share decks privately, control downloads, hide ads and more …

O que eu aprendi com Sass

O que eu aprendi com Sass

5a90a67fa1a92e6a4b605cfd8da5e375?s=128

Lucas Mazza

April 11, 2014
Tweet

Transcript

  1. O que eu aprendi com Sass

  2. @lucasmazza

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

  4. None
  5. O que eu aprendi com Sass

  6. Best. Feature. Ever. 1.5 - Março 2007

  7. 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
  8. Muita coisa mudou desde 2007 2010

  9. E algumas lições foram aprendidas

  10. Sass não vai resolver os seus problemas com CSS

  11. Organização Reaproveitamento Seletores Performance

  12. MAS…

  13. Ele será uma ferramenta muito útil

  14. Você só precisa fazer bom uso dele

  15. _Partials!

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

    @import 'sprites/icons'; application.css
  17. Cada partial é um módulo (Arquivos pequenos, bem escritos e

    de fácil manutenção)
  18. MAS…

  19. Mais módulos, mais arquivos

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

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

  22. DRYCSS OOCSS Smacss BEM ?

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

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

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

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

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

    // ...
  28. Deixe o seu CSS crescer aos poucos

  29. Aceite que você não precisa acertar de primeira

  30. Nesting! DRY Seletores aninhados! wow código agrupado

  31. MAS…

  32. Blocos muito aninhados ficam impossíveis de se ler

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

  34. .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; } ಠ_ಠ
  35. 3 níveis 40/50 linhas E uma boa desculpa (liberado para

    pseudo selectors)
  36. The Inception Rule “don’t go more than four levels deep"

    http:/ /thesassway.com/beginner/the-inception-rule 20/11/2011
  37. Mixins, placeholders e functions

  38. Abstrações para padrões que se repetem

  39. .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; // ... }
  40. %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; // ... }
  41. Prefixos Sprites Módulos parametrizáveis Propriedades legadas

  42. E não apenas para gerar código

  43. // application.scss .thingy { @include size(30px 70px); } ! !

    ! ! // application.css .thingy { width: 30px; height: 70px; } vs
  44. @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; }
  45. None
  46. Novamente, confira o CSS que é gerado

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

  48. MAS…

  49. Só isso não é o suficiente

  50. None
  51. Documentação e Styleguides

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

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

  54. // ======================================================= // 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
  55. // <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
  56. 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 { ! }
  57. E qualquer outra informação importante

  58. None
  59. None
  60. Foque em documentar o que é relevante

  61. Módulos complexos Variações importantes Mixins e funções Qualquer outro hotspot

  62. None
  63. http:/ /guidelines.plataformatec.com.br/css

  64. O importante é escrever alguma coisa

  65. Toolkits para todos os projetos e gostos

  66. Compass vs Bourbon

  67. bitters sassaparilla neat Susy refills compass-* …

  68. Escolha dependências do tamanho que você precisa

  69. compass-rails Compass O que eu realmente preciso

  70. Eu só quero gerenciar meus sprites

  71. lucasmazza/spriteful

  72. CLI <3 Não é uma dependência de execução 500 linhas

    de código
  73. E você pode ter o seu próprio toolkit

  74. fnando/sassquatch

  75. mdo/preboot

  76. Use o que funcione para você

  77. Use o que funcione para você para o seu time

  78. TL;DR

  79. “Sass doesn't create bad code. Bad coders do.” http:/ /thesassway.com/editorial/sass-doesnt-create-bad-code-bad-coders-do

  80. Escute o seu código

  81. Kent Beck @ Smalltalk Best Practice Patterns “Code doesn't lie.

    If you're not listening, you won't hear the truths it tells.”
  82. Converse com o seu time

  83. Kyle Neath @ http:/ /warpspire.com/posts/kss/ “Maintainability comes from shared understanding.”

  84. None
  85. Obrigado! https:/ /twitter.com/lucasmazza https:/ /speakerdeck.com/lucas