BFED: Advanced Sass/Compass

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

This guy.... Nick Cooley Principal Front-End Architect, TandemSeven: http://www.tandemseven.com @nickcooley http://www.github.com/nickcooley Thursday, May 24, 12

Slide 3

Slide 3 text

This guy.... Nick Cooley Principal Front-End Architect, TandemSeven: http://www.tandemseven.com @nickcooley http://www.github.com/nickcooley Thursday, May 24, 12

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

@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

Slide 10

Slide 10 text

@if examples •Example of default @if method implementation •Example of if() function method Thursday, May 24, 12

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

@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

Slide 13

Slide 13 text

@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

Slide 14

Slide 14 text

•Example of “to” •Example of “through” @for examples Thursday, May 24, 12

Slide 15

Slide 15 text

•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

Slide 16

Slide 16 text

•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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

@each Iterates through a list of items individually •Can include list as parameter or variable Thursday, May 24, 12

Slide 20

Slide 20 text

@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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Color Functions •complement •adjust-hue •lighten/darken •color math •AND MANY MORE! Thursday, May 24, 12

Slide 23

Slide 23 text

Color Functions •complement •adjust-hue •lighten/darken •color math Thursday, May 24, 12

Slide 24

Slide 24 text

Color Functions •complement •adjust-hue •lighten/darken •color math complement(red); //outputs cyan Thursday, May 24, 12

Slide 25

Slide 25 text

Color Functions •complement •adjust-hue •lighten/darken •color math complement(red); //outputs cyan adjust-hue(red, 30); //outputs #ff800 Thursday, May 24, 12

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Slide 28

Slide 28 text

The Boxes •A really basic demo which shows various color functions/control directives Thursday, May 24, 12

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Demos Thursday, May 24, 12

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Slide 36

Slide 36 text

First, an example Thursday, May 24, 12

Slide 37

Slide 37 text

First, an example Thursday, May 24, 12

Slide 38

Slide 38 text

The Color Wheel Thursday, May 24, 12

Slide 39

Slide 39 text

The Color Wheel Thursday, May 24, 12

Slide 40

Slide 40 text

The Color Wheel Thursday, May 24, 12

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

The S & L Bars Thursday, May 24, 12

Slide 43

Slide 43 text

The S & L Bars Thursday, May 24, 12

Slide 44

Slide 44 text

The S and L bars Thursday, May 24, 12

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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: [email protected] • Compass Google Group: [email protected] Thursday, May 24, 12

Slide 47

Slide 47 text

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