Sass: CSS com superpoderes

Slide 1

Slide 1 text

Sass: CSS com superpoderes Rômulo Machado SCTI-UENF/2014 http://www.supermanhomepage.com/multimedia/Wallpaper-Images5/z121119-clark.jpg

Slide 2

Slide 2 text

http://cdn.churchm.ag/wp-content/uploads/2012/02/Mario-Lamp-2-2.jpg

Slide 3

Slide 3 text

http://indiaandhoney.ﬁles.wordpress.com/2013/08/tumblr_lrzakjtqrc1qee7ixo1_500.gif?w=490

Slide 4

Slide 4 text

Quando eu ouvi falar de Sass:

Slide 5

Slide 5 text

Minha primeira reação: http://i.imgur.com/t1QeXev.gif

Slide 6

Slide 6 text

CSS foi feito para ser simples.

Slide 7

Slide 7 text

CSS foi feito para ser simples. E de fato é.

Slide 8

Slide 8 text

O problema é quando o projeto cresce.

Slide 9

Slide 9 text

http://i.imgur.com/qk96ytw.gif

Slide 10

Slide 10 text

Sass é a solução!

Slide 11

Slide 11 text

– 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

Slide 12

Slide 12 text

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.iconﬁnder.com/

Slide 13

Slide 13 text

http://sassnotsass.com/

Slide 14

Slide 14 text

https://twitter.com/hcatlin/status/256142344431214592

Slide 15

Slide 15 text

.scss ou .sass?

Slide 16

Slide 16 text

SCSS Sass h1 { background: gray; color: blue; } h2 { font-weight: bold; color: red; } h1 background: gray color: blue h2 font-weight: bold color: red

Slide 17

Slide 17 text

Instalação Mac e Linux: $ gem install sass $ sass -v Sass 3.4.5 (Selective Steve) Windows http://rubyinstaller.org/

Slide 18

Slide 18 text

Uso $ sass --watch application.scss:application.css >>> Sass is watching for changes. Press Ctrl-C to stop.

Slide 19

Slide 19 text

O que veremos hoje? • Comentários  • Imports  • Nesting  • Variáveis • Mixins  • Extend  • Diretivas  • Hands-on

Slide 20

Slide 20 text

Comentários

Slide 21

Slide 21 text

// Estes comentários não vão // para o arquivo CSS compilado /* este vai */ Comentários /* este vai */ application.scss application.css

Slide 22

Slide 22 text

Imports

Slide 23

Slide 23 text

@import (CSS) /* * Importa todos os estilos encontrados em * 'buttons.css' quando o browser faz o * request de application.css * */ @import "buttons.css"; application.css

Slide 24

Slide 24 text

@import (Sass) /* * Importa os estilos encontrados em * 'buttons.css' quando o compilador * for processar application.css * */ @import "buttons"; application.scss

Slide 25

Slide 25 text

Import application.scss application.css buttons.scss

Slide 26

Slide 26 text

Import application.scss application.css buttons.scss buttons.css

Slide 27

Slide 27 text

Import (Partials) application.scss application.css _buttons.scss

Slide 28

Slide 28 text

@import (Sass) /* * Vai buscar por _buttons.sass, * buttons.sass, _buttons.scss ou * buttons.scss e importar. * */ @import "buttons"; application.scss

Slide 29

Slide 29 text

Nesting

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Nesting (propriedades) a { text: { decoration: none; transform: uppercase; } } application.scss

Slide 33

Slide 33 text

&: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden; .image { width: 100%; } } application.scss

Slide 34

Slide 34 text

&: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden; } .browser-shot-1 .image { width: 100%; } application.css

Slide 35

Slide 35 text

&: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden; } .browser-shot-1 .image { width: 100%; } application.css .image dentro de .browser-shot-1

Slide 36

Slide 36 text

&: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden; &.active { bottom: -40px; } } application.scss

Slide 37

Slide 37 text

&: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden; } .browser-shot-1.active { bottom: -40px; } application.css

Slide 38

Slide 38 text

&: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden; } .browser-shot-1.active { bottom: -40px; } application.css elemento que tem  as duas classes

Slide 39

Slide 39 text

&: o seletor PAAAI .btn-inscrever { color: #fff; &:hover { color: #2ABB9B; } &.disabled:hover { color: #fff; } } application.scss

Slide 40

Slide 40 text

&: o seletor PAAAI .btn-inscrever { color: #fff; } .btn-inscrever:hover { color: #2ABB9B; } .btn-inscrever.disabled:hover { color: #fff; } application.css

Slide 41

Slide 41 text

&: o seletor PAAAI h2 { font-size: 2.5em; } .sidebar h2 { font-size: 1.5em; } application.css

Slide 42

Slide 42 text

&: o seletor PAAAI h2 { font-size: 2.5em; .sidebar & { font-size: 1.5em; } } application.scss

Slide 43

Slide 43 text

Fácil, porém perigoso. http://s3-ec.buzzfed.com/static/2014-05/enhanced/webdr03/15/10/anigif_enhanced-buzz-29923-1400162648-5.gif

Slide 44

Slide 44 text

Variáveis

Slide 45

Slide 45 text

Variáveis: $ $color-base: #2b99e0; header { background-color: $color-base; } application.scss

Slide 46

Slide 46 text

Variáveis: Tipos // Booleanos $rounded: true; $last: false; application.scss

Slide 47

Slide 47 text

Variáveis: Tipos // Números (com ou sem unidade) $margin: 20px; $line-height:: 1.5; $font-size: 2em; application.scss

Slide 48

Slide 48 text

Variáveis: Tipos // Cores $base: red; $border-color: rgba(0, 0, 0, .4); $background-color: #333; application.scss

Slide 49

Slide 49 text

Variáveis: Tipos // Strings (com ou sem aspas) $font-base: Helvetica Neue; $default-alignment: left; application.scss

Slide 50

Slide 50 text

Variáveis: Tipos // Listas $organizadores: annabell bruna eduardo kalebe maira natalie ohana rodrigo thawan; $padding: 20px 0; application.scss

Slide 51

Slide 51 text

Variáveis: Tipos // Null $shadow: null; application.scss

Slide 52

Slide 52 text

Variáveis: Escopo #organizadores-section { $base-color: #fff; background-color: #a3d39c; color: $base-color; } hr { border-color: $base-color; } application.scss

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Variáveis: Escopo $base-color: #fff; #organizadores-section { $base-color: #333; background-color: #a3d39c; color: $base-color; } hr { border-color: $base-color; } application.scss

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Variáveis: Interpolação Use a interpolação igual a do Ruby #{$variavel} para completar seletores, propriedades ou valores.

Slide 57

Slide 57 text

Variáveis: Interpolação $side: top; .navbar-fixed-top { position: fixed; #{$side}: 0; } application.scss

Slide 58

Slide 58 text

Variáveis: Interpolação $side: top; .navbar-fixed-#{$side} { position: fixed; #{$side}: 0; } application.scss

Slide 59

Slide 59 text

Mixins

Slide 60

Slide 60 text

.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

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Mixins @mixin btn { background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } _buttons.scss

Slide 63

Slide 63 text

Mixins .btn-danger { @include btn; background-color: hsl(360, 82%, 44%); } .btn-success { @include btn; background-color: hsl(157, 43%, 44%); } _buttons.scss

Slide 64

Slide 64 text

Slide 65

Slide 65 text

#palestrantes-section { background-color: #35404f; color: #fff; } #inscricao-section { background-color: #fff; color: #2ABB9B; } #patrocinadores-section { background-color: #e9e0d6; color: #fff; } application.css

Slide 66

Slide 66 text

Slide 67

Slide 67 text

Mixins: Parâmetros @mixin section-colors($background, $color) { background-color: $background; color: $color; } application.scss

Slide 68

Slide 68 text

#palestrantes-section { @include section-colors(#35404f, #fff); } #inscricao-section { @include section-colors(#fff, #2ABB9B); } #patrocinadores-section { @include section-colors(#e9e0d6, #fff); } application.scss

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Parâmetros Opcionais @mixin section-colors($background,   $color: #fff) { background-color: $background; color: $color; } application.scss

Slide 71

Slide 71 text

#palestrantes-section { @include section-colors(#35404f); } #inscricao-section { @include section-colors(#fff, #2ABB9B); } #patrocinadores-section { @include section-colors(#e9e0d6, #fff); } application.scss

Slide 72

Slide 72 text

Parâmetro nomeado #palestrantes-section { @include section-colors($color: #fff, $background: #35404f); } application.scss

Slide 73

Slide 73 text

Extend

Slide 74

Slide 74 text

.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

Slide 75

Slide 75 text

.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

Slide 76

Slide 76 text

Slide 77

Slide 77 text

.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

Slide 78

Slide 78 text

Slide 79

Slide 79 text

Placeholders %btn { background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } application.scss

Slide 80

Slide 80 text

.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

Slide 81

Slide 81 text

Slide 82

Slide 82 text

Recap mixins: grupos similares de propriedades usados várias vezes com pequenas variações

Slide 83

Slide 83 text

Recap mixins: grupos similares de propriedades usados várias vezes com pequenas variações extend: grupos de propriedades que são idênticos

Slide 84

Slide 84 text

Diretivas

Slide 85

Slide 85 text

@if @if (expressao) { } @else if (expressao) { } @else { } application.scss

Slide 86

Slide 86 text

@if $rounded: true; .btn { @if $rounded == true { border-radius: 10px; } } application.scss

Slide 87

Slide 87 text

@if .btn { border-radius: 10px; } application.css

Slide 88

Slide 88 text

@if if(expressao, true, false); application.scss

Slide 89

Slide 89 text

@if $rounded: true; .btn { border-radius: if($rounded, 10px, none); } application.scss

Slide 90

Slide 90 text

@if .btn { border-radius: 10px; } application.css

Slide 91

Slide 91 text

@each $list: foo bar baz; @each $element in $list { .#{$element} { } } application.scss

Slide 92

Slide 92 text

@each .foo { } .bar { } .baz { } application.css

Slide 93

Slide 93 text

@each $palestrantes: romulo almir bruna; @each $palestrante in $palestrantes { .palestrante-#{$palestrante} { background: url('foto-#{$palestrante}.jpg'); } } application.scss

Slide 94

Slide 94 text

.palestrante-romulo { background: url('foto-romulo.jpg'); } .palestrante-almir { background: url('foto-almir.jpg'); } .palestrante-bruna { background: url('foto-bruna.jpg'); } application.css

Slide 95

Slide 95 text

@for .item { @for $i from 1 through 3 { &.item-#{$i} { content: '#{$i}'; } } } application.scss

Slide 96

Slide 96 text

@for .item.item-1 { content: "1"; } .item.item-2 { content: "2"; } .item.item-3 { content: "3"; } application.css

Slide 97

Slide 97 text

@while $i: 1; .item { @while $i < 4 { &.item-#{$i} { content: '#{$i}'; } $i: $i + 1; } } application.scss

Slide 98

Slide 98 text

@while .item.item-1 { content: "1"; } .item.item-2 { content: "2"; } .item.item-3 { content: "3"; } application.css