Untangle your stylesheets with Sass

Slide 1

Slide 1 text

Untangle your stylesheets untangle your stylesheets Roy Tomeij / @roy, 80beans

Slide 2

Slide 2 text

writing CSS isn’t fun

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

today’s lesson

Slide 5

Slide 5 text

back to basics

Slide 6

Slide 6 text

it’s just CSS

Slide 7

Slide 7 text

two syntaxes: SCSS & Sass .scss { width: 100%; } .sass width: 100% SCSS Sass

Slide 8

Slide 8 text

variables $full-width: 100%; .foo { width: $full-width; } .foo { width: 100%; } Sass CSS

Slide 9

Slide 9 text

nested rules .foo { width: 100%; a { color: #fff; } } .foo { width: 100%; } .foo a { color: #fff; } Sass CSS

Slide 10

Slide 10 text

parent reference .foo { color: #000; &:hover { color: #fff; } } .foo { color: #000; } .foo:hover { color: #fff; } Sass CSS

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

selector inheritance .error { color: red; } .bad-error { @extend .error; font-weight: bold; } .error, .bad-error { color: red; } .bad-error { font-weight: bold; } CSS Sass

Slide 13

Slide 13 text

data types $number: 1; $string: "Some string"; $color: blue; $color: rgba(#f0f, 0.5); // Sass gets this! $boolean: true; $list: facebook, twitter, youtube;

Slide 14

Slide 14 text

operations $column: 10px; .foo { width: 10px + 2px; width: 2in + 8pt; width: $column / 2; } .foo { width: 12px; width: 2.11111in; width: 5px; } CSS Sass

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

control directives $network: linkedin; .foo { @if $network == twitter { background: blue; } @else if $network == youtube { background: red; } @else { background: magenta; } } Sass

Slide 17

Slide 17 text

control directives .foo { background: magenta; } CSS

Slide 18

Slide 18 text

control directives @each $network in twitter, facebook, youtube { .icon-#{$network} { background: url("#{$network}.png"); } } Sass

Slide 19

Slide 19 text

control directives .icon-twitter { background: url('twitter.png'); } .icon-facebook { background: url('facebook.png'); } .icon-youtube { background: url('youtube.png'); } CSS

Slide 20

Slide 20 text

media queries h1 { width: 500px; @media (…) { width: 400px; } } h1 { width: 500px; } @media (…) { h1 { width: 400px; } } CSS Sass

Slide 21

Slide 21 text

shiny new features

Slide 22

Slide 22 text

placeholder selector %error { color: red; } .bad-error { @extend %error; font-weight: bold; } .bad-error { color: red; } .bad-error { font-weight: bold; } CSS Sass

Slide 23

Slide 23 text

@content directive @mixin ie6 { * html { @content; } } @include ie6 { .foo { color: red; } } * html .foo { color: red; } CSS Sass

Slide 24

Slide 24 text

let’s get creative

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

retina mixin h1 { background: url("image.png"); @include retina { background: url("image@2X.png"); } } Sass

Slide 27

Slide 27 text

retina mixin h1 { background: url('image.png'); } @media (min--moz-device-pixel-ratio: 1.5), … { h1 { background: url('image@2X.png'); } } CSS

Slide 28

Slide 28 text

making stuff fit

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

breakpoint media queries h1 { width: 600px; @include respond-to(tablet-portrait) { width: 100%; } @include respond-to(phone-portrait) { width: 200px; } } Sass

Slide 31

Slide 31 text

breakpoint media queries h1 { width: 600px; } @media (max-width: 768px) { h1 { width: 100%; } } … CSS

Slide 32

Slide 32 text

inline images .facebook { background: inline-image("facebook.png"); } .facebook { background: url('data:image/png;base64,…'); } CSS Sass + Compass

Slide 33

Slide 33 text

inline images %facebook { background: inline-image("facebook.png"); } … CSS Sass + Compass

Slide 34

Slide 34 text

things you may not know

Slide 35

Slide 35 text

Slide 36

Slide 36 text

variable arguments @mixin foo($args...) { // $args is now a list! } h1 { @include foo(#000, #fff, #ddd); } Sass

Slide 37

Slide 37 text

nested @import .foo { color: red; } somefile.sass

Slide 38

Slide 38 text

nested @import h1 { @import “somefile.sass”; } CSS h1 .foo { color: red; } Sass