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
870
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
100
What (Not) to Do
roy
0
81
You and the Big Stage
roy
0
50
Future of Preprocessors
roy
0
150
Make Them Click
roy
0
240
0 to 80 in 40 Minutes
roy
2
220
The Future of CSS Isn't CSS
roy
5
1k
Sass: With Great Power Comes Great Responsibility
roy
0
340
Front-End: Fun, Not Frustration
roy
1
1k
Other Decks in Programming
See All in Programming
Rust.Nagoya #1
codemountains
0
170
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
Introduction to GitOps
hwchiu
0
110
Jetpack for KMP
fornewid
1
290
Advanced App Shrinking Techniques
cbeyls
2
150
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Activities at Cairo Library
cairolibrary720
0
1.2k
Namespace on read
tagomoris
2
370
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
유연한 Composable 설계
l2hyunwoo
0
380
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Featured
See All Featured
Making Projects Easy
brettharned
111
5.7k
Become a Pro
speakerdeck
PRO
15
4.8k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Automating Front-end Workflow
addyosmani
1362
200k
How to Think Like a Performance Engineer
csswizardry
4
590
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Design by the Numbers
sachag
277
18k
It's Worth the Effort
3n
181
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Raft: Consensus for Rubyists
vanstee
134
6.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
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