Advanced      http://picklebums.com/wp-content/uploads/2010/06/crayon-drawing.jpg
Who is this guy?                        Nick Cooley       Principal Front-End Architect,                       TandemSeven...
Who is this guy?                        Nick Cooley       Principal Front-End Architect,                       TandemSeven...
What we’ll talk about in this session...• Recap of Sass/Compass• Advanced Sass • Control Structures • Color Functions• Adv...
What this Presentation ISN’T • Sass vs LESS vs Stylus • Why using a CSS Preprocessor is better than not using    one • A c...
What this Presentation ISN’T • Sass vs LESS vs Stylus • Why using a CSS Preprocessor is better than not using    one • A c...
What this Presentation ISN’T • How to code/structure CSSThe hope is that you have *some* CSSknowledge and are aware of bes...
Let’s Recap:
What is Sass?• Stands for “Syntactically Awesome  StyleSheets”• “Sass both provides a simpler, more elegant  syntax for CS...
What is Sass?• Stands for “Syntactically Awesome  StyleSheets”• “Sass both provides a simpler, more elegant  syntax for CS...
SassMost Popular Features:• Nesting• Variables• Mixins• Functions• @extend
SassMost Popular Features:• Nesting• Variables• Mixins• Functions• @extend
Sass: Nesting•Sass: Allows you to nest selectors within a parent selector.•This provides an approach that’s clean, concise...
Sass: Nesting•Sass: Allows you to nest selectors within a parent selector.•This provides an approach that’s clean, concise...
Sass: Variables• Allow you to quickly parameterize  your CSS• Create diverse variations in  seconds!• Helps you create des...
Sass: Variables• Allow you to quickly parameterize  your CSS• Create diverse variations in  seconds!• Helps you create des...
Sass: Mixins• Mixins:Sass :: Functions:Javascript• Allow you to define patterns for  reuse• Mixins can be imported across  ...
Sass: Mixins    • Mixins:Sass :: Functions:Javascript    • Allow you to define patterns for       reuse    • Mixins can be ...
Compass•   Collection of Sass mixins and variables•   X-Browser CSS3 mixins    •   Rounded Corners             •   Box Sha...
Let’s turn it up to 11          http://4.bp.blogspot.com/_8lK2el5pnbU/S-dDjMziqsI/AAAAAAAAGMc/YkZMHVA2-5k/s1600/SpinalTap_...
Control Directives       in SassVery similar to a number of controldirectives in languages like javascript,ruby, PHP -- Sa...
@ifWorks like every “if” directive you’veever used (if, else if, else)• create exceptional cases determined  by CSS contro...
@if examples• Example of default @if method  implementation• Example of if() function method
@if examples• Example of default @if method   implementation@if $type == bevel {...}@else if $type == matte {...}@else {.....
@if examples• Example of default @if method   implementation@if $type == bevel {...}@else if $type == matte {...}@else {.....
@forIs different from the “for” directive inmost programming languages• two types: “to” and “through”• cannot count down• ...
@for examples• Example of “to”• Example of “through”
@for examples• Example of “to” @for $i from 1 to 3 {   .item-#{$i} { width: 2em * $i; } } //outputs .item-1 {width: 2em; }...
@for examples• Example of “to” @for $i from 1 to 3 {   .item-#{$i} { width: 2em * $i; } } //outputs .item-1 {width: 2em; }...
@whileIterates across a range of values usinga statement evaluation until it results infalse• can evaluate to < > ==• WARN...
@whileIterates across a range of values usinga statement evaluation until it results infalse• can evaluate to < > ==• WARN...
@eachIterates through a list of itemsindividually• Can include list as parameter or  variable
@eachIterates through a list of itemsindividually• Can include list as parameter or   variable$list: (bob, steve, rob);@ea...
Colors in SassOne of the least discussed features inSass are color features• Create themes/schemes/palettes  based on harm...
Color Functions• complement• adjust-hue• lighten/darken• color math• AND MANY MORE!
The Boxes• A really basic demo which shows  various color functions/control  directives
Advance processing   in CompassCompass may be a framework, but itprovides a number of helpful functionswhich can make inte...
The benefits of  advanced functionsWith these functions, you can:• Offload some of the processing for things you  might do ...
Demos
HSL.clrpick.me• Starting off with a base color,  generate related color-sets  based on hsl relationships.• This can help y...
HSL.clrpick.me• Starting off with a base color,  generate related color-sets  based on hsl relationships.• This can help y...
So let’s put it all       togetherHSL clrpick.me uses Sass/Compass for• Iterators• Positioning color swatches in 360  usin...
So let’s put it all       togetherHSL clrpick.me uses Sass/Compass for• Iterators• Positioning color swatches in 360  usin...
First, an example
First, an example
The Color Wheel
The Color Wheel
The Color Wheel
The Color Wheel@include circlefy(200, $deg);@mixin circlefy($radius, $deg){   $rad: angleToRadians($deg);   @include radia...
The S & L Bars
The S & L Bars
The S and L bars
The S and L bars$light : lightness($colorwheel1);@for $i from 0 through 10 {   &:nth-child(#{$i + 1}){      $startBackgrou...
But hey, you said    “Sencha Touch”Sencha Touch is a javascript frameworkwhich relies on Sass/Compass for itslook/feel.• S...
But hey, you said    “Sencha Touch”Sencha Touch is a javascript frameworkwhich relies on Sass/Compass for itslook/feel.• S...
Sencha Touch DocsThroughout the Sencha Touchdocumentation, you’ll find predefinedmixins which you can use out-of-the-box
ST2 DemoJust to show you that modifying Sass/Compass for Sencha Touch is just aseasy as it is for anything else....
Links•   Sass Site: sass-lang.com•   Compass Site: compass-style.org•   Compass.app Site: compass.handlino.com•   HSL Colo...
Upcoming SlideShare
Loading in …5
×

Advanced sass/compass

9,127
-1

Published on

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

Published in: Technology, Education
1 Comment
15 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,127
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
102
Comments
1
Likes
15
Embeds 0
No embeds

No notes for slide
  • \n
  • I&amp;#x2019;ve been developing web solutions for over 12 years. I&amp;#x2019;m a Principal Front-End Architect at TandemSeven where I build mobile and portal solutions for clients in the Financial Services, Health Care, Energy industries. \n
  • \n
  • 1.) They&apos;re all generally great and do basically the same thing. There are some folks who are passionate about the issue, but we&amp;#x2019;re here to talk about Sass/Compass\n2.) We&apos;re going to assume that you know the basics and buy into it. &amp;#xA0;I&apos;ll point out basic benefits as they come up, but it&apos;s not a focus of this presentation\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • these features are unique to Sass vs LESS. Stylus has some similar features\n
  • 2.) Called an &amp;#x201C;instance method&amp;#x201D; which evaluates a boolean condition. This is similiar to the javascript ternary operator for property values. Helpful for conditions you want to implement inline and can be useful in an iterator.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Well, fortunately Sass solves a lot of those problems out of the box. \n
  • \n
  • \n
  • \n
  • show page of color functions using the various functions above. color_demo.html\n
  • \n
  • \n
  • Should I take the time to show the examples first to illustrate where the talk is going and use the two examples to demonstrate each concept?\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Advanced sass/compass

    1. 1. Advanced http://picklebums.com/wp-content/uploads/2010/06/crayon-drawing.jpg
    2. 2. Who is this guy? Nick Cooley Principal Front-End Architect, TandemSeven: http://www.tandemseven.com @nickcooley http://www.github.com/nickcooley
    3. 3. Who is this guy? Nick Cooley Principal Front-End Architect, TandemSeven: http://www.tandemseven.com @nickcooley http://www.github.com/nickcooley
    4. 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. 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 CSSMany great articles arguing the merits/gotchas of using apre-processor. Here’s one I really agree with:http://bit.ly/SassisntbadMy personal opinion: “Like everything in technology,preprocessors are a tool in your arsenal. You shouldunderstand the fundamentals of CSS before relying on them.”
    6. 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 CSSMany great articles arguing the merits/gotchas of using apre-processor. Here’s one I really agree with:http://bit.ly/SassisntbadMy personal opinion: “Like everything in technology,preprocessors are a tool in your arsenal. You shouldunderstand the fundamentals of CSS before relying on them.”
    7. 7. What this Presentation ISN’T • How to code/structure CSSThe hope is that you have *some* CSSknowledge and are aware of best practices. Ifnot, here’s a great article for you: kiano.sh/Inxxym • How to build apps with Sencha TouchWhile we will go over examples that includedemo Sencha Touch apps, the focus really is onthe Sass/Compass and resulting CSS
    8. 8. Let’s Recap:
    9. 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. 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. 11. SassMost Popular Features:• Nesting• Variables• Mixins• Functions• @extend
    12. 12. SassMost Popular Features:• Nesting• Variables• Mixins• Functions• @extend
    13. 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. 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. 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. 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. 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. 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. 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. 20. Let’s turn it up to 11 http://4.bp.blogspot.com/_8lK2el5pnbU/S-dDjMziqsI/AAAAAAAAGMc/YkZMHVA2-5k/s1600/SpinalTap_.jpg
    21. 21. Control Directives in SassVery similar to a number of controldirectives in languages like javascript,ruby, PHP -- Sass provides somerudimentary functionality:• if/else if/else• for• while
    22. 22. @ifWorks like every “if” directive you’veever 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. 23. @if examples• Example of default @if method implementation• Example of if() function method
    24. 24. @if examples• Example of default @if method implementation@if $type == bevel {...}@else if $type == matte {...}@else {...}• Example of if() function method
    25. 25. @if examples• Example of default @if method implementation@if $type == bevel {...}@else if $type == matte {...}@else {...}• Example of if() function methodborder: if($i%2==0, 1px solid #000, 4px solid #333);
    26. 26. @forIs different from the “for” directive inmost programming languages• two types: “to” and “through”• cannot count down• can only iterate by one
    27. 27. @for examples• Example of “to”• Example of “through”
    28. 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. 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. 30. @whileIterates across a range of values usinga statement evaluation until it results infalse• can evaluate to < > ==• WARNING: you must adjust the evaluation variable manually
    31. 31. @whileIterates across a range of values usinga statement evaluation until it results infalse• 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. 32. @eachIterates through a list of itemsindividually• Can include list as parameter or variable
    33. 33. @eachIterates through a list of itemsindividually• 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. 34. Colors in SassOne of the least discussed features inSass 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. 35. Color Functions• complement• adjust-hue• lighten/darken• color math• AND MANY MORE!
    36. 36. The Boxes• A really basic demo which shows various color functions/control directives
    37. 37. Advance processing in CompassCompass may be a framework, but itprovides a number of helpful functionswhich can make interesting results:• Geometry functions: • sin(), cos(), tan(), pi()• Additional math functions: • e(), log(), sqrt()
    38. 38. The benefits of advanced functionsWith 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. 39. Demos
    40. 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. 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. 42. So let’s put it all togetherHSL clrpick.me uses Sass/Compass for• Iterators• Positioning color swatches in 360 using Compass geometry• Adjusts color using pre-defined relationships
    43. 43. So let’s put it all togetherHSL clrpick.me uses Sass/Compass for• Iterators• Positioning color swatches in 360 using Compass geometry• Adjusts color using pre-defined relationships
    44. 44. First, an example
    45. 45. First, an example
    46. 46. The Color Wheel
    47. 47. The Color Wheel
    48. 48. The Color Wheel
    49. 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. 50. The S & L Bars
    51. 51. The S & L Bars
    52. 52. The S and L bars
    53. 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. 54. But hey, you said “Sencha Touch”Sencha Touch is a javascript frameworkwhich relies on Sass/Compass for itslook/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. 55. But hey, you said “Sencha Touch”Sencha Touch is a javascript frameworkwhich relies on Sass/Compass for itslook/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. 56. Sencha Touch DocsThroughout the Sencha Touchdocumentation, you’ll find predefinedmixins which you can use out-of-the-box
    57. 57. ST2 DemoJust to show you that modifying Sass/Compass for Sencha Touch is just aseasy as it is for anything else....
    58. 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/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×