Tweet
Tweet

Slide 1

Slide 1 text

CLEAN CSS WITH SASS AND BOURBON @PHIL LAPIER DESIGNER THOUGHTBOT

Slide 2

Slide 2 text

CSS

Slide 3

Slide 3 text

PAST ➞ PRESENT⇢ FUTURE

Slide 4

Slide 4 text

PAST ➞ PRESENT⇢ FUTURE CSS 1 CSS 2 CSS 2.1

Slide 5

Slide 5 text

CSS 2.1 aka “dinosaur”

Slide 6

Slide 6 text

BONUS ROUND but first...

Slide 7

Slide 7 text

What month & year did CSS 2.1 reach official recommendation stage?

Slide 8

Slide 8 text

June 7, 2011

Slide 9

Slide 9 text

PAST ➞ PRESENT⇢ FUTURE CSS 2.1 CSS 3 CSS 1 CSS 2 CSS 2.1

Slide 10

Slide 10 text

CSS 3 ZOMG, the future!

Slide 11

Slide 11 text

NEW SELECTORS

Slide 12

Slide 12 text

BORDER-RADIUS

Slide 13

Slide 13 text

BOX-SHADOWS

Slide 14

Slide 14 text

GRADIENTS

Slide 15

Slide 15 text

ANIMATIONS

Slide 16

Slide 16 text

VENDOR PREFIXES

Slide 17

Slide 17 text

-WEBKIT- -MOZ- -MS- -O-

Slide 18

Slide 18 text

SECTION#BORDER-IMAGE SECTION.DEMO{-WEBKIT-BORDER-IMAGE:URL(../IMAGES/BORDER.PNG) 27 REPEAT;-MOZ-BORDER-IMAGE:URL(../IMAGES/BORDER.PNG) 27 REPEAT;-O-BORDER-IMAGE:URL(../IMAGES/BORDER.PNG) 27 REPEAT;BORDER-IMAGE:URL(../IMAGES/BORDER.PNG) 27 REPEAT;WIDTH:81PX;HEIGHT:27PX;BORDER- WIDTH:27PX}SECTION#BOX-SHADOW SECTION.DEMO DIV.EXAMPLE{BACKGROUND-IMAGE:LINEAR-GRADIENT(TOP,#8FDCE5,#3DC3D1);HEIGHT:50PX;WIDTH:100PX} SECTION#BOX-SHADOW SECTION.DEMO DIV.EXAMPLE.SINGLE{-WEBKIT-BOX-SHADOW:0 0 5PX 3PX RGBA(0,0,0,0.65);-MOZ-BOX-SHADOW:0 0 5PX 3PX RGBA(0,0,0,0.65);BOX-SHADOW:0 0 5PX 3PX RGBA(0,0,0,0.65)}SECTION#BOX-SHADOW SECTION.DEMO DIV.EXAMPLE.DOUBLE{-WEBKIT-BOX-SHADOW:1PX 1PX 5PX 1PX GREEN, -1PX -1PX 5PX 1PX BLUE;-MOZ-BOX-SHADOW:1PX 1PX 5PX 1PX GREEN, -1PX -1PX 5PX 1PX BLUE;BOX-SHADOW:1PX 1PX 5PX 1PX GREEN, -1PX -1PX 5PX 1PX BLUE} SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-1{BORDER:1PX SOLID #076FE4;-WEBKIT-BORDER-RADIUS:3PX;-MOZ-BORDER-RADIUS:3PX;BORDER-RADIUS:3PX;- WEBKIT-BOX-SHADOW:INSET 0 1PX 0 0 #8EBCF1;-MOZ-BOX-SHADOW:INSET 0 1PX 0 0 #8EBCF1;BOX-SHADOW:INSET 0 1PX 0 0 #8EBCF1;COLOR:#FFF;DISPLAY:INLINE- BLOCK;FONT-SIZE:11PX;FONT-WEIGHT:700;BACKGROUND-COLOR:#4294F0;BACKGROUND-IMAGE:LINEAR-GRADIENT(TOP,#4294F0,#0776F3);TEXT- DECORATION:NONE;TEXT-SHADOW:0 1PX 0 #0065D6;-WEBKIT-BACKGROUND-CLIP:PADDING-BOX;PADDING:7PX 18PX}SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-1:HOVER{-WEBKIT-BOX-SHADOW:INSET 0 1PX 0 0 #60A2EC;-MOZ-BOX-SHADOW:INSET 0 1PX 0 0 #60A2EC;BOX-SHADOW:INSET 0 1PX 0 0 #60A2EC;CURSOR:POINTER;BACKGROUND-COLOR:#2F87EA;BACKGROUND-IMAGE:LINEAR-GRADIENT(TOP,#2F87EA,#086FE3)}SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-1:ACTIVE{BORDER:1PX SOLID #076FE4;-WEBKIT-BOX-SHADOW:INSET 0 0 8PX 4PX #0868D3, INSET 0 0 8PX 4PX #0868D3, 0 1PX 1PX 0 #EEE;-MOZ- BOX-SHADOW:INSET 0 0 8PX 4PX #0868D3, INSET 0 0 8PX 4PX #0868D3, 0 1PX 1PX 0 #EEE;BOX-SHADOW:INSET 0 0 8PX 4PX #0868D3, INSET 0 0 8PX 4PX #0868D3, 0 1PX 1PX 0 #EEE}SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-2{BORDER:1PX SOLID #3371B2;-WEBKIT-BORDER-RADIUS:16PX;-MOZ-BORDER-RADIUS: 16PX;BORDER-RADIUS:16PX;-WEBKIT-BOX-SHADOW:INSET 0 1PX 0 0 #64A9F2, 0 1PX 2PX 0 #B3B3B3;-MOZ-BOX-SHADOW:INSET 0 1PX 0 0 #64A9F2, 0 1PX 2PX 0 #B3B3B3;BOX-SHADOW:INSET 0 1PX 0 0 #64A9F2, 0 1PX 2PX 0 #B3B3B3;COLOR:#FFF;DISPLAY:INLINE-BLOCK;FONT-SIZE:11PX;FONT-WEIGHT:400;LINE-HEIGHT: 1;BACKGROUND-COLOR:#4294F0;BACKGROUND-IMAGE:LINEAR-GRADIENT(TOP,#4294F0,#0156FE);TEXT-ALIGN:CENTER;TEXT-DECORATION:NONE;TEXT-SHADOW:0 -1PX 1PX #2762BF;-WEBKIT-BACKGROUND-CLIP:PADDING-BOX;BORDER-COLOR:#3371B2 #2457A3 #164297;PADDING:5PX 16PX}SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-2:HOVER{BORDER:1PX SOLID #2062A7;-WEBKIT-BOX-SHADOW:INSET 0 1PX 0 0 #519CF0;-MOZ-BOX-SHADOW:INSET 0 1PX 0 0 #519CF0;BOX- SHADOW:INSET 0 1PX 0 0 #519CF0;CURSOR:POINTER;BACKGROUND-COLOR:#2D88EE;BACKGROUND-IMAGE:LINEAR-GRADIENT(TOP,#2D88EE,#1554CE);TEXT-SHADOW: 0 -1PX 1PX #134FAF;-WEBKIT-BACKGROUND-CLIP:PADDING-BOX;BORDER-COLOR:#2062A7 #0E479A #01318E}SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-2:ACTIVE{BACKGROUND:#226EDD;BORDER:1PX SOLID #0D3C8C;BORDER-BOTTOM:1PX SOLID #062D8D;-WEBKIT-BOX-SHADOW:INSET 0 0 6PX 3PX #0C44B8, 0 1PX 0 0 #FFF;-MOZ-BOX-SHADOW:INSET 0 0 6PX 3PX #0C44B8, 0 1PX 0 0 #FFF;BOX-SHADOW:INSET 0 0 6PX 3PX #0C44B8, 0 1PX 0 0 #FFF;TEXT-SHADOW: 0 -1PX 1PX #1A52AA}SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-3{BORDER:1PX SOLID #8A0000;BORDER-BOTTOM:1PX SOLID #810000;-WEBKIT-BORDER- RADIUS:5PX;-MOZ-BORDER-RADIUS:5PX;BORDER-RADIUS:5PX;-WEBKIT-BOX-SHADOW:INSET 0 1PX 0 0 #FF1D0C;-MOZ-BOX-SHADOW:INSET 0 1PX 0 0 #FF1D0C;BOX-

Slide 19

Slide 19 text

SECTION#BORDER-IMAGE SECTION.DEMO{-WEBKIT-BORDER-IMAGE:URL(../IMAGES/BORDER.PNG) 27 REPEAT;-MOZ-BORDER-IMAGE:URL(../IMAGES/BORDER.PNG) 27 REPEAT;-O-BORDER-IMAGE:URL(../IMAGES/BORDER.PNG) 27 REPEAT;BORDER-IMAGE:URL(../IMAGES/BORDER.PNG) 27 REPEAT;WIDTH:81PX;HEIGHT:27PX;BORDER- WIDTH:27PX}SECTION#BOX-SHADOW SECTION.DEMO DIV.EXAMPLE{BACKGROUND-IMAGE:LINEAR-GRADIENT(TOP,#8FDCE5,#3DC3D1);HEIGHT:50PX;WIDTH:100PX} SECTION#BOX-SHADOW SECTION.DEMO DIV.EXAMPLE.SINGLE{-WEBKIT-BOX-SHADOW:0 0 5PX 3PX RGBA(0,0,0,0.65);-MOZ-BOX-SHADOW:0 0 5PX 3PX RGBA(0,0,0,0.65);BOX-SHADOW:0 0 5PX 3PX RGBA(0,0,0,0.65)}SECTION#BOX-SHADOW SECTION.DEMO DIV.EXAMPLE.DOUBLE{-WEBKIT-BOX-SHADOW:1PX 1PX 5PX 1PX GREEN, -1PX -1PX 5PX 1PX BLUE;-MOZ-BOX-SHADOW:1PX 1PX 5PX 1PX GREEN, -1PX -1PX 5PX 1PX BLUE;BOX-SHADOW:1PX 1PX 5PX 1PX GREEN, -1PX -1PX 5PX 1PX BLUE} SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-1{BORDER:1PX SOLID #076FE4;-WEBKIT-BORDER-RADIUS:3PX;-MOZ-BORDER-RADIUS:3PX;BORDER-RADIUS:3PX;- WEBKIT-BOX-SHADOW:INSET 0 1PX 0 0 #8EBCF1;-MOZ-BOX-SHADOW:INSET 0 1PX 0 0 #8EBCF1;BOX-SHADOW:INSET 0 1PX 0 0 #8EBCF1;COLOR:#FFF;DISPLAY:INLINE- BLOCK;FONT-SIZE:11PX;FONT-WEIGHT:700;BACKGROUND-COLOR:#4294F0;BACKGROUND-IMAGE:LINEAR-GRADIENT(TOP,#4294F0,#0776F3);TEXT- DECORATION:NONE;TEXT-SHADOW:0 1PX 0 #0065D6;-WEBKIT-BACKGROUND-CLIP:PADDING-BOX;PADDING:7PX 18PX}SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-1:HOVER{-WEBKIT-BOX-SHADOW:INSET 0 1PX 0 0 #60A2EC;-MOZ-BOX-SHADOW:INSET 0 1PX 0 0 #60A2EC;BOX-SHADOW:INSET 0 1PX 0 0 #60A2EC;CURSOR:POINTER;BACKGROUND-COLOR:#2F87EA;BACKGROUND-IMAGE:LINEAR-GRADIENT(TOP,#2F87EA,#086FE3)}SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-1:ACTIVE{BORDER:1PX SOLID #076FE4;-WEBKIT-BOX-SHADOW:INSET 0 0 8PX 4PX #0868D3, INSET 0 0 8PX 4PX #0868D3, 0 1PX 1PX 0 #EEE;-MOZ- BOX-SHADOW:INSET 0 0 8PX 4PX #0868D3, INSET 0 0 8PX 4PX #0868D3, 0 1PX 1PX 0 #EEE;BOX-SHADOW:INSET 0 0 8PX 4PX #0868D3, INSET 0 0 8PX 4PX #0868D3, 0 1PX 1PX 0 #EEE}SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-2{BORDER:1PX SOLID #3371B2;-WEBKIT-BORDER-RADIUS:16PX;-MOZ-BORDER-RADIUS: 16PX;BORDER-RADIUS:16PX;-WEBKIT-BOX-SHADOW:INSET 0 1PX 0 0 #64A9F2, 0 1PX 2PX 0 #B3B3B3;-MOZ-BOX-SHADOW:INSET 0 1PX 0 0 #64A9F2, 0 1PX 2PX 0 #B3B3B3;BOX-SHADOW:INSET 0 1PX 0 0 #64A9F2, 0 1PX 2PX 0 #B3B3B3;COLOR:#FFF;DISPLAY:INLINE-BLOCK;FONT-SIZE:11PX;FONT-WEIGHT:400;LINE-HEIGHT: 1;BACKGROUND-COLOR:#4294F0;BACKGROUND-IMAGE:LINEAR-GRADIENT(TOP,#4294F0,#0156FE);TEXT-ALIGN:CENTER;TEXT-DECORATION:NONE;TEXT-SHADOW:0 -1PX 1PX #2762BF;-WEBKIT-BACKGROUND-CLIP:PADDING-BOX;BORDER-COLOR:#3371B2 #2457A3 #164297;PADDING:5PX 16PX}SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-2:HOVER{BORDER:1PX SOLID #2062A7;-WEBKIT-BOX-SHADOW:INSET 0 1PX 0 0 #519CF0;-MOZ-BOX-SHADOW:INSET 0 1PX 0 0 #519CF0;BOX- SHADOW:INSET 0 1PX 0 0 #519CF0;CURSOR:POINTER;BACKGROUND-COLOR:#2D88EE;BACKGROUND-IMAGE:LINEAR-GRADIENT(TOP,#2D88EE,#1554CE);TEXT-SHADOW: 0 -1PX 1PX #134FAF;-WEBKIT-BACKGROUND-CLIP:PADDING-BOX;BORDER-COLOR:#2062A7 #0E479A #01318E}SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-2:ACTIVE{BACKGROUND:#226EDD;BORDER:1PX SOLID #0D3C8C;BORDER-BOTTOM:1PX SOLID #062D8D;-WEBKIT-BOX-SHADOW:INSET 0 0 6PX 3PX #0C44B8, 0 1PX 0 0 #FFF;-MOZ-BOX-SHADOW:INSET 0 0 6PX 3PX #0C44B8, 0 1PX 0 0 #FFF;BOX-SHADOW:INSET 0 0 6PX 3PX #0C44B8, 0 1PX 0 0 #FFF;TEXT-SHADOW: 0 -1PX 1PX #1A52AA}SECTION#BUTTONS SECTION.DEMO BUTTON.EXAMPLE-3{BORDER:1PX SOLID #8A0000;BORDER-BOTTOM:1PX SOLID #810000;-WEBKIT-BORDER- RADIUS:5PX;-MOZ-BORDER-RADIUS:5PX;BORDER-RADIUS:5PX;-WEBKIT-BOX-SHADOW:INSET 0 1PX 0 0 #FF1D0C;-MOZ-BOX-SHADOW:INSET 0 1PX 0 0 #FF1D0C;BOX-

Slide 20

Slide 20 text

“Vendor prefixes are polluting our stylesheets...” —Albert Einstein

Slide 21

Slide 21 text

"Nothing will benefit human health and increase chances of survival for life on earth as much as the evolution of cascading style sheets.” —Albert Einstein

Slide 22

Slide 22 text

PAST ➞ PRESENT⇢ FUTURE CSS 2.1 CSS 3 CSS 3 CSS 4 CSS 1 CSS 2 CSS 2.1

Slide 23

Slide 23 text

CSS 4 the future of the future!

Slide 24

Slide 24 text

BRIDGING THE GAP BETWEEN THE PRESENT AND THE FUTURE

Slide 25

Slide 25 text

CSS 2.1 ⇢ CSS 3 ⇢CSS 4 „ You are here

Slide 26

Slide 26 text

FRAMEWORKS

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

METAFRAMEWORKS

Slide 30

Slide 30 text

“that’s so meta, bro”

Slide 31

Slide 31 text

PREPROCESSORS

Slide 32

Slide 32 text

SASS

Slide 33

Slide 33 text

SASS

Slide 34

Slide 34 text

SASS

Slide 35

Slide 35 text

MANAGE COMPLEXITY, STAY DRY, PRODUCTIVITY

Slide 36

Slide 36 text

VARIABLES $column: 200px; $delay: 0.05s; div.container { width: $column; transition-delay: $delay; } Input Input

Slide 37

Slide 37 text

VARIABLES div.container { width: 200px; transition-delay: 0.05s; } Output Output

Slide 38

Slide 38 text

NESTING header { margin-top: 40px; h1.logo { background: url(image.png); } } Input Input

Slide 39

Slide 39 text

NESTING header { margin-top: 40px; } header h1.logo { background: url(image.png); } Output Output

Slide 40

Slide 40 text

MIXINS @mixin border-radius($radii) { -webkit-border-radius: $radii; -moz-border-radius: $radii; border-radius: $radii; } header { @include border-radius(5px); } Input Input

Slide 41

Slide 41 text

MIXINS header { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } Output Output

Slide 42

Slide 42 text

INHERITANCE .blog-header { border: 1px solid gray; } header { @extend .blog-header; } Input Input

Slide 43

Slide 43 text

INHERITANCE .blog-header, header { border: 1px solid gray; } Output Output

Slide 44

Slide 44 text

PARTIALS @import “header”; @import “body”; @import “footer”; Input Input

Slide 45

Slide 45 text

OPERATORS Equality == != Number + - * / % Relational < > <= >= Boolean and or not

Slide 46

Slide 46 text

AND MORE! Color Functions darken (#color, %percent) lighten (#color, %percent) saturate(#color, %percent) etc. Control Directives @if @for @each @while

Slide 47

Slide 47 text

BOURBON http://thoughtbot.com/bourbon

Slide 48

Slide 48 text

BOURBON

Slide 49

Slide 49 text

animations appearance background-image background-size border-image border-radius box-shadow box-sizing columns flex-box inline-block linear-gradient radial-gradient transform transition user-select BOURBON MIXINS

Slide 50

Slide 50 text

flex-grid golden-ratio grid-width linear-gradient modular-scale radial-gradient shade tint BOURBON FUNCTIONS

Slide 51

Slide 51 text

button clearfix hide-text HTML5 Inputs $all-text-inputs font-family $georgia $helvetica $lucida-grande $monospace $verdana timing-functions $ease-in-* $ease-out-* $ease-in-out-* * = quad, cubic, quart, quint, sine, expo, circ, back BOURBON ADDONS

Slide 52

Slide 52 text

div { @include border-radius(10px); @include box-shadow(0 2px 4px black); } MIXINS Input Input

Slide 53

Slide 53 text

div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 2px 4px black; -moz-box-shadow: 0 2px 4px black; box-shadow: 0 2px 4px black; } MIXINS Output Output

Slide 54

Slide 54 text

FUNCTIONS Input Input

Slide 55

Slide 55 text

$fg-column: 60px; // Column Width $fg-gutter: 25px; // Gutter Width $fg-max-columns: 12; // Total Columns for main container div { width: flex-grid( 4 ); // 30.882353%; margin-left: flex-gutter( 12 );// 2.45098%; p { width: flex-grid( 2, 4 ); // 46.031746%; margin: flex-gutter( 4 ); // 7.936508%; } blockquote { width: flex-grid( 2, 4 ); // 46.031746%; } }

Slide 56

Slide 56 text

button { @include button; @include button(pill); @include button(shiny, #ff0000); } ADDONS Input Input

Slide 57

Slide 57 text

ADDONS Output Output

Slide 58

Slide 58 text

CLEAN CODEBASE = STAYING DRY

Slide 59

Slide 59 text

SEPARATION OF PRESENTATION AND CONTENT

Slide 60

Slide 60 text

.rounded { @include border-radius(4px); border: 1px solid black; } .shadow { @include box-shadow(0 2px 4px black); background: purple; }

Slide 61

Slide 61 text

OOCSS

Slide 62

Slide 62 text

aside { @extend .rounded; @extend .shadow; } SASS

Slide 63

Slide 63 text

SMACSS Scaleable and Modular Architecture for CSS

Slide 64

Slide 64 text

BE A SASS ARCHITECT

Slide 65

Slide 65 text

_base.scss _base-variables.scss _base-extends.scss _base-mixins.scss _base-mobile.scss _shared-header.scss _shared-sidebar.scss _shared-footer.scss _home.scss _about.scss BASE STYLES SHARED MODULES INDIVIDUAL PAGES

Slide 66

Slide 66 text

_base.scss _base-variables.scss _base-extends.scss _base-mixins.scss _base-mobile.scss _shared-header.scss _shared-sidebar.scss _shared-footer.scss _home.scss _about.scss BASE STYLES SHARED MODULES INDIVIDUAL PAGES

Slide 67

Slide 67 text

_base.scss _base-variables.scss _base-extends.scss _base-mixins.scss _base-mobile.scss _shared-header.scss _shared-sidebar.scss _shared-footer.scss _home.scss _about.scss BASE STYLES SHARED MODULES INDIVIDUAL PAGES

Slide 68

Slide 68 text

_base.scss _base-variables.scss _base-extends.scss _base-mixins.scss _base-mobile.scss _shared-header.scss _shared-sidebar.scss _shared-footer.scss _home.scss _about.scss BASE STYLES SHARED MODULES INDIVIDUAL PAGES

Slide 69

Slide 69 text

SETUP A STYLE GUIDE

Slide 70

Slide 70 text

// FONT FAMILIES $base-font-family: $helvetica; $base-font-family-alt: $georgia; // FONT COLORS $base-font-color: hsl(0, 0%, 20%); $base-font-color-alt: hsl(0, 0%, 35%); $base-font-color-alt2: hsl(0, 0%, 45%); $base-font-color-alt3: hsl(0, 0%, 67%); // FONT SIZES $base-font-size: 13px; $base-font-size-alt: 15px; $base-font-size-alt2: 17px; // BACKGROUND COLORS $base-background-dark: hsl(0, 0%, 23%); $base-background-dark-alt: darken($base-background-dark, 5%); $base-background-light: hsl(0, 0%, 86%); // BORDERS $base-border-color: hsl(0, 0%, 20%); // Black $base-border-color-alt3: hsl(0, 0%, 75%); // Gray Light _BASE-VARIABLES.SCSS

Slide 71

Slide 71 text

IDENTIFY REPEATING VISUAL PATTERNS

Slide 72

Slide 72 text

REFACTOR & EXTRACT

Slide 73

Slide 73 text

li:nth-child( 1 ) { @include animation-delay( 0.05s );} li:nth-child( 2 ) { @include animation-delay( 0.1s );} li:nth-child( 3 ) { @include animation-delay( 0.15s );} ... li:nth-child( 20 ) { @include animation-delay( 1.0s );}

Slide 74

Slide 74 text

$time: 0.05s; $delay: $time; @for $child from 1 through 20 { li:nth-child(#{ $child }) { @include animation-delay( $delay ); } $delay: $delay + $time; }

Slide 75

Slide 75 text

ALWAYS REMEMBER: “Don’t repeat yourself”

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

body.home a.home { background: orange; } body.about a.about { background: orange; } body.contact a.contact { background: orange; }

Slide 78

Slide 78 text

$body-classes: home, about, contact; @each $body-class in $body-classes { body.#{$body-class} a.#{$body-class} { background: orange; } } }

Slide 79

Slide 79 text

ASK YOURSELF: “Is this DRY?”

Slide 80

Slide 80 text

$icons: image, audio, video; @each $icon in $icons { div.#{ $icon }::before { content: url('#{ $icon }-64.png');} aside { a.#{ $icon }::before { content: url('#{ $icon }-32.png');} li a.#{ $icon }::before { content: url('#{ $icon }-16.png');} } }

Slide 81

Slide 81 text

$icons: image, audio, video; @each $icon in $icons { div.#{ $icon }::before { content: url('#{ $icon }-64.png');} aside { a.#{ $icon }::before { content: url('#{ $icon }-32.png');} li a.#{ $icon }::before { content: url('#{ $icon }-16.png');} } }

Slide 82

Slide 82 text

$icons: image, audio, video; @each $icon in $icons { div.audio::before { content: url('audio-64.png');} aside { a.audio::before { content: url('audio-32.png');} li a.audio::before { content: url('audio-16.png');} } }

Slide 83

Slide 83 text

div.audio::before { content: url('audio-64.png'); } aside a.audio::before { content: url('audio-32.png'); } aside li a.audio::before { content: url('audio-16.png'); }

Slide 84

Slide 84 text

$icons: image, audio, video, pdf; @each $icon in $icons { div.#{ $icon }::before { content: url('#{ $icon }-64.png');} aside { a.#{ $icon }::before { content: url('#{ $icon }-32.png');} li a.#{ $icon }::before { content: url('#{ $icon }-16.png');} } }

Slide 85

Slide 85 text

KEY POINTS •Use Variables, Mixins, Extends •Setup a Styleguide •Identify repeating patterns •Refactor & Extract

Slide 86

Slide 86 text

SASS IS A STEPPINGSTONE

Slide 87

Slide 87 text

COMING SOON... •Nesting http://dev.w3.org/csswg/css3-hierarchies/ •Variables http://dev.w3.org/csswg/css-variables/ •Math - calc(*) function http://www.w3.org/TR/css3-values/#calc •Mixins? http://www.xanthir.com/blog/b49w0

Slide 88

Slide 88 text

THANK YOU! @PHILLAPIER DESIGNER THOUGHTBOT

Slide 89

Slide 89 text

QUESTIONS?