My presentation at SourceDevCon. There's a lot more you can do with Sass/Compass than just parameterize CSS.

1. Advanced
http://picklebums.com/wp-content/uploads/2010/06/crayon-drawing.jpg

2. Who is this guy?
Nick Cooley
Principal Front-End Architect,
TandemSeven:
http://www.tandemseven.com
@nickcooley
http://www.github.com/nickcooley

3. Who is this guy?
Nick Cooley
Principal Front-End Architect,
TandemSeven:
http://www.tandemseven.com
@nickcooley
http://www.github.com/nickcooley

4. What we’ll talk about in this session...
• Recap of Sass/Compass
• Advanced Sass
• Control Structures
• Color Functions
• Advanced Compass
• Geometric functions and constants
• Application to Sencha Touch
• DEMOS!

5. What this Presentation ISN’T
• Sass vs LESS vs Stylus
• Why using a CSS Preprocessor is better than not using
one
• 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.”

6. What this Presentation ISN’T
• Sass vs LESS vs Stylus
• Why using a CSS Preprocessor is better than not using
one
• 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.”

7. What this Presentation ISN’T
• How to code/structure CSS
The hope is that you have *some* CSS
knowledge and are aware of best practices. If
not, here’s a great article for you: kiano.sh/
Inxxym
• How to build apps with Sencha Touch
While we will go over examples that include
demo Sencha Touch apps, the focus really is on
the Sass/Compass and resulting CSS

8. Let’s Recap:

9. What is Sass?
• Stands for “Syntactically Awesome
StyleSheets”
• “Sass both provides a simpler, more elegant
syntax for CSS and implements various
features that are useful for creating
manageable stylesheets.”
• The foundation for style implementations in
ExtJS and Sencha Touch

10. What is Sass?
• Stands for “Syntactically Awesome
StyleSheets”
• “Sass both provides a simpler, more elegant
syntax for CSS and implements various
features that are useful for creating
manageable stylesheets.”
• The foundation for style implementations in
ExtJS and Sencha Touch

11. Sass
Most Popular Features:
• Nesting
• Variables
• Mixins
• Functions
• @extend

12. Sass
Most Popular Features:
• Nesting
• Variables
• Mixins
• Functions
• @extend

13. Sass: Nesting
•Sass: Allows you to nest selectors
within a parent selector.
•This provides an approach that’s
clean, concise, unique and DRY

14. Sass: Nesting
•Sass: Allows you to nest selectors
within a parent selector.
•This provides an approach that’s
clean, concise, unique and DRY
div {
&.content {
.element {
h1 {...}
}
}
}
//outputs
div.content .element h1 {...}

15. Sass: Variables
• Allow you to quickly parameterize
your CSS
• Create diverse variations in
seconds!
• Helps you create design standards
for your CSS.
• Using a main color in a number of

16. Sass: Variables
• Allow you to quickly parameterize
your CSS
• Create diverse variations in
seconds!
• Helps you create design standards
for your CSS.
• Using a main color in a number of
$color: #fff;
$pxHeight: 10px;

17. Sass: Mixins
• Mixins:Sass :: Functions:Javascript
• Allow you to define patterns for
reuse
• Mixins can be imported across
projects, helping you to create your
own framework

18. Sass: Mixins
• Mixins:Sass :: Functions:Javascript
• Allow you to define patterns for
reuse
• Mixins can be imported across
projects, helping you to create your
@mixin own framework
pictos-iconmask($name) {
.x-button .x-button-icon.x-icon-mask.#{$name} {
-webkit-mask-image: theme_image($theme-name, "pictos/" +
$name + ".png");
}
}

19. Compass
• Collection of Sass mixins and variables
• X-Browser CSS3 mixins
• Rounded Corners • Box Shadow
• Gradients • Text Shadow
• Common CSS development Patterns
• Reset.css • Sprites
• Clearfix • Web Fonts
• CSS3 Pie • More!

20. Let’s turn it up to 11
http://4.bp.blogspot.com/_8lK2el5pnbU/S-dDjMziqsI/AAAAAAAAGMc/YkZMHVA2-5k/s1600/SpinalTap_.jpg

21. 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

22. @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-

23. @if examples
• Example of default @if method
implementation
• Example of if() function method

24. @if examples
• Example of default @if method
implementation
@if $type == bevel {...}
@else if $type == matte {...}
@else {...}
• Example of if() function method

25. @if examples
• Example of default @if method
implementation
@if $type == bevel {...}
@else if $type == matte {...}
@else {...}
• Example of if() function method
border: if($i%2==0, 1px solid #000, 4px solid #333);

26. @for
Is different from the “for” directive in
most programming languages
• two types: “to” and “through”
• cannot count down
• can only iterate by one

27. @for examples
• Example of “to”
• Example of “through”

28. @for examples
• Example of “to”
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
//outputs
.item-1 {width: 2em; }
.item-2 {width: 4em; }
• Example of “through”

29. @for examples
• Example of “to”
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
//outputs
.item-1 {width: 2em; }
.item-2 {width: 4em; }
• Example of “through”
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//outputs
.item-1 {width: 2em; }
.item-2 {width: 4em; }
.item-3 {width: 6em; }

30. @while
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

31. @while
Iterates across a range of values using
a statement evaluation until it results in
false
• can evaluate to < > ==
• WARNING: you must adjust the
$i: 8;
@while $i > 0 {
evaluation variable manually
.box#{$i} {
$factor: 100px - ($i * 10);
height:$factor !important;
width:$factor !important;
background: #333;
$i: $i - 1;
}
}

32. @each
Iterates through a list of items
individually
• Can include list as parameter or
variable

33. @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); }

34. Colors in Sass
One of the least discussed features in
Sass are color features
• Create themes/schemes/palettes
based on harmonious color
relationships
• Mix colors using color relationships
• Sass has operations for RGB and HSL

35. Color Functions
• complement
• adjust-hue
• lighten/darken
• color math
• AND MANY MORE!

36. The Boxes
• A really basic demo which shows
various color functions/control
directives

37. Advance processing
in Compass
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()

38. 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!

39. Demos

40. 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

41. 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

42. 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

43. 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

44. First, an example

45. First, an example

46. The Color Wheel

47. The Color Wheel

48. The Color Wheel

49. 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;
}

50. The S & L Bars

51. The S & L Bars

52. The S and L bars

53. 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 )}";}
}
}

54. But hey, you said
“Sencha Touch”
Sencha Touch is a javascript framework
which relies on Sass/Compass for its
look/feel.
• Sencha has put together a really solid
set of mixins: buttons, pictomasks,
toolbars
• There’s really no limit to what you
can add using Sass/Compass specific

55. But hey, you said
“Sencha Touch”
Sencha Touch is a javascript framework
which relies on Sass/Compass for its
look/feel.
• Sencha has put together a really solid
set of mixins: buttons, pictomasks,
toolbars
• There’s really no limit to what you
can add using Sass/Compass specific

56. Sencha Touch Docs
Throughout the Sencha Touch
documentation, you’ll find predefined
mixins which you can use out-of-the-
box

57. ST2 Demo
Just to show you that modifying Sass/
Compass for Sencha Touch is just as
easy as it is for anything else....

58. Links
• Sass Site: sass-lang.com
• Compass Site: compass-style.org
• Compass.app Site: compass.handlino.com
• HSL Color Picker: hsl.clrpick.me or github.com/nickcooley/clrpick.me
• Manning Sass Book : manning.com/netherland/
• LiveReload : livereload.com
• FireSass : addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/