O que eu aprendi com Sass

Transcrição

1 O que eu aprendi com Sass

2 @lucasmazza

3 http: /

4

5 O que eu aprendi com Sass

6 Best. Feature. Ever Março 2007

7 !main_color = #82fc08! #main :width 80% :color =!main_color :font :family sans-serif :size 1.3em! p :color =!main_color - # :font-size 0.8em Sass (yeap)

8 Muita coisa mudou desde

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 // '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 // 'normalize'; // SCSS SCSS SCSS... // SCSS SCSS SCSS...

25 // 'functions'; // SCSS SCSS SCSS...

26 // 'modules/page';

27 // 'modules/page'; //...

28 Deixe o seu CSS crescer aos poucos

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

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

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-contentwrapper.services-documentation-version ಠ_ಠ.servicesdocumentation-resources.services-documentationresource.resource-method-bundle.resourcemethod.implementations.implementationbundle.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 %icons-sprite-cross; //... }!.delete-post-button %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 size(30px 70px); }!!! vs! // application.css.thingy { width: 30px; height: 70px; }

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), ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {! $width: $width / 2; $height: if(length($size) > 1, $height, $direction == up { border-left: $width solid $background-color; border-right: $width solid $background-color; border-bottom: $height solid $foreground-color;! if $direction == right { border-top: $width solid $background-color; border-bottom: $width solid $background-color; border-left: $height solid $foreground-color;! if $direction == down { border-left: $width solid $background-color; border-right: $width solid $background-color; border-top: $height solid $foreground-color;! if $direction == left { border-top: $width solid $background-color; border-bottom: $width solid $background-color; border-right: $height solid $foreground-color; } if ($direction == up-right) or ($direction == up-left) { border-top: $height solid $direction == up-right { border-left: $width solid $background-color;! if $direction == up-left { border-right: $width solid $background-color; } if ($direction == down-right) or ($direction == down-left) { border-bottom: $height solid $direction == down-right { border-left: $width solid $background-color;! if $direction == down-left { border-right: $width solid $background-color; } if ($direction == inset-up) { border-width: $height $width; border-style: solid; border-color: $background-color $background-color $foreground-color; if ($direction == inset-down) { border-width: $height $width; border-style: solid; border-color: $foreground-color $background-color $background-color; if ($direction == inset-right) {.thing triangle(12px, gray, down); }!!!!.thing { height: 0; width: 0; border-color: transparent; border-style: solid; border-width: 6px; border-top-color: gray; } border-width: $width $height; border-style: solid; border-color: $background-color $background-color $background-color $foreground-color; if ($direction == inset-left) { } } border-width: $width $height; border-style: solid; border-color: $background-color $foreground-color $background-color $background-color;

45

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

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 // </a> // <a href='#' class='profile-card-name'>hacker News Onion</a> // </div> // ============================================================== Exemplos

56 // ============================================================= // 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 {! } Modificadores

57 E qualquer outra informação importante

58

59

60 Foque em documentar o que é relevante

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

62

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 Code doesn't lie. If you're not listening, you won't hear the truths it tells. Kent Smalltalk Best Practice Patterns

82 Converse com o seu time

83 Maintainability comes from shared understanding. Kyle http: /warpspire.com/posts/kss/

84

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