BFED: Advanced Sass/Compass

A modified version of my Advanced Sass/Compass slides as presented to the Boston Front End Developer Meetup Group on May 23, 2012.

Transcript

1. Advanced Theming - (with Sass/Compass mixins, scripts and other techniques) http://picklebums.com/wp-content/uploads/2010/06/crayon-drawing.jpg Thursday, May 24, 12
2. This guy.... Nick Cooley Principal Front-End Architect, TandemSeven: http://www.tandemseven.com @nickcooley http://www.github.com/nickcooley Thursday, May 24, 12
3. This guy.... Nick Cooley Principal Front-End Architect, TandemSeven: http://www.tandemseven.com @nickcooley http://www.github.com/nickcooley Thursday, May 24, 12
4. What we’ll talk about in this session... •Advanced Sass •Control Structures •Color Functions •Advanced Compass •Geometric functions and constants •DEMOS! Thursday, May 24, 12
5. What this Presentation ISN’T •Sass vs LESS vs Stylus •A conversation about how Preprocessors can bloat your CSS Many great articles arguing the merits/gotchas of using a pre-processor. Here’s one I really agree with: http://bit.ly/Sassisntbad My personal opinion: “Like everything in technology, preprocessors are a tool in your arsenal. You should understand the fundamentals of CSS before relying on them.” Thursday, May 24, 12
6. What this Presentation ISN’T •Sass vs LESS vs Stylus •A conversation about how Preprocessors can bloat your CSS Many great articles arguing the merits/gotchas of using a pre-processor. Here’s one I really agree with: http://bit.ly/Sassisntbad My personal opinion: “Like everything in technology, preprocessors are a tool in your arsenal. You should understand the fundamentals of CSS before relying on them.” Thursday, May 24, 12
7. Let’s turn CSS up to 11 http://4.bp.blogspot.com/_8lK2el5pnbU/S-dDjMziqsI/AAAAAAAAGMc/YkZMHVA2-5k/s1600/SpinalTap_.jpg Thursday, May 24, 12
8. Control Directives in Sass Very similar to a number of control directives in languages like javascript, ruby, PHP -- Sass provides some rudimentary functionality: •if/else if/else •for •while •each Thursday, May 24, 12
9. @if Works like every “if” directive you’ve ever used (if, else if, else) •create exceptional cases determined by CSS controlled attribute OR •Sass also contains an “if” function which works as: if($condition, $if-true, $if-false) Thursday, May 24, 12
10. @if examples •Example of default @if method implementation •Example of if() function method Thursday, May 24, 12
11. @if examples •Example of default @if method implementation •Example of if() function method @if $type == bevel {...} @else if $type == matte {...} @else {...} Thursday, May 24, 12
12. @if examples •Example of default @if method implementation •Example of if() function method @if $type == bevel {...} @else if $type == matte {...} @else {...} border: if($i%2==0, 1px solid #000, 4px solid #333); Thursday, May 24, 12
13. @for Is different from the “for” directive in most programming languages •two types: “to” and “through” •cannot count down •can only iterate by one Thursday, May 24, 12
14. •Example of “to” •Example of “through” @for examples Thursday, May 24, 12
15. •Example of “to” •Example of “through” @for examples @for $i from 1 to 3 { .item-#{$i} { width: 2em * $i; } } //outputs .item-1 {width: 2em; } .item-2 {width: 4em; } Thursday, May 24, 12
16. •Example of “to” •Example of “through” @for examples @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //outputs .item-1 {width: 2em; } .item-2 {width: 4em; } .item-3 {width: 6em; } @for $i from 1 to 3 { .item-#{$i} { width: 2em * $i; } } //outputs .item-1 {width: 2em; } .item-2 {width: 4em; } Thursday, May 24, 12
17. Iterates across a range of values using a statement evaluation until it results in false •can evaluate to < > == •WARNING: you must adjust the evaluation variable manually @while Thursday, May 24, 12
18. Iterates across a range of values using a statement evaluation until it results in false •can evaluate to < > == •WARNING: you must adjust the evaluation variable manually @while $i: 8; @while $i > 0 { .box#{$i} { $factor: 100px - ($i * 10); height:$factor !important; width:$factor !important; background: #333; $i: $i - 1; } } Thursday, May 24, 12
19. @each Iterates through a list of items individually •Can include list as parameter or variable Thursday, May 24, 12
20. @each Iterates through a list of items individually •Can include list as parameter or variable $list: (bob, steve, rob); @each $person in $list { .#{$person}{background-image: url($person);} } // CSS output .bob {background-image:url(bob); } .steve {background-image:url(steve); } .rob {background-image:url(rob); } Thursday, May 24, 12
21. Colors in Sass A really powerful feature of Sass are color methods. Sass can help you: •Create themes/schemes/palettes based on harmonious color relationships •Mix colors using color relationships •Perform color operations w/ RGB and HSL Thursday, May 24, 12
22. Color Functions •complement •adjust-hue •lighten/darken •color math •AND MANY MORE! Thursday, May 24, 12
23. Color Functions •complement •adjust-hue •lighten/darken •color math Thursday, May 24, 12
24. Color Functions •complement •adjust-hue •lighten/darken •color math complement(red); //outputs cyan Thursday, May 24, 12
25. Color Functions •complement •adjust-hue •lighten/darken •color math complement(red); //outputs cyan adjust-hue(red, 30); //outputs #ff800 Thursday, May 24, 12
26. Color Functions •complement •adjust-hue •lighten/darken •color math complement(red); //outputs cyan adjust-hue(red, 30); //outputs #ff800 lighten(red, 40); //outputs #ff800 Thursday, May 24, 12
27. Color Functions •complement •adjust-hue •lighten/darken •color math complement(red); //outputs cyan adjust-hue(red, 30); //outputs #ff800 lighten(red, 40); //outputs #ff800 red + blue; //outputs #magenta Thursday, May 24, 12
28. The Boxes •A really basic demo which shows various color functions/control directives Thursday, May 24, 12
29. Compass may be a framework, but it provides a number of helpful functions which can make interesting results: •Geometry functions: •sin(), cos(), tan(), pi() •Additional math functions: •e(), log(), sqrt() Advance processing in Compass Thursday, May 24, 12
30. The benefits of advanced functions With these functions, you can: •Offload some of the processing for things you might do in javascript for faster performance •Be able to calculate in one place and not worry about it. •Do things like: •calculate coordinates on a circle •plot points on a graph •create some interesting designs using math! Thursday, May 24, 12
31. Demos Thursday, May 24, 12
32. HSL.clrpick.me •Starting off with a base color, generate related color-sets based on hsl relationships. •This can help you determine what colors might go with your initial color. •Color relationships are based on Sass color functions Thursday, May 24, 12
33. HSL.clrpick.me •Starting off with a base color, generate related color-sets based on hsl relationships. •This can help you determine what colors might go with your initial color. •Color relationships are based on Sass color functions Thursday, May 24, 12
34. So let’s put it all together HSL clrpick.me uses Sass/Compass for •Iterators •Positioning color swatches in 360 using Compass geometry •Adjusts color using pre-defined relationships Thursday, May 24, 12
35. So let’s put it all together HSL clrpick.me uses Sass/Compass for •Iterators •Positioning color swatches in 360 using Compass geometry •Adjusts color using pre-defined relationships Thursday, May 24, 12
36. First, an example Thursday, May 24, 12
37. First, an example Thursday, May 24, 12
38. The Color Wheel Thursday, May 24, 12
39. The Color Wheel Thursday, May 24, 12
40. The Color Wheel Thursday, May 24, 12
41. The Color Wheel @include circlefy(200, $deg); @mixin circlefy($radius, $deg){! ! $rad: angleToRadians($deg); ! @include radiansToCartesian($rad, $radius);! ! } @function angleToRadians($a){ ! $pi: pi(); ! $angle: ($a) / 180; ! $radians: $pi * $angle; ! @return $radians; } @mixin radiansToCartesian($r, $radius){ ! $x: round($radius * cos($r)); ! $y: round($radius * sin($r)); ! top: #{$y}px; ! left:#{$x}px; } Thursday, May 24, 12
42. The S & L Bars Thursday, May 24, 12
43. The S & L Bars Thursday, May 24, 12
44. The S and L bars Thursday, May 24, 12
45. The S and L bars $light : lightness($colorwheel1); @for $i from 0 through 10 { &:nth-child(#{$i + 1}){ $startBackground: lighten($colorwheel1, 100); $val: $i * 10; background: darken($startBackground, $val ); span {margin-left:0; right:55px;} span:after {content: "lightness: #{$val} color: #{darken($startBackground, $val )}";} } } Thursday, May 24, 12
46. Links • Sass Site: sass-lang.com • Compass Site: compass-style.org • HSL Color Picker: hsl.clrpick.me or github.com/nickcooley/clrpick.me • Manning Sass Book : manning.com/netherland/ • Compass.app Site: compass.handlino.com • LiveReload : livereload.com • Codekit: incident57.com/codekit/ • FireSass : addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/ • Sass Google Group: sass-lang@googlegroups.com • Compass Google Group: compass-users@googlegroups.com Thursday, May 24, 12
47. Other Great Sass Presos • Hampton Catlin - The Future of Sass: youtube.com/watch?v=MFwId6xSh2o • Chriss Eppstein: Help! My Stylesheets are a Mess! speakerdeck.com/u/chriseppstein/p/ help-my-stylesheets-are-a-mess • Dave Kaneda on Sass: vimeo.com/41600596 • Brandon Mathis: brandonmathis.com/blog/2010/09/21/fast-color-theming-with-compass- and-sass/ • Joel Oliveira and Adam Darowski: Sassive Aggressive - vimeo.com/22244178 Thursday, May 24, 12