Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lazy Dev's Dash through Sass

Lazy Dev's Dash through Sass

CSS can do all these amazing things now: Animations! Gradients! Transforms! Yet, it’s tricky to remember every vendor prefix and, blech, time consuming to do everything by hand. Let’s take a mad dash through CSS automation with Sass and other handy tools to automate ALL THE THINGS CSS (including those amazing things), traveling but one path to a faster, easier, and more reliable way to develop websites and web applications.

3f2f0c0fbc7be587727cdfff33c8be43?s=128

Kitt Hodsden

July 17, 2013
Tweet

Transcript

  1. 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
  2. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

    http://ki.tt/rpdx • Refresh PDX 2013 3
  4. 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
  5. 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.
  6. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 HI. 6
  7. 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.
  8. 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?
  9. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

    http://ki.tt/rpdx • Refresh PDX 2013 NOT A BAD THING! 10 Really, laziness is okay.
  11. 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
  12. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 CSS 12 Why you’re here.
  13. 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.
  14. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 14 #fcfce8 This crap, too.
  15. 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.
  16. 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... ...
  17. 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...
  18. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

    http://ki.tt/rpdx • Refresh PDX 2013 SASS 19 While it is an acronym...
  20. 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.
  21. 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.
  22. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

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

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

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

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

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

    http://ki.tt/rpdx • Refresh PDX 2013 OR, MAYBE NOT 28 Installation information - ruby on OSX
  29. 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
  30. 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
  31. 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
  32. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 32 Installation information - ruby on OSX $ brew install ruby
  33. 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
  34. 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
  35. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 LINUX? 35 Installation information - ruby
  36. 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
  37. 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
  38. 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
  39. 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
  40. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 WINDOWS? 40 Installation information
  41. 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/
  42. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

    http://ki.tt/rpdx • Refresh PDX 2013 FINALLY! 43 Now we can install Sass.
  44. 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!
  45. 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/
  46. 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.
  47. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 WHY? 47 Setting up tools - Why install Compass?
  48. 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/
  49. 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/
  50. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 50 http://www.flickr.com/photos/postbear/7445381260
  51. 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
  52. 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/
  53. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 GAH! 53 Maybe too much command line?
  54. 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/
  55. 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)
  56. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 OVERVIEW 56 Going to talk about Sass now. Really.
  57. 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
  58. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 $variables 58 Sass dash, talking variables
  59. 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...
  60. 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!
  61. 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!
  62. 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
  63. 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/
  64. 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
  65. 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
  66. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 NESTING! 66 Sass Overview
  67. 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
  68. 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
  69. 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
  70. 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/
  71. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 @extend 71 Sass syntax, @extend
  72. 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; }
  73. 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; }
  74. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 74 Sass syntax, talking @extend <div class=”box box-info”> ... </div>
  75. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 75 Sass syntax, talking @extend <div class=”box-info”> ... </div>
  76. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

    http://ki.tt/rpdx • Refresh PDX 2013 @mixin 77 Sass syntax, @mixin (@include)
  78. 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); }
  79. 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; }
  80. 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; }
  81. 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.
  82. 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/
  83. 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/
  84. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

    http://ki.tt/rpdx • Refresh PDX 2013 MATH! 85 Sass Overview
  86. 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); }
  87. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

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

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

    http://ki.tt/rpdx • Refresh PDX 2013 @if @else 90 Sass Overview
  91. 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
  92. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 @for 92 Are you even looking at this?
  93. 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
  94. 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
  95. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 @each 95 Sass syntax, use @each on background images
  96. 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
  97. 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_
  98. 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
  99. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

    http://ki.tt/rpdx • Refresh PDX 2013 100 Setting up projects
  101. 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
  102. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

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

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

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

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

    http://ki.tt/rpdx • Refresh PDX 2013 CHROME DEVTOOLS 107 FIRESASS SOURCE MAPS All the tools ...
  108. 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 ...
  109. 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.
  110. 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
  111. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

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

    http://ki.tt/rpdx • Refresh PDX 2013 linear 113
  114. 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.
  115. 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/
  116. 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.
  117. 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/
  118. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 118 Using CSS gradients, results are the same
  119. 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/
  120. 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%)); }
  121. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 121 ... like your designer is happily high on life.
  122. 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%)); }
  123. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 123 Hard gradient stops
  124. 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)); }
  125. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

    http://ki.tt/rpdx • Refresh PDX 2013 radial 126
  127. 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)); }
  128. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

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

    http://ki.tt/rpdx • Refresh PDX 2013 130 Still talking gradients, radial ones now. <html> <head> <link href="css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> </head> <body class="cssconf"> Yay background.<br /> <a href="cssconf2.html">Next</a> </body> <html>
  131. 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; }
  132. 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; }
  133. 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; }
  134. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 134 Still talking gradients, radial ones now.
  135. 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)); } }
  136. 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)); } }
  137. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 137 Still talking gradients, radial ones now.
  138. 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; } }
  139. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 139 Still talking gradients, radial ones now.
  140. 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)); } }
  141. 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; } }
  142. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 142 Still talking gradients, radial ones now.
  143. 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; } }
  144. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 144 Still on gradients, showing the Sass variables
  145. 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);
  146. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 146 Still on gradients, showing the Sass variables
  147. 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
  148. 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
  149. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 149 Still on gradients, showing off lighten, darken, complement
  150. 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/
  151. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

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

    http://ki.tt/rpdx • Refresh PDX 2013 153 <html> <head> <link href="css/transform.css" media="screen, projection" rel="stylesheet" type="text/css" /> </head> <body class="transform"> <div class="transform-me"> <iframe src="http://rfrshpdx.org/"></iframe> </div> <a href="index.html">index</a> </body> <html> Transform example HTML
  154. 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
  155. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 155 Transform example page
  156. 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
  157. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 157 Transform example page
  158. 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
  159. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 159 Transform example page
  160. 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
  161. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

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

    http://ki.tt/rpdx • Refresh PDX 2013 DEFINITION 163 Two parts of CSS animations, first is:
  164. 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
  165. 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
  166. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 KEYFRAMES 166 Two parts of CSS animations, second is:
  167. 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
  168. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

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

    http://ki.tt/rpdx • Refresh PDX 2013 170 <html> <head> <link href="css/ninja.css" media="screen, projection" rel="stylesheet" type="text/css" /> </head> <body class="ninja-anim"> <div class="container"> <div class="ninja"></div> </div> </body> <html> CSS Animations: ninja example HTML
  171. 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
  172. 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.
  173. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 173 Not so ninja!
  174. 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
  175. 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
  176. 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
  177. 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
  178. 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
  179. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

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

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

    http://ki.tt/rpdx • Refresh PDX 2013 182 CSS animation helpers http://daneden.me/animate/
  183. 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!
  184. 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.
  185. 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?
  186. 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?
  187. 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
  188. 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
  189. 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
  190. 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
  191. 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
  192. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

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

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

    http://ki.tt/rpdx • Refresh PDX 2013 _partials.scss 194 Partials to organize the files
  195. 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
  196. 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
  197. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 197 Organizing CSS
  198. 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
  199. 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
  200. 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
  201. 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
  202. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 CHAT WITH ME: hey@ki.tt • @kitt http://ki.tt/rpdx 202 Let me know if I can help!
  203. 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
  204. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt •

    http://ki.tt/rpdx • Refresh PDX 2013 THANKS! 204