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
Untangle your stylesheets with Sass
Search
Roy Tomeij
October 15, 2012
Programming
8
900
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
120
What (Not) to Do
roy
0
96
You and the Big Stage
roy
0
74
Future of Preprocessors
roy
0
170
Make Them Click
roy
0
290
0 to 80 in 40 Minutes
roy
2
250
The Future of CSS Isn't CSS
roy
5
1.1k
Sass: With Great Power Comes Great Responsibility
roy
0
390
Front-End: Fun, Not Frustration
roy
1
1.1k
Other Decks in Programming
See All in Programming
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
130
CSC509 Lecture 03
javiergs
PRO
0
340
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
580
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
1
170
CSC305 Lecture 03
javiergs
PRO
0
240
Leading Effective Engineering Teams in the AI Era
addyosmani
5
410
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
350
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
180
チームの境界をブチ抜いていけ
tokai235
0
170
XP, Testing and ninja testing ZOZ5
m_seki
3
650
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
A Tale of Four Properties
chriscoyier
161
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
910
Docker and Python
trallard
46
3.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Rails Girls Zürich Keynote
gr2m
95
14k
A better future with KSS
kneath
239
18k
We Have a Design System, Now What?
morganepeng
53
7.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Become a Pro
speakerdeck
PRO
29
5.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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