sassive aggressive: using sass to make your life easier (nswg version)
DESCRIPTION
It's time to get sassy! By populer demand, this month's meetup features a talk by web developers Adam Darowski and Joel Oliviera on Sass (Syntactically Awesome Stylesheets). Learn how to make syling fun again with this simpler, more elegant syntax for CSS. Adam & Joel will explain the ins and outs of SASS by going through some step-by-step examples of how you can put it to use in your own workflow.TRANSCRIPT
Sassive AggressiveUsing Sass to make your life easier
Who?
Adam DarowskiWeb Developer, PatientsLikeMe
Joel OliveiraDeveloper, The47th
What is Sass?
What is Sass?
sass-lang.com
What is Sass?
•CSS on steroids
•Adds Variables, Mixins, Nesting, Inheritance, and more…
•It’s a meta-language that compiles to plain old CSS
•Two “flavors” - Sass & SCSS
<rant>
Sass came first
body background-color: #fff color: #000 font: 16px/1.6 Georgia margin: 0
SCSS came next
body { background-color: #fff; color: #000; font: 16px/1.6 Georgia; margin: 0;}
body#home.home { .content { #learn-more { #faq { margin-top: 20px; aside { width: 300px; padding: 0 40px; h4 span { @include sans-serif-font(20px); } ul { color: #666; font-size: 12px; line-height: 1.5; list-style: square; padding-left: 1.2em; li { margin-bottom: 8px; { li:before { color: red; } } } ol { @include sans-serif-font(24px, $heading-color); list-style: decimal; max-width: 480px; p { font-size: 16px; margin: 1em 0; } } } } }}
ol { @include sans-serif-font(24px, $heading-color); list-style: decimal; max-width: 480px; p { font-size: 16px; margin: 1em 0; } } } } }}
body#home.home { .content { #learn-more { #faq { margin-top: 20px; aside { width: 300px; padding: 0 40px; h4 span { @include sans-serif-font(20px); } ul { color: #666; font-size: 12px; line-height: 1.5; list-style: square; padding-left: 1.2em; li { margin-bottom: 8px; { li:before { color: red; } } } ol { @include sans-serif-font(24px, $heading-color); list-style: decimal; max-width: 480px; p { font-size: 16px; margin: 1em 0; } } } } }}
body#home.home { .content { #learn-more { #faq { margin-top: 20px; aside { width: 300px; padding: 0 40px; h4 span { @include sans-serif-font(20px); } ul { color: #666; font-size: 12px; line-height: 1.5; list-style: square; padding-left: 1.2em; li { margin-bottom: 8px; { li:before { color: red; } } } ol { @include sans-serif-font(24px, $heading-color); list-style: decimal; max-width: 480px; p { font-size: 16px; margin: 1em 0; } } } } }}
body#home.home .content #learn-more #faq margin-top: 20px aside width: 300px padding: 0 40px h4 span @include sans-serif-font(20px) ul color: #666 font-size: 12px line-height: 1.5 list-style: square padding-left: 1.2em li margin-bottom: 8px li:before color: red ol @include sans-serif-font(24px, $heading-color) list-style: decimal max-width: 480px p font-size: 16px margin: 1em 0
Sass > SCSS
</rant>
Let’s talk about:
1.Nesting2.Mix-ins3.Organization and Refactoring4.Math5.Wrapping Up
Nesting
Mix-ins
.foo { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.foo { property: value; property: value; property: value; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.bar { property: value; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.dude { property: value; property: value; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.guy { property: value; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
When using Sass…
.foo +border_radius(10px)
.foo { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
Will render as:
@mixin border_radius($radius) -moz-border-radius: $radius -webkit-border-radius: $radius border-radius: $radius
The mixin:
.foo +box_shadow(0, 0, 5px, #AAA)
.foo { -moz-box-shadow: 0 0 5px #AAA; -webkit-box-shadow: 0 0 5px #AAA; box-shadow: 0 0 5px #AAA;}
Another example:
Will render as:
@mixin box_shadow($h_offset: 0, $v_offset: 0, -->$blur_radius: 5px, $color: #AAA) -moz-box-shadow: $h_offset $v_offset $blur_radius $color -webkit-box-shadow: $h_offset $v_offset $blur_radius $color box-shadow: $h_offset $v_offset $blur_radius $color
Or, pre-populate the mixin:
--> Denotes “not a real line break”
.foo +box_shadow
.foo { -moz-box-shadow: 0 0 5px #AAA; -webkit-box-shadow: 0 0 5px #AAA; box-shadow: 0 0 5px #AAA;}
Now, no argument is needed:
Will render as:
Or, you can override:
.foo +box_shadow(2, 2, 10, #CCC)
.foo { -moz-box-shadow: 2px 2px 10px #CCC; -webkit-box-shadow: 2px 2px 10px #CCC; box-shadow: 2px 2px 10px #CCC;}
Will render as:
.foo +box_gradient(#FFFFFF, #000000)
.foo { background-image: -moz-linear-gradient(top, #FFFFFF, -->#000000) background-image: -o-linear-gradient(top, #FFFFFF, -->#000000); background-image: -webkit-gradient(linear,left top,left --> bottom,color-stop(0, #FFFFFF),color-stop(1, #000000)) background-image: -webkit-linear-gradient(#FFFFFF, -->#000000) background-image: linear-gradient(top, #FFFFFF, #000000) filter: progid:DXImageTransform.Microsoft.gradient -->(startColorStr='#FFFFFF', EndColorStr='#000000')}
Gradients!
--> Denotes “not a real line break”
Will render as:
http://css3please.com/
@mixin box_gradient($start,$end) background-image: -moz-linear-gradient(top, !start, !end) background-image: -o-linear-gradient(top, !start, !end); background-image: -webkit-gradient(linear,left top,left --> bottom,color-stop(0, !start),color-stop(1, !end)) background-image: -webkit-linear-gradient(!start, !end) background-image: linear-gradient(top, !start, !end) filter: progid:DXImageTransform.Microsoft.gradient -->(startColorStr='!start', EndColorStr='!end')
The mixin:
--> Denotes “not a real line break”
http://tech.patientslikeme.com/2010/09/10/deconstructing-my-favorite-sass-mixin/
.dropdown-inner { -moz-border-radius: 0 3px 3px 3px; -webkit-border-radius: 0 3px 3px 3px; border-radius: 0 3px 3px 3px; -moz-box-shadow: 1px 1px 4px #CCC; -webkit-box-shadow: 1px 1px 4px #CCC; box-shadow: 1px 1px 4px #CCC; background-image: -moz-linear-gradient(top, #FFFFFF, -->#FCF5DE) background-image: -o-linear-gradient(top, #FFFFFF, -->#000000); background-image: -webkit-gradient(linear,left top,left --> bottom,color-stop(0, #FFFFFF),color-stop(1, #FCF5DE)) background-image: -webkit-linear-gradient(#FFFFFF, -->#FCF5DE) background-image: linear-gradient(top, #FFFFFF, #FCF5DE) filter: progid:DXImageTransform.Microsoft.gradient -->(startColorStr='#FFFFFF', EndColorStr='#FCF5DE')}
.dropdown-inner { -moz-border-radius: 0 3px 3px 3px; -webkit-border-radius: 0 3px 3px 3px; border-radius: 0 3px 3px 3px; -moz-box-shadow: 1px 1px 4px #CCC; -webkit-box-shadow: 1px 1px 4px #CCC; box-shadow: 1px 1px 4px #CCC; background-image: -moz-linear-gradient(top, #FFFFFF, -->#FCF5DE) background-image: -o-linear-gradient(top, #FFFFFF, -->#000000); background-image: -webkit-gradient(linear,left top,left --> bottom,color-stop(0, #FFFFFF),color-stop(1, #FCF5DE)) background-image: -webkit-linear-gradient(#FFFFFF, -->#FCF5DE) background-image: linear-gradient(top, #FFFFFF, #FCF5DE) filter: progid:DXImageTransform.Microsoft.gradient -->(startColorStr='#FFFFFF', EndColorStr='#FCF5DE')}
.dropdown-inner +border_radius(0 3px 3px 3px) +box_shadow(1, 1, 4, #CCC) +box_gradient(#FFFFFF, #FCF5DE)
• Re-usable interface elements (buttons, headers—with or without arguments).
• Reset styles (data tables, lists, etc.).
• References to frequently-accessed sprites.
• Frequently used IE hacks.
• Etc.
More with mixins:
Organization & Refactoring
“.Class Soup”
Math
.faded background-color: fade_out(#000, 0.4)
.faded { background-color: rgba(0, 0, 0, 0.6);}
Color Manipulation:
Will render as:
.lighter background-color: lighten(#000064, 30%)
.lighter { background-color: #4B4BFF;}
lighten & darken:
Will render as:
.comp background-color: complement(#000064)
.comp { background-color: #646400;}
complement
Will render as:
$default_color: #000064.level1 background-color: $default_color.level2 background-color: lighten($default_color, 15%).level3 background-color: lighten($default_color, 30%).level4 background-color: lighten($default_color, 45%).level5 background-color: lighten($default_color, 60%)
With a variable:
.level1 { background-color: #000064; }.level2 { background-color: #0000b1; }.level3 { background-color: #0000fd; }.level4 { background-color: #4b4bff; }.level5 { background-color: #9797ff; }
With a variable:
$container_width: 1000px$photo_width: 480px.caption width: $container_width - $photo_width
.caption { width: 520px;}
Simple math:
Will render as:
https://github.com/adarowski/The-Hall-of-wWAR
<ul id="timeline-in"> <li id="dwhite" class="3b level5">White</li> <li id="canson" class="1b hof level2">Anson</li> <li id="jorourke" class="hof lf level4">O'Rourke</li> <li id="pgalvin" class="p hof level2">Galvin</li> <li id="mward" class="hof ss level5">Ward</li> <li id="jmccormick" class="p level3">McCormick</li> <li id="kkelly" class="hof rf level5">Kelly</li> <li id="ggore" class="cf level5">Gore</li> <li id="jglasscock" class="ss level4">Glasscock</li> ... <li id="jbagwell" class="1b level2"></li></ul>
ul list-style: none padding: 40px 0 0 margin: 0li cursor: pointer margin: 0 0 5px padding: 0 display: block padding: 2px color: white position: relative
We needmargin-leftand width.
@mixin bar($start,$end) $start_value: $start - 1870 margin-left: ($start_value*8) + px $length: $end - $start width: ($length*8) - 4px
The mixin:
Pass in arguments for start and end
year.
The mixin:
@mixin bar($start,$end) $start_value: $start - 1870 margin-left: ($start_value*8) + px $length: $end - $start width: ($length*8) - 4px
$start_value is the difference between the
start year and 1870.
The mixin:
@mixin bar($start,$end) $start_value: $start - 1870 margin-left: ($start_value*8) + px $length: $end - $start width: ($length*8) - 4px
Multiply $start_value by 8 to get the left margin (8 pixels
per year).
The mixin:
@mixin bar($start,$end) $start_value: $start - 1870 margin-left: ($start_value*8) + px $length: $end - $start width: ($length*8) - 4px
Career $length will be used to determine the width of the
box.
The mixin:
@mixin bar($start,$end) $start_value: $start - 1870 margin-left: ($start_value*8) + px $length: $end - $start width: ($length*8) - 4px
Again, multiply by 8 to get the width, and also
subtract 4 pixels (padding).
The mixin:
@mixin bar($start,$end) $start_value: $start - 1870 margin-left: ($start_value*8) + px $length: $end - $start width: ($length*8) - 4px
#jbagwell +bar(1991, 2005)
@mixin bar(1991,2005) $start_value: 1991 - 1870 = 121 margin-left: (121*8) + px = 968px $length: 2005 - 1991 = 14 width: (14*8) - 4px) = 108px
The magic:
#jbagwell +bar(1991, 2005)
#jbagwell { margin-left: 968px; width: 108px;}
The magic:
Will render as:
#canson { margin-left: 8px; width: 204px; }#jorourke { margin-left: 16px; width: 164px; }#pgalvin { margin-left: 40px; width: 132px; }#kkelly { margin-left: 64px; width: 116px; }#mward { margin-left: 64px; width: 124px; }#dbrouthers { margin-left: 72px; width: 196px; }#mwelch { margin-left: 80px; width: 92px; }#tkeefe { margin-left: 80px; width: 100px; }#rconnor { margin-left: 80px; width: 132px; }#bewing { margin-left: 80px; width: 132px; }#cradbourn { margin-left: 88px; width: 76px; }#jclarkson { margin-left: 96px; width: 92px; }#bmcphee { margin-left: 96px; width: 132px; }#tmccarthy { margin-left: 112px; width: 92px; }#sthompson { margin-left: 120px; width: 164px; }
Repeat:
https://github.com/adarowski/The-Hall-of-wWAR
Wrapping Up
Installation$ sudo gem install haml
c:\> ruby gem install haml
$ sass --watch ./sass/:./css/ # all .sass files compiled into ./css $ sass --update \sass/style.sass:css/style.css# ... style.sass => style.css
Compiling?
Compiling?... on the what?
blech...
Compiling?... on the what?
blech...
Compress / Minify~/sites/designsponge joel $ ls -hal style.css -rw-r--r-- 1 joel staff 32K Mar 18 11:26 style.css
~/sites/designsponge joel $ cp style.css style.scss
~/sites/designsponge joel $ sass -t compressed style.scss style_compressed.css
~/sites/designsponge joel $ ls -hal *.*css-rw-r--r-- 1 joel staff 32K Mar 18 11:26 style.css-rw-r--r-- 1 joel staff 32K Mar 18 11:33 style.scss-rw-r--r-- 1 joel staff 26K Mar 18 11:34 style_compressed.css
Compress / Minify
Resources
• sass-lang.com
• beta.compass-style.org
• @sasswatch
• wynn.fm/okc - @pengwynn
• rubyinstaller.org (windows)
• github.com/adarowski
• github.com/jayroh
Joel @jayroh
Adam @adarowski
Questions?