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

View Slide

2

View Slide

3

View Slide

A LAZY CSS DEV’S
DASH THROUGH SASS

View Slide

A LAZY CSS DEV’S
DASH THROUGH SASS
Look up here for the why.

View Slide

HI.
6

View Slide

WHO ARE YOU?
7
I will adjust the talk depending on the audience.

View Slide

WHO AM I?
8
Why should you listen to me?

View Slide

9

View Slide

NOT A BAD THING!
10
Really, laziness is okay.

View Slide

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

View Slide

CSS
12
Why you’re here.

View Slide

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

View Slide

14
#fcfce8
This crap, too.

View Slide

15
#fcf9e5
I can’t tell this color from the previous color.

View Slide

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

View Slide

17
What I might look like after a couple hours of CSS...

View Slide

SASS
18
Why you’re REALLY here.

View Slide

SASS
19
While it is an acronym...

View Slide

Sass.
20
http://sass-lang.com/
... it’s not an acronym.

View Slide

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.

View Slide

LET’S DASH!
22
Whee!

View Slide

OH WAIT...
23
Shoot.

View Slide

INSTALLATION
24
Oh, right, the tools.

View Slide

RUBY
25
Installation information

View Slide

ON A MAC?
26
Installation information - ruby on OSX

View Slide

27

View Slide

OR, MAYBE NOT
28

View Slide

29
$ ruby --version
ruby 1.8.7 (2012-02-08 patchlevel 358)

View Slide

30
HOMEBREW
http://mxcl.github.com/homebrew/

View Slide

31
HOMEBREW
http://mxcl.github.com/homebrew/

View Slide

32
$ brew install ruby

View Slide

RVM
RUBY VERSION MANAGER
33
https://rvm.io/rvm/install

View Slide

34
$ curl -L https://get.rvm.io | \
bash -s stable --ruby

View Slide

LINUX?
35
Installation information - ruby

View Slide

36
Installation information - ruby on linux
# apt-get install ruby1.9.1
$ sudo apt-get install ruby1.9.1

View Slide

37
# yum install ruby1.9.1
$ sudo yum install ruby1.9.1

View Slide

38
# pacman -S ruby
$ sudo pacman -S ruby

View Slide

RVM
RUBY VERSION MANAGER
39
https://rvm.io/rvm/install

View Slide

WINDOWS?
40

View Slide

RUBYINSTALLER = FRIEND
41
Installation information - ruby on windows
http://rubyinstaller.org/downloads/

View Slide

RUBYINSTALLER = FRIEND
42
BE LAZY!
http://rubyinstaller.org/downloads/

View Slide

FINALLY!
43
Now we can install Sass.

View Slide

44
$ gem update --system
$ gem install sass
$ sudo gem update --system
$ sudo gem install sass
Yay! Sass installed!

View Slide

COMPASS
45
But, wait! There’s more!
http://compass-style.org/install/

View Slide

46
$ gem update --system
$ gem install compass
$ sudo gem update --system
$ sudo gem install compass
Setting up tools. In this case, Compass.

View Slide

WHY?
47
Setting up tools - Why install Compass?

View Slide

GRUNT
48
Setting up tools - install Grunt to automate things
http://gruntjs.com/

View Slide

NODE
49
Setting up tools - need node to install Grunt
http://nodejs.org/

View Slide

50
http://www.ﬂickr.com/photos/postbear/7445381260

View Slide

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

View Slide

LIVERELOAD
52
Setting up tools - if Grunt is too heavy, use LiveReload
http://livereload.com/

View Slide

GAH!
53
Maybe too much command line?

View Slide

SCOUT
54
Skip the command line if you need to.
http://mhs.github.io/scout-app/

View Slide

PHEW!
55
Done setting up tools (actually, we skipped a bunch of it)

View Slide

OVERVIEW
56
Going to talk about Sass now. Really.

View Slide

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

View Slide

$variables
58
Sass dash, talking variables

View Slide

59
dev[405]% grep background-color *
style.css: background-color: #ddecf5;
style.css: background-color: #e6f1f7;
style.css: background-color: #d4e7f3;
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...

View Slide

60
$color-main: rgb(255,251,114); // #FFFB72
$color-second: rgb(70,87,204); // #4657CC
$color-hilite: rgb(189,177,255); // #BDB1FF
After variables!

View Slide

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!

View Slide

62
/* line 22, ../scss/styles.scss */
.button {
background-color: #fffb72;
...
}
Sass dash, talking variables

View Slide

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/

View Slide

64
$debug-this-crap: 1;
Uses of variables: development settings

View Slide

65
http://www.makemylogobiggercream.com/
Uses of variables: make the logo bigger

View Slide

NESTING!
66
Sass Overview

View Slide

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

View Slide

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

View Slide

69
a {
color: #444040;
}
a:hover, a:focus {
color: #994040;
}
a:visited, a:active {
color: #660040;
}

View Slide

DON’T NEST MORE
THAN THREE LEVELS.
70
Sass syntax, nesting best practice
http://css-tricks.com/sass-style-guide/

View Slide

@extend
71
Sass syntax, @extend

View Slide

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

View Slide

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

View Slide

74

...

View Slide

75

...

View Slide

@mixin
76
Sass syntax, @mixin

View Slide

@mixin
77
Sass syntax, @mixin
(@include)

View Slide

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

View Slide

79
Sass syntax, @mixin
* {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

View Slide

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

View Slide

DON’T DO THAT.
81
Sass syntax, use what other people have done.

View Slide

82
Sass syntax, @mixin
@import "compass/css3/box-sizing";
* {
@include box-sizing(border-box);
}
http://compass-style.org/reference/compass/css3/box_sizing/

View Slide

83
Sass syntax, @mixin
@import "compass/css3/box-sizing";
* {
@include box-sizing(border-box);
}
http://compass-style.org/reference/compass/css3/box_sizing/

View Slide

@mixin vs @extend
84
Sass Overview

View Slide

MATH!
85
Sass Overview

View Slide

86
Sass syntax, math!
.addition {
width: 20% + 80%;
}
.subtraction {
width: 80% - 20%;
}
.multiplication {
width: 20 * 80px;
}
.division {
width: (80%/20);
}

View Slide

87
.division {
width: 80%/20; // whoops!
}
Sass syntax, math!

View Slide

@function
88
Sass Overview

View Slide

http://timhettler.github.io/cssconf-2013
89
Sass Overview

View Slide

@if
@else
90
Sass Overview

View Slide

91
@function get-button-color($color) {
@return if(lightness($color) > 50, #333, #fff );
}
Sass syntax, logic control

View Slide

@for
92
Are you even looking at this?

View Slide

93
@for $i from 1 through 4 {
.buy_#{$i} {
background-image: image-url("buy_#{$i}.png");
}
}
Sass syntax, use @for on background images

View Slide

94
.buy_1 {
background-image: url('../img/buy_1.png?135785329');
}
.buy_2 {
}
.buy_3 {
}
.buy_4 {
}
Sass syntax, use @for on background images

View Slide

@each
95
Sass syntax, use @each on background images

View Slide

96
// @each example
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
http://sass-lang.com/docs/yardoc/ﬁle.SASS_REFERENCE.html#id8

View Slide

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_

View Slide

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

View Slide

MORE PHEW!
99
Deep breath...

View Slide

100
Setting up projects

View Slide

101
Getting started
$ mv css/styles.css scss/styles.scss

View Slide

_partials.scss
102
Partials to organize the ﬁles

View Slide

103
Organizing CSS

View Slide

104
Interface Inventories

View Slide

CHROME DEVTOOLS
105
All

View Slide

CHROME DEVTOOLS
106
FIRESASS
All the ...

View Slide

CHROME DEVTOOLS
107
FIRESASS
SOURCE MAPS
All the tools ...

View Slide

CHROME DEVTOOLS
108
FIRESASS
SOURCE MAPS
CSSCSS
All the tools I won’t ...

View Slide

CHROME DEVTOOLS
109
FIRESASS
SOURCE MAPS
CSSCSS
SPRITES
All the tools I won’t get to.

View Slide

CHROME DEVTOOLS
110
FIRESASS
SOURCE MAPS
CSSCSS
SPRITES
All the tools I won’t get to.
MEDIA QUERIES

View Slide

THE GOOD STUFF!
111

View Slide

GRADIENTS
112

View Slide

linear
113

View Slide

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.

View Slide

115
Now consider adjusting this gradient. O_o

View Slide

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 */
Looking at how bad linear-gradient CSS can be.

View Slide

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/

View Slide

118
Using CSS gradients, results are the same

View Slide

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/

View Slide

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

View Slide

121
... like your designer is happily high on life.

View Slide

122
We can force hard stops in gradients
@import "compass";
...
#hard-edges {
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%));
}

View Slide

123
Hard gradient stops

View Slide

124
Can control color transitions...
@import "compass";
...
$fade-edge: 5%;
$edge1: 20%;
$edge2: 40%;
$edge3: 60%;
$edge4: 80%;
$edge5: 100%;
#crown-fades {
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));
}

View Slide

125
But doesn’t always look good

View Slide

radial
126

View Slide

127
Still talking gradients, radial ones now.
@import "compass";
...
#radial-gradient {
@include background-image(radial-gradient(120px
120px, pink 80px, red 120px));
}

View Slide

128
Radial gradients. What does it mean?

View Slide

129
Radial gradients: a better example.

View Slide

130

Yay background.

Next

View Slide

131
$cssconf-bg: #96cd23;
body.cssconf {
background-color: $cssconf-bg;
}

View Slide

132
body {
&.cssconf {
}

View Slide

133
body {
&.cssconf {
}

View Slide

134

View Slide

135
$cssconf-fg1: rgba(204,102,153,0) 64%;
$cssconf-fg2: #cc6699 66%;
$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));
}
}

View Slide

136
$cssconf-fg1: rgba(204,102,153,0) 64%;
$cssconf-fg4: rgba(204,102,153,0) 77%;
$cssconf-fg5: rgba(255,204,0,0) 90%;
body {
&.step2 {
@include background-image(radial-gradient($cssconf-
$cssconf-fg5, $cssconf-fg6), radial-gradient($cssconf-
$cssconf-fg5, $cssconf-fg6));
}
}

View Slide

137

View Slide

138
$bg-size: 200px;
body {
&.step3 {
background-size: $bg-size $bg-size;
}
}

View Slide

139

View Slide

140
$cssconf-fg1: rgba(204,102,153,0) 64%;
$cssconf-fg4: rgba(204,102,153,0) 77%;
$cssconf-fg5: rgba(255,204,0,0) 90%;
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));
}
}

View Slide

141
$bg-size: 200px;
$bg-offset: ($bg-size / 2);
body {
&.step4 {
background-position-x: 0px, $bg-offset;
background-position-y: 0px, $bg-offset;
}
}

View Slide

142

View Slide

143
$cssconf-fg1: rgba(204,102,153,0) 64%;
$cssconf-fg4: rgba(204,102,153,0) 77%;
$cssconf-fg5: rgba(255,204,0,0) 90%;
$cssconf-hilite1: #ffcc00;
$bg-size: 200px;
body {
&.cssconf {
}
&.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;
}
}

View Slide

144
Still on gradients, showing the Sass variables

View Slide

145
$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-hilite1: #ff6c00;
$bg-size: 100px;

View Slide

146
Still on gradients, showing the Sass variables

View Slide

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

View Slide

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%));
}
}
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

View Slide

149

View Slide

150
Those gradients! Gosh! You can do a lot!
http://lea.verou.me/css3patterns/

View Slide

INTERLUDE
151

View Slide

TRANSFORMS
152

View Slide

153

index

Transform example HTML

View Slide

154
@import "compass/css3/transform";
$ifsize: 400px;
iframe {
height: $ifsize;
width: $ifsize;
border: 3px solid red;
}
.transform-me {
}
Transforms with Compass

View Slide

155
Transform example page

View Slide

156
$ifsize: 400px;
iframe {
height: $ifsize;
width: $ifsize;
}
.transform-me {
@include rotate(90deg);
}

View Slide

157

View Slide

158
$ifsize: 400px;
iframe {
height: $ifsize;
width: $ifsize;
}
.transform-me {
@include transform-origin(($ifsize/2), ($ifsize/
2));
@include rotate(90deg);
}

View Slide

159

View Slide

160
.transform-me {
@include scaleX(0.5);
}

View Slide

161

View Slide

ANIMATIONS!
162
Ooooooo! The good stuff!

View Slide

DEFINITION
163
Two parts of CSS animations, ﬁrst is:

View Slide

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

View Slide

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;

View Slide

KEYFRAMES
166
Two parts of CSS animations, second is:

View Slide

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

View Slide

168
Ninjas!
http://vmfarms.com/our-platform/ruby/

View Slide

169
Not so ninja!

View Slide

170

CSS Animations: ninja example HTML

View Slide

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

View Slide

172
@-webkit-keyframes ninjamove {
from {
-webkit-transform: translateX(-30px);
}
to {
-webkit-transform: translateX(300px);
}
}
.ninja {
width: $ninja-size;
height: ($ninja-size*2);
-webkit-animation-name: ninjamove;
-webkit-animation-iteration-count: infinite;
}
CSS Animations: well, this works. sorta.

View Slide

173
Not so ninja!

View Slide

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

View Slide

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

View Slide

176
@include keyframe(ninjamove) {
from {
@include translateX($from);
}
to {
@include translateX($to);
}
}
CSS Animations: example of keyframes

View Slide

177
@-webkit-keyframes ninjamove {
from {
-webkit-transform: translateX(-30px);
}
to {
-webkit-transform: translateX(300px);
}
}
.ninja {
background: transparent url("../img/ninja.png") no-repeat;
width: $ninja-size;
-webkit-animation-name: ninjamove;
-webkit-animation-iteration-count: infinite;
}
CSS Animations: what we had before

View Slide

178
$ninja-size: 390px;
$from: 0px;
$to: 400px;
$dura: 1s;
@include keyframe(ninjamove) {
from {
@include translateX($from);
}
to {
@include translateX($to);
}
}
.ninja {
width: $ninja-size;
@include animation (0, $dura, ninjamove, alternate, infinite);
}
CSS Animations: better with mixins

View Slide

NEAT.
179
That’s neat and all, but... really?

View Slide

180
http://paulstamatiou.com/simplify
CSS Animations: better example

View Slide

181
CSS Animations: better example

View Slide

182
CSS animation helpers
http://daneden.me/animate/

View Slide

http://daneden.me/animate/
http://thecssguru.freeiz.com/animate/
https://github.com/ericam/compass-animate
183
Yes, still be lazy!

View Slide

WHEE!
184
Done with the good stuff. Back to serious now.

View Slide

MID-PROJECT?
185
How do I start with Sass mid-project?

View Slide

HAVE A PROCESS.
186
How do I start with Sass mid-project?

View Slide

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

View Slide

188
REMOVE UNUSED CSS
MINIFY CSS
SERVE SCALED IMAGES
OPTIMIZE IMAGES
GRUNT + CSSCSS

View Slide

189
REMOVE UNUSED CSS
MINIFY CSS
SERVE SCALED IMAGES
OPTIMIZE IMAGES
compass compile --output-style compressed proj

View Slide

190
REMOVE UNUSED CSS
MINIFY CSS
SERVE SCALED IMAGES
OPTIMIZE IMAGES
Sass with Media Queries

View Slide

191
REMOVE UNUSED CSS
MINIFY CSS
SERVE SCALED IMAGES
OPTIMIZE IMAGES
GRUNT + IMAGEOPTIM

View Slide

START REFACTORING
192
Start to refactor

View Slide

PICK ONE.
193

View Slide

_partials.scss
194

View Slide

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

View Slide

196
// main.scss
@import ‘colors’;
Partial ﬁle being included and compiled

View Slide

197
Organizing CSS

View Slide

198
BASE
LAYOUT
MODULE
STATE
THEME
Organizing CSS: SMACSS principles

View Slide

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

View Slide

200
// main.scss
@import 'base';
@import 'modules/forms';
@import 'modules/typography';
@import 'modules/buttons';
@import 'layouts'
...
Organizing CSS: SMACSS layouts with partials

View Slide

201
http://wildbit.com/blog/2012/04/16/refactoring-14000-lines-of-css-into-sass/
Organizing CSS: Real world example

View Slide

CHAT WITH ME:
[email protected] • @kitt
http://ki.tt/rpdx
202
Let me know if I can help!

View Slide

SUPPORT SASS
AND COMPASS
203
Support Compass and Sass
http://umdf.org/compass

View Slide

THANKS!
204

View Slide

Lazy Dev's Dash through Sass

Lazy Dev's Dash through Sass

Kitt Hodsden

More Decks by Kitt Hodsden

Other Decks in Programming

Featured

Transcript