Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Untangle your stylesheets with Sass
Roy Tomeij
October 15, 2012
Programming
8
840
Untangle your stylesheets with Sass
As presented at FOWA London, FOWA Prague, Kings of Code and CodeConnexx.
Roy Tomeij
October 15, 2012
Tweet
Share
More Decks by Roy Tomeij
See All by Roy Tomeij
Empathy through Acting
roy
1
90
What (Not) to Do
roy
0
75
You and the Big Stage
roy
0
38
Future of Preprocessors
roy
0
140
Make Them Click
roy
0
210
0 to 80 in 40 Minutes
roy
2
180
The Future of CSS Isn't CSS
roy
5
850
Sass: With Great Power Comes Great Responsibility
roy
0
300
Front-End: Fun, Not Frustration
roy
1
1k
Other Decks in Programming
See All in Programming
レガシーフレームワークからの移行
ug
0
120
CDKでValidationする本当の方法 / cdk-validation
gotok365
1
200
What's new in Shopware 6.5
shyim
0
110
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
540
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
Azure Functionsをサクッと開発、サクッとデプロイ/vscodeconf2023-baba
nina01
1
340
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.8k
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
540
Rust、何もわからない...#6発表資料
ryu19
0
120
Jetpack Compose 完全に理解した
mkeeda
1
460
Swift Concurrency in GoodNotes
inamiy
4
1.3k
僕が考えた超最強のKMMアプリの作り方
spbaya0141
0
180
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
326
55k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Debugging Ruby Performance
tmm1
67
11k
Into the Great Unknown - MozCon
thekraken
2
290
Embracing the Ebb and Flow
colly
75
3.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Designing Experiences People Love
moore
130
22k
Transcript
Untangle your stylesheets untangle your stylesheets Roy Tomeij / @roy,
80beans
writing CSS isn’t fun
None
today’s lesson
back to basics
it’s just CSS
two syntaxes: SCSS & Sass .scss { width: 100%; }
.sass width: 100% SCSS Sass
variables $full-width: 100%; .foo { width: $full-width; } .foo {
width: 100%; } Sass CSS
nested rules .foo { width: 100%; a { color: #fff;
} } .foo { width: 100%; } .foo a { color: #fff; } Sass CSS
parent reference .foo { color: #000; &:hover { color: #fff;
} } .foo { color: #000; } .foo:hover { color: #fff; } Sass CSS
mixins @mixin hide-text { text-indent: -999px; overflow: hidden; } .foo
{ width: 100%; @include hide-text; } .foo { width: 100%; text-indent: -999px; overflow: hidden; } Sass CSS
selector inheritance .error { color: red; } .bad-error { @extend
.error; font-weight: bold; } .error, .bad-error { color: red; } .bad-error { font-weight: bold; } CSS Sass
data types $number: 1; $string: "Some string"; $color: blue; $color:
rgba(#f0f, 0.5); // Sass gets this! $boolean: true; $list: facebook, twitter, youtube;
operations $column: 10px; .foo { width: 10px + 2px; width:
2in + 8pt; width: $column / 2; } .foo { width: 12px; width: 2.11111in; width: 5px; } CSS Sass
None
control directives $network: linkedin; .foo { @if $network == twitter
{ background: blue; } @else if $network == youtube { background: red; } @else { background: magenta; } } Sass
control directives .foo { background: magenta; } CSS
control directives @each $network in twitter, facebook, youtube { .icon-#{$network}
{ background: url("#{$network}.png"); } } Sass
control directives .icon-twitter { background: url('twitter.png'); } .icon-facebook { background:
url('facebook.png'); } .icon-youtube { background: url('youtube.png'); } CSS
media queries h1 { width: 500px; @media (…) { width:
400px; } } h1 { width: 500px; } @media (…) { h1 { width: 400px; } } CSS Sass
shiny new features
placeholder selector %error { color: red; } .bad-error { @extend
%error; font-weight: bold; } .bad-error { color: red; } .bad-error { font-weight: bold; } CSS Sass
@content directive @mixin ie6 { * html { @content; }
} @include ie6 { .foo { color: red; } } * html .foo { color: red; } CSS Sass
let’s get creative
retina mixin @mixin retina { @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { @content; } } Sass
retina mixin h1 { background: url("image.png"); @include retina { background:
url("
[email protected]
"); } } Sass
retina mixin h1 { background: url('image.png'); } @media (min--moz-device-pixel-ratio: 1.5),
… { h1 { background: url('
[email protected]
'); } } CSS
making stuff fit
breakpoint media queries @mixin respond-to($device) { @if $device == tablet-portrait
{ @media (max-width: 768px) { @content; } } @else if ($device == phone-portrait) { @media (max-width: 320px) { @content; } } } Sass
breakpoint media queries h1 { width: 600px; @include respond-to(tablet-portrait) {
width: 100%; } @include respond-to(phone-portrait) { width: 200px; } } Sass
breakpoint media queries h1 { width: 600px; } @media (max-width:
768px) { h1 { width: 100%; } } … CSS
inline images .facebook { background: inline-image("facebook.png"); } .facebook { background:
url('data:image/png;base64,…'); } CSS Sass + Compass
inline images %facebook { background: inline-image("facebook.png"); } … CSS Sass
+ Compass
things you may not know
!comments /* Nothing... */ /*! Copyright 2012 */ /* Copyright
2012 */ CSS Sass
variable arguments @mixin foo($args...) { // $args is now a
list! } h1 { @include foo(#000, #fff, #ddd); } Sass
nested @import .foo { color: red; } somefile.sass
nested @import h1 { @import “somefile.sass”; } CSS h1 .foo
{ color: red; } Sass
questions? @roy
thanks shorpy.com! for the awesome pictures