Advanced sass/compass

  • 8,451 views
Uploaded on

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

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

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Got here on some search query, end up seeing a link to my The Sass Way article. Glad you liked it (and that you're spreading the word) :-)
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,451
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
85
Comments
1
Likes
13

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • I’ve been developing web solutions for over 12 years. I’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're all generally great and do basically the same thing. There are some folks who are passionate about the issue, but we’re here to talk about Sass/Compass\n2.) We're going to assume that you know the basics and buy into it.  I'll point out basic benefits as they come up, but it'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 “instance method” 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

Transcript

  • 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 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. 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. 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. 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. SassMost Popular Features:• Nesting• Variables• Mixins• Functions• @extend
  • 12. SassMost 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 SassVery similar to a number of controldirectives in languages like javascript,ruby, PHP -- Sass provides somerudimentary functionality:• if/else if/else• for• while
  • 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. @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 methodborder: if($i%2==0, 1px solid #000, 4px solid #333);
  • 26. @forIs different from the “for” directive inmost 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. @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. @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. @eachIterates through a list of itemsindividually• Can include list as parameter or variable
  • 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. 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. 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 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. 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. 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 togetherHSL 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 togetherHSL 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 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. 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. Sencha Touch DocsThroughout the Sencha Touchdocumentation, you’ll find predefinedmixins which you can use out-of-the-box
  • 57. ST2 DemoJust to show you that modifying Sass/Compass for Sencha Touch is just aseasy 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/