Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Sass: CSS com superpoderes
Search
Rômulo Machado
November 05, 2014
Programming
1
170
Sass: CSS com superpoderes
Minicurso ministrado na SCTI-UENF/2014
Rômulo Machado
November 05, 2014
Tweet
Share
More Decks by Rômulo Machado
See All by Rômulo Machado
Ember.js: building better apps in less time
romulomachado
4
120
Por que usar pré-processadores CSS?
romulomachado
0
2k
Como se manter atualizado com tecnologias front-end
romulomachado
2
130
Desenvolvimento Front End: o que não te ensinaram na escola
romulomachado
2
160
Other Decks in Programming
See All in Programming
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
CSC509 Lecture 12
javiergs
PRO
0
160
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
150
最新TCAキャッチアップ
0si43
0
200
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
Jakarta EE meets AI
ivargrimstad
0
700
初めてDefinitelyTypedにPRを出した話
syumai
0
420
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
210
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
250
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Gamification - CAS2011
davidbonilla
80
5k
What's new in Ruby 2.0
geeforr
343
31k
4 Signs Your Business is Dying
shpigford
180
21k
Building an army of robots
kneath
302
43k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Navigating Team Friction
lara
183
14k
Bash Introduction
62gerente
608
210k
Unsuck your backbone
ammeep
668
57k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Transcript
Sass: CSS com superpoderes Rômulo Machado SCTI-UENF/2014 http://www.supermanhomepage.com/multimedia/Wallpaper-Images5/z121119-clark.jpg
http://cdn.churchm.ag/wp-content/uploads/2012/02/Mario-Lamp-2-2.jpg
http://indiaandhoney.files.wordpress.com/2013/08/tumblr_lrzakjtqrc1qee7ixo1_500.gif?w=490
Quando eu ouvi falar de Sass:
Minha primeira reação: http://i.imgur.com/t1QeXev.gif
CSS foi feito para ser simples.
CSS foi feito para ser simples. E de fato é.
O problema é quando o projeto cresce.
http://i.imgur.com/qk96ytw.gif
Sass é a solução!
– 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
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/
http://sassnotsass.com/
https://twitter.com/hcatlin/status/256142344431214592
.scss ou .sass?
SCSS Sass h1 { background: gray; color: blue; } h2
{ font-weight: bold; color: red; } h1 background: gray color: blue h2 font-weight: bold color: red
Instalação Mac e Linux: $ gem install sass $ sass
-v Sass 3.4.5 (Selective Steve) Windows http://rubyinstaller.org/
Uso $ sass --watch application.scss:application.css >>> Sass is watching for
changes. Press Ctrl-C to stop.
O que veremos hoje? • Comentários • Imports • Nesting
• Variáveis • Mixins • Extend • Diretivas • Hands-on
Comentários
// Estes comentários não vão // para o arquivo CSS
compilado /* este vai */ Comentários /* este vai */ application.scss application.css
Imports
@import (CSS) /* * Importa todos os estilos encontrados em
* 'buttons.css' quando o browser faz o * request de application.css * */ @import "buttons.css"; application.css
@import (Sass) /* * Importa os estilos encontrados em *
'buttons.css' quando o compilador * for processar application.css * */ @import "buttons"; application.scss
Import application.scss application.css buttons.scss
Import application.scss application.css buttons.scss buttons.css
Import (Partials) application.scss application.css _buttons.scss
@import (Sass) /* * Vai buscar por _buttons.sass, * buttons.sass,
_buttons.scss ou * buttons.scss e importar. * */ @import "buttons"; application.scss
Nesting
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
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
Nesting (propriedades) a { text: { decoration: none; transform: uppercase;
} } application.scss
&: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden;
.image { width: 100%; } } application.scss
&: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden;
} .browser-shot-1 .image { width: 100%; } application.css
&: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden;
} .browser-shot-1 .image { width: 100%; } application.css .image dentro de .browser-shot-1
&: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden;
&.active { bottom: -40px; } } application.scss
&: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden;
} .browser-shot-1.active { bottom: -40px; } application.css
&: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden;
} .browser-shot-1.active { bottom: -40px; } application.css elemento que tem as duas classes
&: o seletor PAAAI .btn-inscrever { color: #fff; &:hover {
color: #2ABB9B; } &.disabled:hover { color: #fff; } } application.scss
&: o seletor PAAAI .btn-inscrever { color: #fff; } .btn-inscrever:hover
{ color: #2ABB9B; } .btn-inscrever.disabled:hover { color: #fff; } application.css
&: o seletor PAAAI h2 { font-size: 2.5em; } .sidebar
h2 { font-size: 1.5em; } application.css
&: o seletor PAAAI h2 { font-size: 2.5em; .sidebar &
{ font-size: 1.5em; } } application.scss
Fácil, porém perigoso. http://s3-ec.buzzfed.com/static/2014-05/enhanced/webdr03/15/10/anigif_enhanced-buzz-29923-1400162648-5.gif
Variáveis
Variáveis: $ $color-base: #2b99e0; header { background-color: $color-base; } application.scss
Variáveis: Tipos // Booleanos $rounded: true; $last: false; application.scss
Variáveis: Tipos // Números (com ou sem unidade) $margin: 20px;
$line-height:: 1.5; $font-size: 2em; application.scss
Variáveis: Tipos // Cores $base: red; $border-color: rgba(0, 0, 0,
.4); $background-color: #333; application.scss
Variáveis: Tipos // Strings (com ou sem aspas) $font-base: Helvetica
Neue; $default-alignment: left; application.scss
Variáveis: Tipos // Listas $organizadores: annabell bruna eduardo kalebe maira
natalie ohana rodrigo thawan; $padding: 20px 0; application.scss
Variáveis: Tipos // Null $shadow: null; application.scss
Variáveis: Escopo #organizadores-section { $base-color: #fff; background-color: #a3d39c; color: $base-color;
} hr { border-color: $base-color; } application.scss
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
Variáveis: Escopo $base-color: #fff; #organizadores-section { $base-color: #333; background-color: #a3d39c;
color: $base-color; } hr { border-color: $base-color; } application.scss
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
Variáveis: Interpolação Use a interpolação igual a do Ruby #{$variavel}
para completar seletores, propriedades ou valores.
Variáveis: Interpolação $side: top; .navbar-fixed-top { position: fixed; #{$side}: 0;
} application.scss
Variáveis: Interpolação $side: top; .navbar-fixed-#{$side} { position: fixed; #{$side}: 0;
} application.scss
Mixins
.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
.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
Mixins @mixin btn { background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased;
} _buttons.scss
Mixins .btn-danger { @include btn; background-color: hsl(360, 82%, 44%); }
.btn-success { @include btn; background-color: hsl(157, 43%, 44%); } _buttons.scss
.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
#palestrantes-section { background-color: #35404f; color: #fff; } #inscricao-section { background-color:
#fff; color: #2ABB9B; } #patrocinadores-section { background-color: #e9e0d6; color: #fff; } application.css
#palestrantes-section { background-color: #35404f; color: #fff; } #inscricao-section { background-color:
#fff; color: #2ABB9B; } #patrocinadores-section { background-color: #e9e0d6; color: #fff; } application.css
Mixins: Parâmetros @mixin section-colors($background, $color) { background-color: $background; color: $color;
} application.scss
#palestrantes-section { @include section-colors(#35404f, #fff); } #inscricao-section { @include section-colors(#fff,
#2ABB9B); } #patrocinadores-section { @include section-colors(#e9e0d6, #fff); } application.scss
#palestrantes-section { background-color: #35404f; color: #fff; } #inscricao-section { background-color:
#fff; color: #2ABB9B; } #patrocinadores-section { background-color: #e9e0d6; color: #fff; } application.css
Parâmetros Opcionais @mixin section-colors($background, $color: #fff) { background-color: $background;
color: $color; } application.scss
#palestrantes-section { @include section-colors(#35404f); } #inscricao-section { @include section-colors(#fff, #2ABB9B);
} #patrocinadores-section { @include section-colors(#e9e0d6, #fff); } application.scss
Parâmetro nomeado #palestrantes-section { @include section-colors($color: #fff, $background: #35404f); }
application.scss
Extend
.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
.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
.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
.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
.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?
Placeholders %btn { background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; }
application.scss
.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
.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
Recap mixins: grupos similares de propriedades usados várias vezes com
pequenas variações
Recap mixins: grupos similares de propriedades usados várias vezes com
pequenas variações extend: grupos de propriedades que são idênticos
Diretivas
@if @if (expressao) { } @else if (expressao) { }
@else { } application.scss
@if $rounded: true; .btn { @if $rounded == true {
border-radius: 10px; } } application.scss
@if .btn { border-radius: 10px; } application.css
@if if(expressao, true, false); application.scss
@if $rounded: true; .btn { border-radius: if($rounded, 10px, none); }
application.scss
@if .btn { border-radius: 10px; } application.css
@each $list: foo bar baz; @each $element in $list {
.#{$element} { } } application.scss
@each .foo { } .bar { } .baz { }
application.css
@each $palestrantes: romulo almir bruna; @each $palestrante in $palestrantes {
.palestrante-#{$palestrante} { background: url('foto-#{$palestrante}.jpg'); } } application.scss
.palestrante-romulo { background: url('foto-romulo.jpg'); } .palestrante-almir { background: url('foto-almir.jpg'); }
.palestrante-bruna { background: url('foto-bruna.jpg'); } application.css
@for .item { @for $i from 1 through 3 {
&.item-#{$i} { content: '#{$i}'; } } } application.scss
@for .item.item-1 { content: "1"; } .item.item-2 { content: "2";
} .item.item-3 { content: "3"; } application.css
@while $i: 1; .item { @while $i < 4 {
&.item-#{$i} { content: '#{$i}'; } $i: $i + 1; } } application.scss
@while .item.item-1 { content: "1"; } .item.item-2 { content: "2";
} .item.item-3 { content: "3"; } application.css
Hands-on
Depois de usar: http://i.imgur.com/xR2li6t.gif
Obrigado! http://i.giphy.com/5xtDarmwsuR9sDRObyU.gif