sassive aggressive: using sass to make your life easier (refresh boston version)
DESCRIPTION
Sass, which stands for "Syntactically Awesome Stylesheets", is a meta-language that provides simpler, more elegant syntax for CSS. Joel Oliveira and Adam Darowski will explain how Sass can improve your CSS-wrangling quality of life. They will explain what Sass is, what the benefits are, and go 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 this “Sass”?
•CSS on steroids.
•Variables, Mixins, Nesting, Inheritance, and more…
•Two “flavors” - SASS & SCSS
$ 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...
Why?
Why?
•Vendor Prefixes
•“DRY” - Don’t Repeat Yourself
• Instant Compression / Minification
•Organization - partials (“includes”)
• It’s the future - Chrome team already exploring these concepts.
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
The Goods
CSS3 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, 5, #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: 5, $color: #AAA) -moz-box-shadow: #{$h_offset}px #{$v_offset}px -->#{$blur_radius}px #{$color} -webkit-box-shadow: #{$h_offset}px #{$v_offset}px -->#{$blur_radius}px #{$color} box-shadow: #{$h_offset}px #{$v_offset}px -->#{$blur_radius}px #{$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, #FFFFFF, -->#000000); 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
.gray background-color: fade_out(#000, 0.4)
.gray { 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:
$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 needpadding-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
Resources
• sass-lang.com
• beta.compass-style.org
• @sasswatch
• wiseheartdesign.com/weblog/
• rubyinstaller.org (windows)
• github.com/adarowski
• github.com/jayroh
Joel @jayroh
Adam @adarowski
Questions?