Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)

3,533 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,533
On SlideShare
0
From Embeds
0
Number of Embeds
1,633
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)

  1. 1. Sassive AggressiveUsing Sass to make your life easier
  2. 2. Who?Joel Oliveira Adam Darowski Developer, The47th Web Developer, PatientsLikeMe
  3. 3. What is this “Sass”?• CSS on steroids.• Variables, Mixins, Nesting, Inheritance, and more…• Two “flavors” - SASS & SCSS
  4. 4. Compiling?$ sass --watch ./sass/:./css/# all .sass files compiled into ./css$ sass --update sass/style.sass:css/style.css# ... style.sass => style.css
  5. 5. Compiling?... on the what? blech...
  6. 6. Compiling?... on the what? blech...
  7. 7. Why?
  8. 8. Why?• Vendor Prefixes• “DRY” - Don’t Repeat Yourself• Instant Compression / Minification• Organization - partials (“includes”)• It’s the future - Chrome team already exploring these concepts.
  9. 9. 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.scssstyle_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
  10. 10. Compress / Minify
  11. 11. The Goods
  12. 12. CSS3 Mix-ins
  13. 13. .foo {  -moz-border-radius: 10px;  -webkit-border-radius: 10px;  border-radius: 10px;}
  14. 14.   -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;
  15. 15. When using Sass….foo  +border_radius(10px)Will render as:.foo {  -moz-border-radius: 10px;  -webkit-border-radius: 10px;  border-radius: 10px;}
  16. 16. The mixin:@mixin border_radius($radius)  -moz-border-radius: #{$radius}  -webkit-border-radius: #{$radius}  border-radius: #{$radius}
  17. 17. Another example:.foo  +box_shadow(0, 0, 5, #AAA)Will render as:.foo {  -moz-box-shadow: 0 0 5px #AAA;  -webkit-box-shadow: 0 0 5px #AAA;  box-shadow: 0 0 5px #AAA;}
  18. 18. Or, pre-populate the mixin: @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}--> Denotes “not a real line break”
  19. 19. Now, no argument is needed:.foo  +box_shadowWill render as:.foo {  -moz-box-shadow: 0 0 5px #AAA;  -webkit-box-shadow: 0 0 5px #AAA;  box-shadow: 0 0 5px #AAA;}
  20. 20. Or, you can override:.foo  +box_shadow(2, 2, 10, #CCC)Will render as:.foo {  -moz-box-shadow: 2px 2px 10px #CCC;  -webkit-box-shadow: 2px 2px 10px #CCC;  box-shadow: 2px 2px 10px #CCC;}
  21. 21. Gradients! .foo   +box_gradient(#FFFFFF, #000000) Will render as: .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) }--> Denotes “not a real line break” http://css3please.com/
  22. 22. The mixin: @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})--> Denotes “not a real line break”
  23. 23. http://tech.patientslikeme.com/2010/09/10/deconstructing-my-favorite-sass-mixin/
  24. 24. .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)}
  25. 25. .dropdown-inner {  +border_radius(0 3px 3px 3px  -moz-border-radius: 03px 3px) 3px;  +box_shadow(1, 1, 4, #CCC)  -webkit-border-radius: 0 3px 3px 3px;  border-radius: 0 3px 3px 3px; +box_gradient(#FFFFFF, #FCF5DE)  -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)}
  26. 26. More with mixins:• 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.
  27. 27. Organization & Refactoring
  28. 28. “.Class Soup”
  29. 29. Math
  30. 30. Color Manipulation:.gray  background-color: fade_out(#000, 0.4)Will render as:.gray {  background-color: rgba(0, 0, 0, 0.6);}
  31. 31. lighten & darken:.lighter  background-color: lighten(#000064, 30%)Will render as:.lighter {  background-color: #4B4BFF;}
  32. 32. With a variable:$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%)
  33. 33. With a variable:.level1 { background-color: #000064; }.level2 { background-color: #0000b1; }.level3 { background-color: #0000fd; }.level4 { background-color: #4b4bff; }.level5 { background-color: #9797ff; }
  34. 34. Simple math:$container_width: 1000px$photo_width: 480px.caption width: $container_width - $photo_widthWill render as:.caption { width: 520px;}
  35. 35. https://github.com/adarowski/The-Hall-of-wWAR
  36. 36. <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">ORourke</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>
  37. 37. 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
  38. 38. We needpadding-left and width.
  39. 39. The mixin:@mixin bar($start,$end) $start_value: $start - 1870 margin-left: ($start_value*8) + px $length: $end - $start width: ($length*8) - 4px
  40. 40. The mixin:@mixin bar($start,$end) $start_value: $start - 1870 Pass in margin-left: ($start_value*8) + px arguments for start and end $length: $end - $start year. width: ($length*8) - 4px
  41. 41. The mixin:@mixin bar($start,$end) $start_value is $start_value: $start - 1870 the difference margin-left: ($start_value*8) + px between the $length: $end - $start start year and width: ($length*8) - 4px 1870.
  42. 42. The mixin:@mixin bar($start,$end) $start_value: $start - 1870 Multiply $start_value by margin-left: ($start_value*8) + px 8 to get the left- $length: $end - $start margin (8 pixels width: ($length*8) - 4px per year).
  43. 43. The mixin:@mixin bar($start,$end) $start_value: $start - 1870 Career $length will be used to margin-left: ($start_value*8) + px determine the $length: $end - $start width of the width: ($length*8) - 4px box.
  44. 44. The mixin:@mixin bar($start,$end) $start_value: $start - 1870 Again, multiply margin-left: ($start_value*8) + px by 8 to get the width, and also $length: $end - $start subtract 4 pixels width: ($length*8) - 4px (padding).
  45. 45. The magic:#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
  46. 46. The magic:#jbagwell +bar(1991, 2005)Will render as:#jbagwell { margin-left: 968px; width: 108px;}
  47. 47. margin-left: 16px; width: 164px; } #pgalvin {Repeat: 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; }
  48. 48. https://github.com/adarowski/The-Hall-of-wWAR
  49. 49. Wrapping Up
  50. 50. Installation$ sudo gem install hamlc:> ruby gem install haml
  51. 51. Resources• sass-lang.com• beta.compass-style.org• @sasswatch• wiseheartdesign.com/weblog/• rubyinstaller.org (windows)• github.com/adarowski• github.com/jayroh
  52. 52. Joel @jayrohAdam @adarowski
  53. 53. Questions?

×