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
1.9k
Como se manter atualizado com tecnologias front-end
romulomachado
2
120
Desenvolvimento Front End: o que não te ensinaram na escola
romulomachado
2
150
Other Decks in Programming
See All in Programming
Deep Dive into React Stream/Serialize
mugi_uno
4
880
An adventure of Happy Eyeballs
coe401_
1
310
Good first issues of TypeProf
mame
4
930
RustでAWS Lambda functionをいい感じに書く
taiki45
2
160
The test code generator using static analysis and LLM
mikik0
1
290
TypeScript Custom GitHub Action Development Tips
peaceiris
5
860
Long journey of Ruby standard library RubyKaigi 2024
andpad
2
300
Productivity is Messing Around and Having Fun
hollycummins
1
190
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
200
一文字エイリアスのすすめ
fujimura
0
200
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
nyawach
5
330
酒飲んでたらテックリードになった話
spbaya0141
0
210
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
Code Review Best Practice
trishagee
56
15k
Visualization
eitanlees
137
14k
Optimizing for Happiness
mojombo
371
69k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
How to name files
jennybc
65
94k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
For a Future-Friendly Web
brad_frost
172
9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
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