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

Download Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)

Post on 28-Jan-2015

112 views

Category:

Technology

7 download

Embed Size (px)

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

<ul><li> 1. Sassive AggressiveUsing Sass to make your life easier</li></ul> <p> 2. Who?Joel OliveiraAdam Darowski Developer, The47th Web Developer, PatientsLikeMe 3. What is Sass? 4. What is Sass?sass-lang.com 5. What is Sass? CSS on steroids Adds Variables, Mixins, Nesting,Inheritance, and more Its a meta-language that compilesto plain old CSS Two avors - Sass &amp; SCSS 6. 7. Sass came firstbodybackground-color: #fffcolor: #000font: 16px/1.6 Georgiamargin: 0 8. SCSS came nextbody {background-color: #fff;color: #000;font: 16px/1.6 Georgia;margin: 0;} 9. 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;}}}}}} 10. ol {@include sans-serif-font(24px, $healist-style: decimal;max-width: 480px;p { font-size: 16px; margin: 1em 0;}}}}}} 11. 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;}}}}}} 12. body#home.home {body#home.home.content {.content#learn-more { #learn-more#faq {#faqmargin-top: 20px; margin-top: 20pxaside { asidewidth: 300px;width: 300pxpadding: 0 40px; padding: 0 40pxh4 span {h4 span @include sans-serif-font(20px);@include sans-serif-font(20px)}ulul {color: #666 color: #666; font-size: 12px font-size: 12px; line-height: 1.5 line-height: 1.5;list-style: square list-style: square;padding-left: 1.2em padding-left: 1.2em; li li {margin-bottom: 8px margin-bottom: 8px;li:before { color: red li:before {ol color: red; @include sans-serif-font(24px, $heading-color) } list-style: decimal}max-width: 480px}pol {font-size: 16px@include sans-serif-font(24px, $heading-color); margin: 1em 0list-style: decimal;max-width: 480px;p { font-size: 16px; margin: 1em 0;}}}}Sass &gt; SCSS}} 13. 14. Lets talk about:1. Nesting2. Mix-ins3. Organization and Refactoring4. Math5. Wrapping Up 15. Nesting 16. Mix-ins 17. .foo {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;} 18. -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; 19. When using Sass.foo+border_radius(10px)Will render as:.foo {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;} 20. The mixin:@mixin border_radius($radius)-moz-border-radius: $radius-webkit-border-radius: $radiusborder-radius: $radius 21. Another example:.foo+box_shadow(0, 0, 5px, #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;} 22. Or, pre-populate the mixin:@mixin box_shadow($h_offset: 0, $v_offset: 0,--&gt;$blur_radius: 5px, $color: #AAA)-moz-box-shadow: $h_offset $v_offset $blur_radius $color-webkit-box-shadow: $h_offset $v_offset $blur_radius $colorbox-shadow: $h_offset $v_offset $blur_radius $color--&gt; Denotes not a real line break 23. 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;} 24. 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;} 25. Gradients! .foo +box_gradient(#FFFFFF, #000000) Will render as: .foo { background-image: -moz-linear-gradient(top, #FFFFFF, --&gt;#000000) background-image: -o-linear-gradient(top, #FFFFFF, --&gt;#000000); background-image: -webkit-gradient(linear,left top,left --&gt; bottom,color-stop(0, #FFFFFF),color-stop(1, #000000)) background-image: -webkit-linear-gradient(#FFFFFF, --&gt;#000000) background-image: linear-gradient(top, #FFFFFF, #000000) filter: progid:DXImageTransform.Microsoft.gradient --&gt;(startColorStr=#FFFFFF, EndColorStr=#000000) }--&gt; Denotes not a real line break http://css3please.com/ 26. The mixin:@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--&gt; 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--&gt;(startColorStr=!start, EndColorStr=!end)--&gt; Denotes not a real line break 27. http://tech.patientslikeme.com/2010/09/10/deconstructing-my-favorite-sass-mixin/ 28. .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,--&gt;#FCF5DE)background-image: -o-linear-gradient(top, #FFFFFF,--&gt;#000000);background-image: -webkit-gradient(linear,left top,left--&gt; bottom,color-stop(0, #FFFFFF),color-stop(1, #FCF5DE))background-image: -webkit-linear-gradient(#FFFFFF,--&gt;#FCF5DE)background-image: linear-gradient(top, #FFFFFF, #FCF5DE)filter: progid:DXImageTransform.Microsoft.gradient--&gt;(startColorStr=#FFFFFF, EndColorStr=#FCF5DE)} 29. .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,--&gt;#FCF5DE)background-image: -o-linear-gradient(top, #FFFFFF,--&gt;#000000);background-image: -webkit-gradient(linear,left top,left--&gt; bottom,color-stop(0, #FFFFFF),color-stop(1, #FCF5DE))background-image: -webkit-linear-gradient(#FFFFFF,--&gt;#FCF5DE)background-image: linear-gradient(top, #FFFFFF, #FCF5DE)filter: progid:DXImageTransform.Microsoft.gradient--&gt;(startColorStr=#FFFFFF, EndColorStr=#FCF5DE)} 30. More with mixins: Re-usable interface elements (buttons,headerswith or without arguments). Reset styles (data tables, lists, etc.). References to frequently-accessed sprites. Frequently used IE hacks. Etc. 31. Organization &amp; Refactoring 32. .Class Soup 33. Math 34. Color Manipulation:.fadedbackground-color: fade_out(#000, 0.4)Will render as:.faded {background-color: rgba(0, 0, 0, 0.6);} 35. lighten &amp; darken:.lighterbackground-color: lighten(#000064, 30%)Will render as:.lighter {background-color: #4B4BFF;} 36. complement.compbackground-color: complement(#000064)Will render as:.comp {background-color: #646400;} 37. With a variable:$default_color: #000064.level1background-color: $default_color.level2background-color: lighten($default_color, 15%).level3background-color: lighten($default_color, 30%).level4background-color: lighten($default_color, 45%).level5background-color: lighten($default_color, 60%) 38. With a variable:.level1 {background-color: #000064; }.level2 {background-color: #0000b1; }.level3 {background-color: #0000fd; }.level4 {background-color: #4b4bff; }.level5 {background-color: #9797ff; } 39. Simple math:$container_width: 1000px$photo_width: 480px.captionwidth: $container_width - $photo_widthWill render as:.caption {width: 520px;} 40. https://github.com/adarowski/The-Hall-of-wWAR 41. </p> <ul><li>White</li><li>Anson</li><li>ORourke</li><li>Galvin</li><li>Ward</li><li>McCormick</li><li>Kelly</li><li>Gore</li><li>Glasscock...</li></ul> <p> 42. ullist-style: nonepadding: 40px 0 0margin: 0licursor: pointermargin: 0 0 5pxpadding: 0display: blockpadding: 2pxcolor: whiteposition: relative 43. We needmargin-left and width. 44. The mixin:@mixin bar($start,$end)$start_value: $start - 1870margin-left: ($start_value*8) + px$length: $end - $startwidth: ($length*8) - 4px 45. The mixin:@mixin bar($start,$end)$start_value: $start - 1870 Pass inmargin-left: ($start_value*8) + px arguments for start and end$length: $end - $startyear.width: ($length*8) - 4px 46. The mixin:@mixin bar($start,$end) $start_value is$start_value: $start - 1870 the differencemargin-left: ($start_value*8) + pxbetween the$length: $end - $start start year andwidth: ($length*8) - 4px 1870. 47. The mixin:@mixin bar($start,$end)$start_value: $start - 1870Multiply $start_value bymargin-left: ($start_value*8) + px 8 to get the left$length: $end - $start margin (8 pixelswidth: ($length*8) - 4pxper year). 48. The mixin:@mixin bar($start,$end)$start_value: $start - 1870Career $length will be used tomargin-left: ($start_value*8) + px determine the$length: $end - $startwidth of thewidth: ($length*8) - 4px box. 49. The mixin:@mixin bar($start,$end)$start_value: $start - 1870 Again, multiplymargin-left: ($start_value*8) + pxby 8 to get thewidth, and also$length: $end - $start subtract 4 pixelswidth: ($length*8) - 4px(padding). 50. The magic:#jbagwell+bar(1991, 2005)@mixin bar(1991,2005)$start_value: 1991 - 1870 = 121margin-left: (121*8) + px = 968px$length: 2005 - 1991 = 14width: (14*8) - 4px) = 108px 51. The magic:#jbagwell+bar(1991, 2005)Will render as:#jbagwell {margin-left: 968px;width: 108px;} 52. 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; } 53. https://github.com/adarowski/The-Hall-of-wWAR 54. Wrapping Up 55. Installation$ sudo gem install hamlc:&gt; ruby gem install haml 56. Compiling?$ sass --watch ./sass/:./css/# all .sass files compiled into ./css$ sass --update sass/style.sass:css/style.css# ... style.sass =&gt; style.css 57. Compiling?... on the what?blech... 58. Compiling?... on the what?blech... 59. Compress / Minify~/sites/designsponge joel $ ls -hal style.css-rw-r--r-- 1 joel staff32K 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 staff32K Mar 18 11:26 style.css-rw-r--r-- 1 joel staff32K Mar 18 11:33 style.scss-rw-r--r-- 1 joel staff26K Mar 18 11:34 style_compressed.css 60. Compress / Minify 61. Resources sass-lang.com beta.compass-style.org @sasswatch wynn.fm/okc - @pengwynn rubyinstaller.org (windows) github.com/adarowski github.com/jayroh 62. Joel @jayrohAdam @adarowski 63. Questions? </p>