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
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
20
10k
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
220
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
430
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
170
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
複雑なドメインに挑む.pdf
yukisakai1225
5
1k
TDD 実践ミニトーク
contour_gara
1
290
print("Hello, World")
eddie
1
510
Improving my own Ruby thereafter
sisshiki1969
1
160
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
240
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
270
🔨 小さなビルドシステムを作る
momeemt
3
660
Featured
See All Featured
The Language of Interfaces
destraynor
161
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Fireside Chat
paigeccino
39
3.6k
Designing Experiences People Love
moore
142
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
The Cult of Friendly URLs
andyhume
79
6.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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