Tweet
Tweet

Slide 1

Slide 1 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 With a bit of Grunt and Automation for good measure. A LAZY CSS DEV’S DASH THROUGH SASS

Slide 2

Slide 2 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 2

Slide 3

Slide 3 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 3

Slide 4

Slide 4 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 With a bit of Grunt and Automation for good measure. A LAZY CSS DEV’S DASH THROUGH SASS

Slide 5

Slide 5 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 A LAZY CSS DEV’S DASH THROUGH SASS Look up here for the why. With a bit of Grunt and Automation for good measure.

Slide 6

Slide 6 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 HI. 6

Slide 7

Slide 7 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 WHO ARE YOU? 7 I will adjust the talk depending on the audience.

Slide 8

Slide 8 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 WHO AM I? 8 Why should you listen to me?

Slide 9

Slide 9 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 9

Slide 10

Slide 10 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 NOT A BAD THING! 10 Really, laziness is okay.

Slide 11

Slide 11 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 Laziness – The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor- saving programs that other people will find useful, and document what you wrote so you don't have to answer so many questions about it. Hence, the first great virtue of a programmer. http://en.wikipedia.org/wiki/Larry_Wall 11

Slide 12

Slide 12 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 CSS 12 Why you’re here.

Slide 13

Slide 13 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 13 dev[405]% grep background-color * style.css: background-color: #edf5fa; style.css: background-color: #ddecf5; style.css: background-color: #e6f1f7; style.css: background-color: #d4e7f3; style.css: background-color: #edf5fa; style.css: background-color: #fcfce8; style.css: background-color: #fcf9e5; style.css: background-color: #fbf5cf; style.css: background-color: #fefefe; style.css: background-color: #f5f5f5; style.css: background-color: #fdf5e6; style.css: background-color: #fdf2de; style.css: background-color: #fbe4e4; style.css: background-color: #fbdbdb; style.css: background-color: #ffcccc; style.css: background-color: #ffffdd; style.css: background-color: #ddffdd; Why you’re here? This crap.

Slide 14

Slide 14 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 14 #fcfce8 This crap, too.

Slide 15

Slide 15 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 15 #fcf9e5 I can’t tell this color from the previous color.

Slide 16

Slide 16 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 16 And this? ... background: -moz-linear-gradient(right, ... background: -webkit-gradient(linear, ... background: -webkit-linear-gradient(right, ... background: -o-linear-gradient(right, ... background: -ms-linear-gradient(right, ... background: linear-gradient(right, ... filter: progid:DXImageTransform.Microsoft... ...

Slide 17

Slide 17 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 17 What I might look like after a couple hours of CSS...

Slide 18

Slide 18 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 SASS 18 Why you’re REALLY here.

Slide 19

Slide 19 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 SASS 19 While it is an acronym...

Slide 20

Slide 20 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 Sass. 20 http://sass-lang.com/ ... it’s not an acronym.

Slide 21

Slide 21 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain. 21 Why you’re REALLY here.

Slide 22

Slide 22 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 LET’S DASH! 22 Whee!

Slide 23

Slide 23 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 OH WAIT... 23 Shoot.

Slide 24

Slide 24 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 INSTALLATION 24 Oh, right, the tools.

Slide 25

Slide 25 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 RUBY 25 Installation information

Slide 26

Slide 26 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 ON A MAC? 26 Installation information - ruby on OSX

Slide 27

Slide 27 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 27 Installation information - ruby on OSX

Slide 28

Slide 28 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 OR, MAYBE NOT 28 Installation information - ruby on OSX

Slide 29

Slide 29 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 29 $ ruby --version ruby 1.8.7 (2012-02-08 patchlevel 358) Installation information - ruby on OSX

Slide 30

Slide 30 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 30 HOMEBREW http://mxcl.github.com/homebrew/ Installation information - ruby on OSX

Slide 31

Slide 31 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 31 HOMEBREW http://mxcl.github.com/homebrew/ Installation information - ruby on OSX

Slide 32

Slide 32 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 32 Installation information - ruby on OSX $ brew install ruby

Slide 33

Slide 33 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 RVM RUBY VERSION MANAGER 33 Installation information https://rvm.io/rvm/install

Slide 34

Slide 34 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 34 Installation information - ruby on OSX $ curl -L https://get.rvm.io | \ bash -s stable --ruby

Slide 35

Slide 35 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 LINUX? 35 Installation information - ruby

Slide 36

Slide 36 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 36 Installation information - ruby on linux # apt-get install ruby1.9.1 $ sudo apt-get install ruby1.9.1

Slide 37

Slide 37 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 37 Installation information - ruby on linux # yum install ruby1.9.1 $ sudo yum install ruby1.9.1

Slide 38

Slide 38 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 38 Installation information - ruby on linux # pacman -S ruby $ sudo pacman -S ruby

Slide 39

Slide 39 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 RVM RUBY VERSION MANAGER 39 Installation information https://rvm.io/rvm/install

Slide 40

Slide 40 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 WINDOWS? 40 Installation information

Slide 41

Slide 41 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 RUBYINSTALLER = FRIEND 41 Installation information - ruby on windows http://rubyinstaller.org/downloads/

Slide 42

Slide 42 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 RUBYINSTALLER = FRIEND 42 BE LAZY! http://rubyinstaller.org/downloads/

Slide 43

Slide 43 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 FINALLY! 43 Now we can install Sass.

Slide 44

Slide 44 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 44 $ gem update --system $ gem install sass $ sudo gem update --system $ sudo gem install sass Yay! Sass installed!

Slide 45

Slide 45 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 COMPASS 45 But, wait! There’s more! http://compass-style.org/install/

Slide 46

Slide 46 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 46 $ gem update --system $ gem install compass $ sudo gem update --system $ sudo gem install compass Setting up tools. In this case, Compass.

Slide 47

Slide 47 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 WHY? 47 Setting up tools - Why install Compass?

Slide 48

Slide 48 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 GRUNT 48 Setting up tools - install Grunt to automate things http://gruntjs.com/

Slide 49

Slide 49 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 NODE 49 Setting up tools - need node to install Grunt http://nodejs.org/

Slide 50

Slide 50 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 50 http://www.flickr.com/photos/postbear/7445381260

Slide 51

Slide 51 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 51 $ npm install grunt-contrib-watch Setting up tools, installing the Grunt watch module for live reloading of pages https://github.com/gruntjs/grunt-contrib-watch

Slide 52

Slide 52 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 LIVERELOAD 52 Setting up tools - if Grunt is too heavy, use LiveReload http://livereload.com/

Slide 53

Slide 53 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 GAH! 53 Maybe too much command line?

Slide 54

Slide 54 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 SCOUT 54 Skip the command line if you need to. http://mhs.github.io/scout-app/

Slide 55

Slide 55 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 PHEW! 55 Done setting up tools (actually, we skipped a bunch of it)

Slide 56

Slide 56 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 OVERVIEW 56 Going to talk about Sass now. Really.

Slide 57

Slide 57 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 57 // files $ sass --watch styles.scss:styles.css // directories $ sass --watch scss:css // with compass $ compass watch project-dir Using Sass at its basic level

Slide 58

Slide 58 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 $variables 58 Sass dash, talking variables

Slide 59

Slide 59 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 59 dev[405]% grep background-color * style.css: background-color: #edf5fa; style.css: background-color: #ddecf5; style.css: background-color: #e6f1f7; style.css: background-color: #d4e7f3; style.css: background-color: #edf5fa; style.css: background-color: #fcfce8; style.css: background-color: #fcf9e5; style.css: background-color: #fbf5cf; style.css: background-color: #fefefe; style.css: background-color: #f5f5f5; style.css: background-color: #fdf5e6; style.css: background-color: #fdf2de; style.css: background-color: #fbe4e4; style.css: background-color: #fbdbdb; style.css: background-color: #ffcccc; style.css: background-color: #ffffdd; style.css: background-color: #ddffdd; Before variables...

Slide 60

Slide 60 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 60 $color-main: rgb(255,251,114); // #FFFB72 $color-second: rgb(70,87,204); // #4657CC $color-hilite: rgb(189,177,255); // #BDB1FF After variables!

Slide 61

Slide 61 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 61 $color-main: rgb(255,251,114); $color-second: rgb(70,87,204); $color-hilite: rgb(189,177,255); ... .button { background-color: $color-main; ... } See? Easy!

Slide 62

Slide 62 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 62 /* line 22, ../scss/styles.scss */ .button { background-color: #fffb72; ... } Sass dash, talking variables

Slide 63

Slide 63 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 63 $font-times: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; $font-garamond: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; Uses of variables: fonts http://css-tricks.com/snippets/css/font-stacks/

Slide 64

Slide 64 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 64 $debug-this-crap: 1; Uses of variables: development settings

Slide 65

Slide 65 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 65 http://www.makemylogobiggercream.com/ Uses of variables: make the logo bigger

Slide 66

Slide 66 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 NESTING! 66 Sass Overview

Slide 67

Slide 67 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 67 .navigation { a { display: block; padding: .5em; color: $color-link; border: none; } b { font-size: .9em; } span { display: block; font-size: .8em; } } .navigation a { display: block; padding: .5em; color: #444040; border: none; } .navigation b { font-size: .9em; } .navigation span { display: block; font-size: .8em; } Sass syntax, talking nesting

Slide 68

Slide 68 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 68 $color-link: #444040; $color-link-hilite: #994040; $color-link-active: #660040; a { color: $color-link; &:hover, &:focus { color: $color-link-hilite; } &:visited, &:active { color: $color-link-active; } } Sass syntax, talking nesting

Slide 69

Slide 69 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 69 a { color: #444040; } a:hover, a:focus { color: #994040; } a:visited, a:active { color: #660040; } Sass syntax, talking nesting

Slide 70

Slide 70 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 DON’T NEST MORE THAN THREE LEVELS. 70 Sass syntax, nesting best practice http://css-tricks.com/sass-style-guide/

Slide 71

Slide 71 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 @extend 71 Sass syntax, @extend

Slide 72

Slide 72 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 72 Sass syntax, talking @extend .box { padding: 2em; color: $color-text; background-color: $color-bg; } .box-warning { @extend .box; border: 2px dotted $color-yikes; } .box-success { @extend .box; border: 2px dotted $color-success; } .box-info { @extend .box; border: 2px dotted $color-info; }

Slide 73

Slide 73 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 73 Sass syntax, talking @extend .box, .box-warning, .box-success, .box-info { padding: 2em; color: #333333; background-color: white; } .box-warning { border: 2px dotted #cc0000; } .box-success{ border: 2px dotted #33cc00; } .box-info { border: 2px dotted #996633; }

Slide 74

Slide 74 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 74 Sass syntax, talking @extend
...

Slide 75

Slide 75 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 75 Sass syntax, talking @extend
...

Slide 76

Slide 76 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 @mixin 76 Sass syntax, @mixin

Slide 77

Slide 77 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 @mixin 77 Sass syntax, @mixin (@include)

Slide 78

Slide 78 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 78 Sass syntax, @mixin @mixin boxsize($bs-type: border-box) { -webkit-box-sizing: $bs-type; -moz-box-sizing: $bs-type; box-sizing: $bs-type; } * { @include boxsize(content-box); }

Slide 79

Slide 79 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 79 Sass syntax, @mixin * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }

Slide 80

Slide 80 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 80 Sass syntax, @mixin @mixin module($parent-color) { color: darken($parent-color, 50%); } .main_module { @include module(#ccc); min-height: 3em; } .sidebar_module { @include module(#444); min-height: 2em; }

Slide 81

Slide 81 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 DON’T DO THAT. 81 Sass syntax, use what other people have done.

Slide 82

Slide 82 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 82 Sass syntax, @mixin @import "compass/css3/box-sizing"; * { @include box-sizing(border-box); } http://compass-style.org/reference/compass/css3/box_sizing/

Slide 83

Slide 83 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 83 Sass syntax, @mixin @import "compass/css3/box-sizing"; * { @include box-sizing(border-box); } http://compass-style.org/reference/compass/css3/box_sizing/

Slide 84

Slide 84 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 @mixin vs @extend 84 Sass Overview

Slide 85

Slide 85 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 MATH! 85 Sass Overview

Slide 86

Slide 86 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 86 Sass syntax, math! .addition { width: 20% + 80%; } .subtraction { width: 80% - 20%; } .multiplication { width: 20 * 80px; } .division { width: (80%/20); }

Slide 87

Slide 87 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 87 .division { width: 80%/20; // whoops! } Sass syntax, math!

Slide 88

Slide 88 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 @function 88 Sass Overview

Slide 89

Slide 89 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 http://timhettler.github.io/cssconf-2013 89 Sass Overview

Slide 90

Slide 90 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 @if @else 90 Sass Overview

Slide 91

Slide 91 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 91 @function get-button-color($color) { @return if(lightness($color) > 50, #333, #fff ); } Sass syntax, logic control

Slide 92

Slide 92 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 @for 92 Are you even looking at this?

Slide 93

Slide 93 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 93 @for $i from 1 through 4 { .buy_#{$i} { background-image: image-url("buy_#{$i}.png"); } } Sass syntax, use @for on background images

Slide 94

Slide 94 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 94 .buy_1 { background-image: url('../img/buy_1.png?135785329'); } .buy_2 { background-image: url('../img/buy_2.png?157858011'); } .buy_3 { background-image: url('../img/buy_3.png?357858078'); } .buy_4 { background-image: url('../img/buy_4.png?135788103'); } Sass syntax, use @for on background images

Slide 95

Slide 95 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 @each 95 Sass syntax, use @each on background images

Slide 96

Slide 96 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 96 // @each example @each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } Sass syntax, use @each on background images http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id8

Slide 97

Slide 97 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 97 // @each example @each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } Sass syntax, note use of #{...} for variable interpolation http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

Slide 98

Slide 98 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 98 // @each example output .puma-icon { background-image: url('/images/puma.png'); } .sea-slug-icon { background-image: url('/images/sea-slug.png'); } .egret-icon { background-image: url('/images/egret.png'); } .salamander-icon { background-image: url('/images/salamander.png'); } Sass syntax, use @each on background images

Slide 99

Slide 99 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 MORE PHEW! 99 Deep breath...

Slide 100

Slide 100 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 100 Setting up projects

Slide 101

Slide 101 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 101 Getting started $ mv css/styles.css scss/styles.scss

Slide 102

Slide 102 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 _partials.scss 102 Partials to organize the files

Slide 103

Slide 103 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 103 Organizing CSS

Slide 104

Slide 104 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 104 Interface Inventories

Slide 105

Slide 105 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 CHROME DEVTOOLS 105 All

Slide 106

Slide 106 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 CHROME DEVTOOLS 106 FIRESASS All the ...

Slide 107

Slide 107 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 CHROME DEVTOOLS 107 FIRESASS SOURCE MAPS All the tools ...

Slide 108

Slide 108 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 CHROME DEVTOOLS 108 FIRESASS SOURCE MAPS CSSCSS All the tools I won’t ...

Slide 109

Slide 109 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 CHROME DEVTOOLS 109 FIRESASS SOURCE MAPS CSSCSS SPRITES All the tools I won’t get to.

Slide 110

Slide 110 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 CHROME DEVTOOLS 110 FIRESASS SOURCE MAPS CSSCSS SPRITES All the tools I won’t get to. MEDIA QUERIES

Slide 111

Slide 111 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 THE GOOD STUFF! 111

Slide 112

Slide 112 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 GRADIENTS 112

Slide 113

Slide 113 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 linear 113

Slide 114

Slide 114 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 114 background: #1e5799; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/ Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0 iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI +CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2 VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc 2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZz ZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZ zZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZm ZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR 3JhZGllbnQ +CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2 ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #1e5799 0%, #207cca 49%, #2989d8 50%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(49%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */ http://www.colorzilla.com/gradient-editor/ Looking at how bad linear-gradient CSS can be.

Slide 115

Slide 115 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 115 Now consider adjusting this gradient. O_o http://www.colorzilla.com/gradient-editor/

Slide 116

Slide 116 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 116 background: #1e5799; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/ Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0 iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI +CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2 VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc 2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZz ZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZ zZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZm ZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR 3JhZGllbnQ +CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2 ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #1e5799 0%, #207cca 49%, #2989d8 50%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(49%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */ http://www.colorzilla.com/gradient-editor/ Looking at how bad linear-gradient CSS can be.

Slide 117

Slide 117 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 117 Let’s use Compass! Be lazy! @import "compass"; ... #simple { @include background-image(linear-gradient(#1e5799 0%, #207cca 49%, #2989d8 50%, #7db9e8 100%)); } http://compass-style.org/reference/compass/css3/gradient/

Slide 118

Slide 118 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 118 Using CSS gradients, results are the same

Slide 119

Slide 119 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 119 Using variables! @import "compass"; ... #simple { @include background-image(linear-gradient($main- color-darken 0%, $main-color 49%, $main-color-tint 50%, $main-color-light 100%)); } http://compass-style.org/reference/compass/css3/gradient/

Slide 120

Slide 120 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 120 Maybe you have something crazy... @import "compass"; ... #on-drugs { @include background-image(linear-gradient(left, red 0%, orange 20%, yellow 40%, green 60%, blue 80%, purple 100%)); }

Slide 121

Slide 121 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 121 ... like your designer is happily high on life.

Slide 122

Slide 122 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 122 We can force hard stops in gradients @import "compass"; ... #hard-edges { @include background-image(linear-gradient(left, red 0%, red 19.9%, orange 20%, orange 39.9%, yellow 40%, yellow 59.9%, green 60%, green 79.9%, blue 80% , blue 99.9%, purple 100%)); }

Slide 123

Slide 123 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 123 Hard gradient stops

Slide 124

Slide 124 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 124 Can control color transitions... @import "compass"; ... $fade-edge: 5%; $edge1: 20%; $edge2: 40%; $edge3: 60%; $edge4: 80%; $edge5: 100%; #crown-fades { @include background-image(linear-gradient(left, red 0%, red ($edge1 - $fade-edge), orange 20%, orange ($edge2 - $fade-edge), yellow $edge2, yellow ($edge3 - $fade-edge), green $edge3, green ($edge4 - $fade- edge), blue $edge4, blue ($edge5 - $fade-edge), purple $edge5)); }

Slide 125

Slide 125 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 125 But doesn’t always look good

Slide 126

Slide 126 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 radial 126

Slide 127

Slide 127 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 127 Still talking gradients, radial ones now. @import "compass"; ... #radial-gradient { @include background-image(radial-gradient(120px 120px, pink 80px, red 120px)); }

Slide 128

Slide 128 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 128 Radial gradients. What does it mean?

Slide 129

Slide 129 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 129 Radial gradients: a better example.

Slide 130

Slide 130 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 130 Still talking gradients, radial ones now. Yay background.
Next

Slide 131

Slide 131 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 131 Still talking gradients, radial ones now. $cssconf-bg: #96cd23; body.cssconf { background-color: $cssconf-bg; }

Slide 132

Slide 132 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 132 Still talking gradients, radial ones now. $cssconf-bg: #96cd23; body { &.cssconf { background-color: $cssconf-bg; }

Slide 133

Slide 133 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 133 Still talking gradients, radial ones now. $cssconf-bg: #96cd23; body { &.cssconf { background-color: $cssconf-bg; }

Slide 134

Slide 134 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 134 Still talking gradients, radial ones now.

Slide 135

Slide 135 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 135 Still talking gradients, radial ones now. $cssconf-fg1: rgba(204,102,153,0) 64%; $cssconf-fg2: #cc6699 66%; $cssconf-fg3: #cc6699 75%; $cssconf-fg4: rgba(204,102,153,0) 77%; $cssconf-fg5: rgba(255,204,0,0) 90%; $cssconf-fg6: #ffcc00 92%; body { &.step2 { @include background-image(radial-gradient($cssconf- fg1, $cssconf-fg2, $cssconf-fg3,$cssconf-fg4, $cssconf-fg5, $cssconf-fg6)); } }

Slide 136

Slide 136 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 136 Still talking gradients, radial ones now. $cssconf-fg1: rgba(204,102,153,0) 64%; $cssconf-fg2: #cc6699 66%; $cssconf-fg3: #cc6699 75%; $cssconf-fg4: rgba(204,102,153,0) 77%; $cssconf-fg5: rgba(255,204,0,0) 90%; $cssconf-fg6: #ffcc00 92%; body { &.step2 { @include background-image(radial-gradient($cssconf- fg1, $cssconf-fg2, $cssconf-fg3,$cssconf-fg4, $cssconf-fg5, $cssconf-fg6), radial-gradient($cssconf- fg1, $cssconf-fg2, $cssconf-fg3,$cssconf-fg4, $cssconf-fg5, $cssconf-fg6)); } }

Slide 137

Slide 137 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 137 Still talking gradients, radial ones now.

Slide 138

Slide 138 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 138 Still talking gradients, radial ones now. $bg-size: 200px; body { &.step3 { background-size: $bg-size $bg-size; } }

Slide 139

Slide 139 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 139 Still talking gradients, radial ones now.

Slide 140

Slide 140 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 140 Still talking gradients, radial ones now. $cssconf-fg1: rgba(204,102,153,0) 64%; $cssconf-fg2: #cc6699 66%; $cssconf-fg3: #cc6699 75%; $cssconf-fg4: rgba(204,102,153,0) 77%; $cssconf-fg5: rgba(255,204,0,0) 90%; $cssconf-fg6: #ffcc00 92%; body { &.step2 { @include background-image(radial- gradient($cssconf-fg1, $cssconf-fg2, $cssconf- fg3,$cssconf-fg4, $cssconf-fg5, $cssconf-fg6), radial-gradient($cssconf-fg1, $cssconf-fg2, $cssconf-fg3,$cssconf-fg4, $cssconf-fg5, $cssconf- fg6)); } }

Slide 141

Slide 141 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 141 Still talking gradients, radial ones now. $bg-size: 200px; $bg-offset: ($bg-size / 2); body { &.step4 { background-position-x: 0px, $bg-offset; background-position-y: 0px, $bg-offset; } }

Slide 142

Slide 142 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 142 Still talking gradients, radial ones now.

Slide 143

Slide 143 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 143 Still talking gradients, radial ones now. $cssconf-bg: #96cd23; $cssconf-fg1: rgba(204,102,153,0) 64%; $cssconf-fg2: #cc6699 66%; $cssconf-fg3: #cc6699 75%; $cssconf-fg4: rgba(204,102,153,0) 77%; $cssconf-fg5: rgba(255,204,0,0) 90%; $cssconf-fg6: #ffcc00 92%; $cssconf-hilite1: #ffcc00; $bg-size: 200px; $bg-offset: ($bg-size / 2); body { &.cssconf { background-color: $cssconf-bg; } &.step2 { @include background-image(radial-gradient($cssconf-fg1, $cssconf-fg2, $cssconf-fg3,$cssconf- fg4, $cssconf-fg5, $cssconf-fg6), radial-gradient($cssconf-fg1, $cssconf-fg2, $cssconf- fg3,$cssconf-fg4, $cssconf-fg5, $cssconf-fg6)); } &.step3 { background-size: $bg-size $bg-size; } &.step4 { background-position-x: 0px, $bg-offset; background-position-y: 0px, $bg-offset; } }

Slide 144

Slide 144 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 144 Still on gradients, showing the Sass variables

Slide 145

Slide 145 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 145 Still talking gradients, radial ones now. $cssconf-bg: #ff800d; $cssconf-fg1: rgba(255,45,13,0) 64%; $cssconf-fg2: #ff2d0d 66%; $cssconf-fg3: #ff2d0d 75%; $cssconf-fg4: rgba(255,45,13,0) 77%; $cssconf-fg5: rgba(255,204,0,0) 90%; $cssconf-fg6: #ffcc00 92%; $cssconf-hilite1: #ff6c00; $bg-size: 100px; $bg-offset: ($bg-size / 2);

Slide 146

Slide 146 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 146 Still on gradients, showing the Sass variables

Slide 147

Slide 147 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 147 $color-pink: pink; body { &.owc6 { $dark-pink: darken($color-pink, 10%); $light-comp-pink: lighten(complement($color-pink), 10%); $comp-pink: complement($color-pink); @include background(image- url("line.png"),linear-gradient(top, $dark-pink 0px, $dark-pink 10px, $light- comp-pink 10px, $comp-pink 100%)); } } Still on gradients, showing off lighten, darken, complement http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

Slide 148

Slide 148 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 148 $color-pink: pink; body { &.owc6 { $dark-pink: darken($color-pink, 10%); $light-comp-pink: lighten(complement($color-pink), 10%); $comp-pink: complement($color-pink); @include background(image- url("line.png"),linear-gradient(top, $dark-pink 0px, $dark-pink 10px, $light- comp-pink 10px, $comp-pink 100%)); } } Still on gradients, showing off lighten, darken, complement http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

Slide 149

Slide 149 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 149 Still on gradients, showing off lighten, darken, complement

Slide 150

Slide 150 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 150 Those gradients! Gosh! You can do a lot! http://lea.verou.me/css3patterns/

Slide 151

Slide 151 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 INTERLUDE 151

Slide 152

Slide 152 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 TRANSFORMS 152

Slide 153

Slide 153 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 153
index Transform example HTML

Slide 154

Slide 154 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 154 @import "compass/css3/transform"; $ifsize: 400px; iframe { height: $ifsize; width: $ifsize; border: 3px solid red; } .transform-me { } Transforms with Compass

Slide 155

Slide 155 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 155 Transform example page

Slide 156

Slide 156 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 156 @import "compass/css3/transform"; $ifsize: 400px; iframe { height: $ifsize; width: $ifsize; border: 3px solid red; } .transform-me { @include rotate(90deg); } Transforms with Compass

Slide 157

Slide 157 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 157 Transform example page

Slide 158

Slide 158 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 158 @import "compass/css3/transform"; $ifsize: 400px; iframe { height: $ifsize; width: $ifsize; border: 3px solid red; } .transform-me { @include transform-origin(($ifsize/2), ($ifsize/ 2)); @include rotate(90deg); } Transforms with Compass

Slide 159

Slide 159 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 159 Transform example page

Slide 160

Slide 160 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 160 @import "compass/css3/transform"; .transform-me { @include scaleX(0.5); } Transforms with Compass

Slide 161

Slide 161 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 161 Transform example page

Slide 162

Slide 162 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 ANIMATIONS! 162 Ooooooo! The good stuff!

Slide 163

Slide 163 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 DEFINITION 163 Two parts of CSS animations, first is:

Slide 164

Slide 164 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 164 animation-delay: 0s; animation-direction: alternate; animation-duration: 2s; animation-iteration-count: infinite; animation-name: ninja; animation-timing-function: ease-in; CSS Animations: defining the animation

Slide 165

Slide 165 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 165 -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; -moz-animation-iteration-count: 3; -webkit-animation-iteration-count: 3; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; CSS Animations: defining the animation

Slide 166

Slide 166 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 KEYFRAMES 166 Two parts of CSS animations, second is:

Slide 167

Slide 167 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 167 @-moz-keyframes ninja { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } @-webkit-keyframes ninja { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } CSS Animations: defining the animation

Slide 168

Slide 168 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 168 Ninjas! http://vmfarms.com/our-platform/ruby/

Slide 169

Slide 169 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 169 Not so ninja!

Slide 170

Slide 170 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 170
CSS Animations: ninja example HTML

Slide 171

Slide 171 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 171 $ninja-size: 390px; .ninja { background: transparent url("../img/rope.png") no-repeat; background-size: $ninja-size; height: ($ninja-size * 2); width: $ninja-size; } CSS Animations: ninja css start

Slide 172

Slide 172 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 172 @-webkit-keyframes ninjamove { from { -webkit-transform: translateX(-30px); } to { -webkit-transform: translateX(300px); } } .ninja { background: transparent url("../img/rope.png") no-repeat; background-size: $ninja-size; width: $ninja-size; height: ($ninja-size*2); -webkit-animation-duration: 1s; -webkit-animation-direction: alternate; -webkit-animation-name: ninjamove; -webkit-animation-iteration-count: infinite; } CSS Animations: well, this works. sorta.

Slide 173

Slide 173 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 173 Not so ninja!

Slide 174

Slide 174 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 174 @mixin animation ($delay, $duration, $animation, $dir, $count) { -webkit-animation-delay: $delay; -webkit-animation-duration: $duration; -webkit-animation-name: $animation; -webkit-animation-direction: $dir; -webkit-animation-iteration-count: $count; -moz-animation-delay: $delay; -moz-animation-duration: $duration; -moz-animation-name: $animation; -moz-animation-direction: $dir; -moz-animation-iteration-count: $count; -o-animation-delay: $delay; -o-animation-duration: $duration; -o-animation-name: $animation; -o-animation-direction: $dir; -o-animation-iteration-count: $count; animation-delay: $delay; animation-duration: $duration; animation-name: $animation; animation-direction: $dir; animation-iteration-count: $count; } CSS Animations: creating the animation mixin https://gist.github.com/Integralist/3931680

Slide 175

Slide 175 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 175 @mixin keyframe ($animation_name) { @-webkit-keyframes $animation_name { @content; } @-moz-keyframes $animation_name { @content; } @-o-keyframes $animation_name { @content; } @keyframes $animation_name { @content; } } CSS Animations: sassin’ the keyframes https://gist.github.com/Integralist/3931680

Slide 176

Slide 176 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 176 @include keyframe(ninjamove) { from { @include translateX($from); } to { @include translateX($to); } } CSS Animations: example of keyframes https://gist.github.com/Integralist/3931680

Slide 177

Slide 177 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 177 @-webkit-keyframes ninjamove { from { -webkit-transform: translateX(-30px); } to { -webkit-transform: translateX(300px); } } .ninja { background: transparent url("../img/ninja.png") no-repeat; background-size: $ninja-size; width: $ninja-size; height: ($ninja-size*2); -webkit-animation-duration: 1s; -webkit-animation-direction: alternate; -webkit-animation-name: ninjamove; -webkit-animation-iteration-count: infinite; } CSS Animations: what we had before

Slide 178

Slide 178 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 178 $ninja-size: 390px; $from: 0px; $to: 400px; $dura: 1s; @include keyframe(ninjamove) { from { @include translateX($from); } to { @include translateX($to); } } .ninja { background: transparent url("../img/rope.png") no-repeat; background-size: $ninja-size; width: $ninja-size; height: ($ninja-size*2); @include animation (0, $dura, ninjamove, alternate, infinite); } CSS Animations: better with mixins

Slide 179

Slide 179 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 NEAT. 179 That’s neat and all, but... really?

Slide 180

Slide 180 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 180 http://paulstamatiou.com/simplify CSS Animations: better example

Slide 181

Slide 181 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 181 CSS Animations: better example

Slide 182

Slide 182 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 182 CSS animation helpers http://daneden.me/animate/

Slide 183

Slide 183 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 http://daneden.me/animate/ http://thecssguru.freeiz.com/animate/ https://github.com/ericam/compass-animate 183 Yes, still be lazy!

Slide 184

Slide 184 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 WHEE! 184 Done with the good stuff. Back to serious now.

Slide 185

Slide 185 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 MID-PROJECT? 185 How do I start with Sass mid-project?

Slide 186

Slide 186 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 HAVE A PROCESS. 186 How do I start with Sass mid-project?

Slide 187

Slide 187 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 187 Sass mid-project: have a process. https://developers.google.com/speed/docs/best-practices/payload REMOVE UNUSED CSS MINIFY CSS SERVE SCALED IMAGES OPTIMIZE IMAGES

Slide 188

Slide 188 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 188 Sass mid-project: have a process. https://developers.google.com/speed/docs/best-practices/payload REMOVE UNUSED CSS MINIFY CSS SERVE SCALED IMAGES OPTIMIZE IMAGES GRUNT + CSSCSS

Slide 189

Slide 189 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 189 Sass mid-project: have a process. https://developers.google.com/speed/docs/best-practices/payload REMOVE UNUSED CSS MINIFY CSS SERVE SCALED IMAGES OPTIMIZE IMAGES compass compile --output-style compressed proj

Slide 190

Slide 190 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 190 Sass mid-project: have a process. https://developers.google.com/speed/docs/best-practices/payload REMOVE UNUSED CSS MINIFY CSS SERVE SCALED IMAGES OPTIMIZE IMAGES Sass with Media Queries

Slide 191

Slide 191 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 191 Sass mid-project: have a process. https://developers.google.com/speed/docs/best-practices/payload REMOVE UNUSED CSS MINIFY CSS SERVE SCALED IMAGES OPTIMIZE IMAGES GRUNT + IMAGEOPTIM

Slide 192

Slide 192 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 START REFACTORING 192 Start to refactor

Slide 193

Slide 193 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 PICK ONE. 193 Partials to organize the files

Slide 194

Slide 194 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 _partials.scss 194 Partials to organize the files

Slide 195

Slide 195 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 195 // _colors.scss $color-brand: #3b5998; $color-action: #67a54b; $color-function: #f2f2f2; $color-alert: #b22727; // color variations $color-brand-light: lighten( $brand-color, 10% ); $color-brand-lighter: lighten( $brand-color, 20% ); $color-brand-dark: darken( $brand-color, 10% ); $color-brand-darker: darken( $brand-color, 20% ); ... Partial file, an example

Slide 196

Slide 196 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 196 // main.scss @import ‘colors’; Partial file being included and compiled

Slide 197

Slide 197 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 197 Organizing CSS

Slide 198

Slide 198 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 198 BASE LAYOUT MODULE STATE THEME Organizing CSS: SMACSS principles

Slide 199

Slide 199 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 199 scss/ _base.scss modules/ _buttons.scss _forms.scss _typography.scss layouts/ _layout-full.scss _layout-small.scss main.scss Organizing CSS: SMACSS layouts with partials

Slide 200

Slide 200 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 200 // main.scss @import 'base'; @import 'modules/forms'; @import 'modules/typography'; @import 'modules/buttons'; @import 'layouts' ... Organizing CSS: SMACSS layouts with partials

Slide 201

Slide 201 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 201 http://wildbit.com/blog/2012/04/16/refactoring-14000-lines-of-css-into-sass/ Organizing CSS: Real world example

Slide 202

Slide 202 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 CHAT WITH ME: [email protected] • @kitt http://ki.tt/rpdx 202 Let me know if I can help!

Slide 203

Slide 203 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 SUPPORT SASS AND COMPASS 203 Support Compass and Sass http://umdf.org/compass

Slide 204

Slide 204 text

Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013 THANKS! 204