Lazy Dev's Dash through Sass

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

http://ki.tt/rpdx • Refresh PDX 2013 2

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

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.

http://ki.tt/rpdx • Refresh PDX 2013 HI. 6

http://ki.tt/rpdx • Refresh PDX 2013 WHO ARE YOU? 7 I will adjust the talk depending on the audience.

http://ki.tt/rpdx • Refresh PDX 2013 WHO AM I? 8 Why should you listen to me?

http://ki.tt/rpdx • Refresh PDX 2013 NOT A BAD THING! 10 Really, laziness is okay.

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 ﬁnd useful, and document what you wrote so you don't have to answer so many questions about it. Hence, the ﬁrst great virtue of a programmer. http://en.wikipedia.org/wiki/Larry_Wall 11

http://ki.tt/rpdx • Refresh PDX 2013 CSS 12 Why you’re here.

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.

http://ki.tt/rpdx • Refresh PDX 2013 14 #fcfce8 This crap, too.

http://ki.tt/rpdx • Refresh PDX 2013 15 #fcf9e5 I can’t tell this color from the previous color.

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... ...

http://ki.tt/rpdx • Refresh PDX 2013 17 What I might look like after a couple hours of CSS...

http://ki.tt/rpdx • Refresh PDX 2013 SASS 18 Why you’re REALLY here.

http://ki.tt/rpdx • Refresh PDX 2013 SASS 19 While it is an acronym...

http://ki.tt/rpdx • Refresh PDX 2013 Sass. 20 http://sass-lang.com/ ... it’s not an acronym.

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.

http://ki.tt/rpdx • Refresh PDX 2013 LET’S DASH! 22 Whee!

http://ki.tt/rpdx • Refresh PDX 2013 OH WAIT... 23 Shoot.

http://ki.tt/rpdx • Refresh PDX 2013 INSTALLATION 24 Oh, right, the tools.

http://ki.tt/rpdx • Refresh PDX 2013 RUBY 25 Installation information

http://ki.tt/rpdx • Refresh PDX 2013 ON A MAC? 26 Installation information - ruby on OSX

http://ki.tt/rpdx • Refresh PDX 2013 27 Installation information - ruby on OSX

http://ki.tt/rpdx • Refresh PDX 2013 OR, MAYBE NOT 28 Installation information - ruby on OSX

http://ki.tt/rpdx • Refresh PDX 2013 29 $ ruby --version ruby 1.8.7 (2012-02-08 patchlevel 358) Installation information - ruby on OSX

http://ki.tt/rpdx • Refresh PDX 2013 30 HOMEBREW http://mxcl.github.com/homebrew/ Installation information - ruby on OSX

http://ki.tt/rpdx • Refresh PDX 2013 31 HOMEBREW http://mxcl.github.com/homebrew/ Installation information - ruby on OSX

http://ki.tt/rpdx • Refresh PDX 2013 32 Installation information - ruby on OSX $ brew install ruby

http://ki.tt/rpdx • Refresh PDX 2013 RVM RUBY VERSION MANAGER 33 Installation information https://rvm.io/rvm/install

http://ki.tt/rpdx • Refresh PDX 2013 34 Installation information - ruby on OSX $ curl -L https://get.rvm.io | \ bash -s stable --ruby

http://ki.tt/rpdx • Refresh PDX 2013 LINUX? 35 Installation information - ruby

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

http://ki.tt/rpdx • Refresh PDX 2013 37 Installation information - ruby on linux # yum install ruby1.9.1 $ sudo yum install ruby1.9.1

http://ki.tt/rpdx • Refresh PDX 2013 38 Installation information - ruby on linux # pacman -S ruby $ sudo pacman -S ruby

http://ki.tt/rpdx • Refresh PDX 2013 RVM RUBY VERSION MANAGER 39 Installation information https://rvm.io/rvm/install

http://ki.tt/rpdx • Refresh PDX 2013 WINDOWS? 40 Installation information

http://ki.tt/rpdx • Refresh PDX 2013 RUBYINSTALLER = FRIEND 41 Installation information - ruby on windows http://rubyinstaller.org/downloads/

http://ki.tt/rpdx • Refresh PDX 2013 RUBYINSTALLER = FRIEND 42 BE LAZY! http://rubyinstaller.org/downloads/

http://ki.tt/rpdx • Refresh PDX 2013 FINALLY! 43 Now we can install Sass.

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!

http://ki.tt/rpdx • Refresh PDX 2013 COMPASS 45 But, wait! There’s more! http://compass-style.org/install/

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.

http://ki.tt/rpdx • Refresh PDX 2013 WHY? 47 Setting up tools - Why install Compass?

http://ki.tt/rpdx • Refresh PDX 2013 GRUNT 48 Setting up tools - install Grunt to automate things http://gruntjs.com/

http://ki.tt/rpdx • Refresh PDX 2013 NODE 49 Setting up tools - need node to install Grunt http://nodejs.org/

http://ki.tt/rpdx • Refresh PDX 2013 50 http://www.ﬂickr.com/photos/postbear/7445381260

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

http://ki.tt/rpdx • Refresh PDX 2013 LIVERELOAD 52 Setting up tools - if Grunt is too heavy, use LiveReload http://livereload.com/

http://ki.tt/rpdx • Refresh PDX 2013 GAH! 53 Maybe too much command line?

http://ki.tt/rpdx • Refresh PDX 2013 SCOUT 54 Skip the command line if you need to. http://mhs.github.io/scout-app/

http://ki.tt/rpdx • Refresh PDX 2013 PHEW! 55 Done setting up tools (actually, we skipped a bunch of it)

http://ki.tt/rpdx • Refresh PDX 2013 OVERVIEW 56 Going to talk about Sass now. Really.

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

http://ki.tt/rpdx • Refresh PDX 2013 $variables 58 Sass dash, talking variables

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...

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!

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!

http://ki.tt/rpdx • Refresh PDX 2013 62 /* line 22, ../scss/styles.scss */ .button { background-color: #fffb72; ... } Sass dash, talking variables

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/

http://ki.tt/rpdx • Refresh PDX 2013 64 $debug-this-crap: 1; Uses of variables: development settings

http://ki.tt/rpdx • Refresh PDX 2013 65 http://www.makemylogobiggercream.com/ Uses of variables: make the logo bigger

http://ki.tt/rpdx • Refresh PDX 2013 NESTING! 66 Sass Overview

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

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

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

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/

http://ki.tt/rpdx • Refresh PDX 2013 @extend 71 Sass syntax, @extend

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; }

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; }

http://ki.tt/rpdx • Refresh PDX 2013 74 Sass syntax, talking @extend <div class=”box box-info”> ... </div>

http://ki.tt/rpdx • Refresh PDX 2013 75 Sass syntax, talking @extend <div class=”box-info”> ... </div>

http://ki.tt/rpdx • Refresh PDX 2013 @mixin 76 Sass syntax, @mixin

http://ki.tt/rpdx • Refresh PDX 2013 @mixin 77 Sass syntax, @mixin (@include)

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); }

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; }

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; }

http://ki.tt/rpdx • Refresh PDX 2013 DON’T DO THAT. 81 Sass syntax, use what other people have done.

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/

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/

http://ki.tt/rpdx • Refresh PDX 2013 @mixin vs @extend 84 Sass Overview

http://ki.tt/rpdx • Refresh PDX 2013 MATH! 85 Sass Overview

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); }

http://ki.tt/rpdx • Refresh PDX 2013 87 .division { width: 80%/20; // whoops! } Sass syntax, math!

http://ki.tt/rpdx • Refresh PDX 2013 @function 88 Sass Overview

http://ki.tt/rpdx • Refresh PDX 2013 http://timhettler.github.io/cssconf-2013 89 Sass Overview

http://ki.tt/rpdx • Refresh PDX 2013 @if @else 90 Sass Overview

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

http://ki.tt/rpdx • Refresh PDX 2013 @for 92 Are you even looking at this?

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

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

http://ki.tt/rpdx • Refresh PDX 2013 @each 95 Sass syntax, use @each on background images

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/ﬁle.SASS_REFERENCE.html#id8

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/ﬁle.SASS_REFERENCE.html#interpolation_

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

http://ki.tt/rpdx • Refresh PDX 2013 MORE PHEW! 99 Deep breath...

http://ki.tt/rpdx • Refresh PDX 2013 100 Setting up projects

http://ki.tt/rpdx • Refresh PDX 2013 101 Getting started $ mv css/styles.css scss/styles.scss

http://ki.tt/rpdx • Refresh PDX 2013 _partials.scss 102 Partials to organize the ﬁles

http://ki.tt/rpdx • Refresh PDX 2013 103 Organizing CSS

http://ki.tt/rpdx • Refresh PDX 2013 104 Interface Inventories

http://ki.tt/rpdx • Refresh PDX 2013 CHROME DEVTOOLS 105 All

http://ki.tt/rpdx • Refresh PDX 2013 CHROME DEVTOOLS 106 FIRESASS All the ...

http://ki.tt/rpdx • Refresh PDX 2013 CHROME DEVTOOLS 107 FIRESASS SOURCE MAPS All the tools ...

http://ki.tt/rpdx • Refresh PDX 2013 CHROME DEVTOOLS 108 FIRESASS SOURCE MAPS CSSCSS All the tools I won’t ...

http://ki.tt/rpdx • Refresh PDX 2013 CHROME DEVTOOLS 109 FIRESASS SOURCE MAPS CSSCSS SPRITES All the tools I won’t get to.

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

http://ki.tt/rpdx • Refresh PDX 2013 THE GOOD STUFF! 111

http://ki.tt/rpdx • Refresh PDX 2013 GRADIENTS 112

http://ki.tt/rpdx • Refresh PDX 2013 linear 113

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.

http://ki.tt/rpdx • Refresh PDX 2013 115 Now consider adjusting this gradient. O_o http://www.colorzilla.com/gradient-editor/

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.

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/

http://ki.tt/rpdx • Refresh PDX 2013 118 Using CSS gradients, results are the same

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/

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%)); }

http://ki.tt/rpdx • Refresh PDX 2013 121 ... like your designer is happily high on life.

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%)); }

http://ki.tt/rpdx • Refresh PDX 2013 123 Hard gradient stops

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)); }

http://ki.tt/rpdx • Refresh PDX 2013 125 But doesn’t always look good

http://ki.tt/rpdx • Refresh PDX 2013 radial 126

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)); }

http://ki.tt/rpdx • Refresh PDX 2013 128 Radial gradients. What does it mean?

http://ki.tt/rpdx • Refresh PDX 2013 129 Radial gradients: a better example.

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>

http://ki.tt/rpdx • Refresh PDX 2013 131 Still talking gradients, radial ones now. $cssconf-bg: #96cd23; body.cssconf { background-color: $cssconf-bg; }

http://ki.tt/rpdx • Refresh PDX 2013 132 Still talking gradients, radial ones now. $cssconf-bg: #96cd23; body { &.cssconf { background-color: $cssconf-bg; }

http://ki.tt/rpdx • Refresh PDX 2013 133 Still talking gradients, radial ones now. $cssconf-bg: #96cd23; body { &.cssconf { background-color: $cssconf-bg; }

http://ki.tt/rpdx • Refresh PDX 2013 134 Still talking gradients, radial ones now.

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)); } }

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)); } }

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; } }

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)); } }

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; } }

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; } }

http://ki.tt/rpdx • Refresh PDX 2013 144 Still on gradients, showing the Sass variables

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);

http://ki.tt/rpdx • Refresh PDX 2013 146 Still on gradients, showing the Sass variables

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

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

http://ki.tt/rpdx • Refresh PDX 2013 149 Still on gradients, showing off lighten, darken, complement

http://ki.tt/rpdx • Refresh PDX 2013 150 Those gradients! Gosh! You can do a lot! http://lea.verou.me/css3patterns/

http://ki.tt/rpdx • Refresh PDX 2013 INTERLUDE 151

http://ki.tt/rpdx • Refresh PDX 2013 TRANSFORMS 152

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

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

http://ki.tt/rpdx • Refresh PDX 2013 155 Transform example page

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

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

http://ki.tt/rpdx • Refresh PDX 2013 160 @import "compass/css3/transform"; .transform-me { @include scaleX(0.5); } Transforms with Compass

http://ki.tt/rpdx • Refresh PDX 2013 ANIMATIONS! 162 Ooooooo! The good stuff!

http://ki.tt/rpdx • Refresh PDX 2013 DEFINITION 163 Two parts of CSS animations, ﬁrst is:

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: deﬁning the animation

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: deﬁning the animation

http://ki.tt/rpdx • Refresh PDX 2013 KEYFRAMES 166 Two parts of CSS animations, second is:

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: deﬁning the animation

http://ki.tt/rpdx • Refresh PDX 2013 168 Ninjas! http://vmfarms.com/our-platform/ruby/

http://ki.tt/rpdx • Refresh PDX 2013 169 Not so ninja!

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

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

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.

http://ki.tt/rpdx • Refresh PDX 2013 173 Not so ninja!

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

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

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

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

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

http://ki.tt/rpdx • Refresh PDX 2013 NEAT. 179 That’s neat and all, but... really?

http://ki.tt/rpdx • Refresh PDX 2013 180 http://paulstamatiou.com/simplify CSS Animations: better example

http://ki.tt/rpdx • Refresh PDX 2013 181 CSS Animations: better example

http://ki.tt/rpdx • Refresh PDX 2013 182 CSS animation helpers http://daneden.me/animate/

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!

http://ki.tt/rpdx • Refresh PDX 2013 WHEE! 184 Done with the good stuff. Back to serious now.

http://ki.tt/rpdx • Refresh PDX 2013 MID-PROJECT? 185 How do I start with Sass mid-project?

http://ki.tt/rpdx • Refresh PDX 2013 HAVE A PROCESS. 186 How do I start with Sass mid-project?

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

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

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

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

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

http://ki.tt/rpdx • Refresh PDX 2013 START REFACTORING 192 Start to refactor

http://ki.tt/rpdx • Refresh PDX 2013 PICK ONE. 193 Partials to organize the ﬁles

http://ki.tt/rpdx • Refresh PDX 2013 _partials.scss 194 Partials to organize the ﬁles

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 ﬁle, an example

http://ki.tt/rpdx • Refresh PDX 2013 196 // main.scss @import ‘colors’; Partial ﬁle being included and compiled

http://ki.tt/rpdx • Refresh PDX 2013 197 Organizing CSS

http://ki.tt/rpdx • Refresh PDX 2013 198 BASE LAYOUT MODULE STATE THEME Organizing CSS: SMACSS principles

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

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

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

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!

http://ki.tt/rpdx • Refresh PDX 2013 SUPPORT SASS AND COMPASS 203 Support Compass and Sass http://umdf.org/compass

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

Lazy Dev's Dash through Sass

Lazy Dev's Dash through Sass

More Decks by Kitt Hodsden

Other Decks in Programming

Featured

Transcript