Sass: CSS com superpoderes

Minicurso ministrado na SCTI-UENF/2014

Transcript

1. Sass: CSS com superpoderes Rômulo Machado SCTI-UENF/2014 http://www.supermanhomepage.com/multimedia/Wallpaper-Images5/z121119-clark.jpg
2. http://cdn.churchm.ag/wp-content/uploads/2012/02/Mario-Lamp-2-2.jpg
3. http://indiaandhoney.files.wordpress.com/2013/08/tumblr_lrzakjtqrc1qee7ixo1_500.gif?w=490
4. Quando eu ouvi falar de Sass:
5. Minha primeira reação: http://i.imgur.com/t1QeXev.gif
6. CSS foi feito para ser simples.
7. CSS foi feito para ser simples. E de fato é.
8. O problema é quando o projeto cresce.
9. http://i.imgur.com/qk96ytw.gif
10. Sass é a solução!
11. – Sass for Web Designers, Chris Coyier “Sass doesn’t make your job harder, it makes it easier.” http://chriscoyier.net/wp-content/uploads/2008/07/me3.jpg
12. Arquivo Sass Arquivo CSS Sass é pré-processado http://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Cogs_font_awesome.svg/240px-Cogs_font_awesome.svg.png Compilador https://www.iconfinder.com/
13. http://sassnotsass.com/
14. https://twitter.com/hcatlin/status/256142344431214592
15. .scss ou .sass?
16. SCSS Sass h1 { background: gray; color: blue; } h2 { font-weight: bold; color: red; } h1 background: gray color: blue h2 font-weight: bold color: red
17. Instalação Mac e Linux: $ gem install sass $ sass -v Sass 3.4.5 (Selective Steve) Windows http://rubyinstaller.org/
18. Uso $ sass --watch application.scss:application.css >>> Sass is watching for changes. Press Ctrl-C to stop.
19. O que veremos hoje? • Comentários
 • Imports
 • Nesting
 • Variáveis • Mixins
 • Extend
 • Diretivas
 • Hands-on
20. Comentários
21. // Estes comentários não vão // para o arquivo CSS compilado /* este vai */ Comentários /* este vai */ application.scss application.css
22. Imports
23. @import (CSS) /* * Importa todos os estilos encontrados em * 'buttons.css' quando o browser faz o * request de application.css * */ @import "buttons.css"; application.css
24. @import (Sass) /* * Importa os estilos encontrados em * 'buttons.css' quando o compilador * for processar application.css * */ @import "buttons"; application.scss
25. Import application.scss application.css buttons.scss
26. Import application.scss application.css buttons.scss buttons.css
27. Import (Partials) application.scss application.css _buttons.scss
28. @import (Sass) /* * Vai buscar por _buttons.sass, * buttons.sass, _buttons.scss ou * buttons.scss e importar. * */ @import "buttons"; application.scss
29. Nesting
30. section { padding: 0; } section hr { text-align: center; max-width: 400px; border-top: 2px solid #3EA3DB; margin: 0 auto; } section h3.top { font-size: 70px; } application.css
31. section { padding: 0; hr { text-align: center; max-width: 400px; border-top: 2px solid #3EA3DB; margin: 0 auto; } h3.top { font-size: 70px; } } application.scss
32. Nesting (propriedades) a { text: { decoration: none; transform: uppercase; } } application.scss
33. &: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden; .image { width: 100%; } } application.scss
34. &: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden; } .browser-shot-1 .image { width: 100%; } application.css
35. &: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden; } .browser-shot-1 .image { width: 100%; } application.css .image dentro de .browser-shot-1
36. &: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden; &.active { bottom: -40px; } } application.scss
37. &: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden; } .browser-shot-1.active { bottom: -40px; } application.css
38. &: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden; } .browser-shot-1.active { bottom: -40px; } application.css elemento que tem
 as duas classes
39. &: o seletor PAAAI .btn-inscrever { color: #fff; &:hover { color: #2ABB9B; } &.disabled:hover { color: #fff; } } application.scss
40. &: o seletor PAAAI .btn-inscrever { color: #fff; } .btn-inscrever:hover { color: #2ABB9B; } .btn-inscrever.disabled:hover { color: #fff; } application.css
41. &: o seletor PAAAI h2 { font-size: 2.5em; } .sidebar h2 { font-size: 1.5em; } application.css
42. &: o seletor PAAAI h2 { font-size: 2.5em; .sidebar & { font-size: 1.5em; } } application.scss
43. Fácil, porém perigoso. http://s3-ec.buzzfed.com/static/2014-05/enhanced/webdr03/15/10/anigif_enhanced-buzz-29923-1400162648-5.gif
44. Variáveis
45. Variáveis: $ $color-base: #2b99e0; header { background-color: $color-base; } application.scss
46. Variáveis: Tipos // Booleanos $rounded: true; $last: false; application.scss
47. Variáveis: Tipos // Números (com ou sem unidade) $margin: 20px; $line-height:: 1.5; $font-size: 2em; application.scss
48. Variáveis: Tipos // Cores $base: red; $border-color: rgba(0, 0, 0, .4); $background-color: #333; application.scss
49. Variáveis: Tipos // Strings (com ou sem aspas) $font-base: Helvetica Neue; $default-alignment: left; application.scss
50. Variáveis: Tipos // Listas $organizadores: annabell bruna eduardo kalebe maira natalie ohana rodrigo thawan; $padding: 20px 0; application.scss
51. Variáveis: Tipos // Null $shadow: null; application.scss
52. Variáveis: Escopo #organizadores-section { $base-color: #fff; background-color: #a3d39c; color: $base-color; } hr { border-color: $base-color; } application.scss
53. Variáveis: Escopo #organizadores-section { $base-color: #fff; background-color: #a3d39c; color: $base-color; } hr { border-color: $base-color; } application.scss Erro de compilação
54. Variáveis: Escopo $base-color: #fff; #organizadores-section { $base-color: #333; background-color: #a3d39c; color: $base-color; } hr { border-color: $base-color; } application.scss
55. Variáveis: Escopo $base-color: #fff; #organizadores-section { $base-color: #333; background-color: #a3d39c; color: $base-color; } hr { border-color: $base-color; } #333, $base-color foi sobrescrito application.scss
56. Variáveis: Interpolação Use a interpolação igual a do Ruby #{$variavel} para completar seletores, propriedades ou valores.
57. Variáveis: Interpolação $side: top; .navbar-fixed-top { position: fixed; #{$side}: 0; } application.scss
58. Variáveis: Interpolação $side: top; .navbar-fixed-#{$side} { position: fixed; #{$side}: 0; } application.scss
59. Mixins
60. .btn-danger { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } application.css
61. .btn-danger { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } application.css
62. Mixins @mixin btn { background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } _buttons.scss
63. Mixins .btn-danger { @include btn; background-color: hsl(360, 82%, 44%); } .btn-success { @include btn; background-color: hsl(157, 43%, 44%); } _buttons.scss
64. .btn-danger { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } application.css
65. #palestrantes-section { background-color: #35404f; color: #fff; } #inscricao-section { background-color: #fff; color: #2ABB9B; } #patrocinadores-section { background-color: #e9e0d6; color: #fff; } application.css
66. #palestrantes-section { background-color: #35404f; color: #fff; } #inscricao-section { background-color: #fff; color: #2ABB9B; } #patrocinadores-section { background-color: #e9e0d6; color: #fff; } application.css
67. Mixins: Parâmetros @mixin section-colors($background, $color) { background-color: $background; color: $color; } application.scss
68. #palestrantes-section { @include section-colors(#35404f, #fff); } #inscricao-section { @include section-colors(#fff, #2ABB9B); } #patrocinadores-section { @include section-colors(#e9e0d6, #fff); } application.scss
69. #palestrantes-section { background-color: #35404f; color: #fff; } #inscricao-section { background-color: #fff; color: #2ABB9B; } #patrocinadores-section { background-color: #e9e0d6; color: #fff; } application.css
70. Parâmetros Opcionais @mixin section-colors($background, 
 $color: #fff) { background-color: $background; color: $color; } application.scss
71. #palestrantes-section { @include section-colors(#35404f); } #inscricao-section { @include section-colors(#fff, #2ABB9B); } #patrocinadores-section { @include section-colors(#e9e0d6, #fff); } application.scss
72. Parâmetro nomeado #palestrantes-section { @include section-colors($color: #fff, $background: #35404f); } application.scss
73. Extend
74. .btn-danger { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } .btn-success { @extend .btn-danger; background-color: hsl(157, 43%, 44%); } application.scss
75. .btn-danger, .btn-sucess { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); } application.css
76. .btn-danger { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } .btn-success { @extend .btn-danger; background-color: hsl(157, 43%, 44%); } .sidebar .btn-danger { text-transform: lowercase; } application.scss
77. .btn-danger, .btn-success { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); } .sidebar .btn-danger, .sidebar .btn-sucess { text-transform: lowercase; } application.scss
78. .btn-danger, .btn-success { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); } .sidebar .btn-danger, .sidebar .btn-sucess { text-transform: lowercase; } application.scss se não vamos usar, pra quê criar?
79. Placeholders %btn { background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } application.scss
80. .btn-danger { @extend %btn; background-color: hsl(360, 82%, 44%); } .btn-success { @extend %btn; background-color: hsl(157, 43%, 44%); } .sidebar .btn-danger { @extend %btn; text-transform: lowercase; } application.scss
81. .btn-danger, .btn-success { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); } .sidebar .btn-danger { text-transform: lowercase; } application.css
82. Recap mixins: grupos similares de propriedades usados várias vezes com pequenas variações
83. Recap mixins: grupos similares de propriedades usados várias vezes com pequenas variações extend: grupos de propriedades que são idênticos
84. Diretivas
85. @if @if (expressao) { } @else if (expressao) { } @else { } application.scss
86. @if $rounded: true; .btn { @if $rounded == true { border-radius: 10px; } } application.scss
87. @if .btn { border-radius: 10px; } application.css
88. @if if(expressao, true, false); application.scss
89. @if $rounded: true; .btn { border-radius: if($rounded, 10px, none); } application.scss
90. @if .btn { border-radius: 10px; } application.css
91. @each $list: foo bar baz; @each $element in $list { .#{$element} { } } application.scss
92. @each .foo { } .bar { } .baz { } application.css
93. @each $palestrantes: romulo almir bruna; @each $palestrante in $palestrantes { .palestrante-#{$palestrante} { background: url('foto-#{$palestrante}.jpg'); } } application.scss
94. .palestrante-romulo { background: url('foto-romulo.jpg'); } .palestrante-almir { background: url('foto-almir.jpg'); } .palestrante-bruna { background: url('foto-bruna.jpg'); } application.css
95. @for .item { @for $i from 1 through 3 { &.item-#{$i} { content: '#{$i}'; } } } application.scss
96. @for .item.item-1 { content: "1"; } .item.item-2 { content: "2"; } .item.item-3 { content: "3"; } application.css
97. @while $i: 1; .item { @while $i < 4 { &.item-#{$i} { content: '#{$i}'; } $i: $i + 1; } } application.scss
98. @while .item.item-1 { content: "1"; } .item.item-2 { content: "2"; } .item.item-3 { content: "3"; } application.css
99. Hands-on
100. Depois de usar: http://i.imgur.com/xR2li6t.gif
101. Obrigado! http://i.giphy.com/5xtDarmwsuR9sDRObyU.gif