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
98
What (Not) to Do
roy
0
81
You and the Big Stage
roy
0
45
Future of Preprocessors
roy
0
150
Make Them Click
roy
0
230
0 to 80 in 40 Minutes
roy
2
210
The Future of CSS Isn't CSS
roy
5
990
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
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
410
Fragment Composition of GraphQL
quramy
14
1.7k
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
Sheets API使ってみた
toshi0383
2
180
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
610
freeeのエンジニアが 就活で出そうな コーディングテストを 解説してみる
freee
1
160
Adding Security to Microcontroller Ruby
sylph01
1
160
『WordPressコミュニティで学ぶ』OSS貢献の多様性
ippey
0
240
チーム立ち上げにAWSを活用したらClaudeさんに褒められた話
mkdev10
3
230
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
2
480
スタックトレース始めてみた
kuro_kurorrr
4
1.1k
Deep Dive into React Stream/Serialize
mugi_uno
4
860
Featured
See All Featured
Bash Introduction
62gerente
605
210k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
KATA
mclloyd
16
12k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Web development in the modern age
philhawksworth
203
10k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Facilitating Awesome Meetings
lara
43
5.6k
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