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
130
Por que usar pré-processadores CSS?
romulomachado
0
2.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
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
PicoRuby on Rails
makicamel
3
140
NPOでのDevinの活用
codeforeveryone
0
910
Model Pollution
hschwentner
1
160
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
190
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.8k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
520
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
520
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
What's in a price? How to price your products and services
michaelherold
246
12k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Faster Mobile Websites
deanohume
308
31k
Building an army of robots
kneath
306
45k
How to Ace a Technical Interview
jacobian
278
23k
A designer walks into a library…
pauljervisheath
207
24k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Invisible Side of Design
smashingmag
301
51k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
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