ParisJS #11 : Sass & Compass

2,752 views

Published on

Published in: Technology, Education

ParisJS #11 : Sass & Compass

  1. 1. Sass & Compass
  2. 2. Sass &http://sass-lang.com/ http://compass-style.org/
  3. 3. Question #1Do you write CSS ?
  4. 4. Question #2 Do you love(writing) CSS ?
  5. 5. Question #3 Did you love(writing) CSS ?
  6. 6. Good News #1 Sass makesCSS fun again
  7. 7. Good News #2Sass will make you love CSS again
  8. 8. Good News #3Compass will make you love CSS3 again
  9. 9. Who ?Julien CabanèsI care about Front End @ZeeAgencyI reply to julien@zeeagency.comI tweet sometimes @JulienCabanesI share some code to github.com/ZeeAgency
  10. 10. Things to remember today #1
  11. 11. SYFK !
  12. 12. Save Your F... Keyboard !
  13. 13. Save Your F... Keyboard !
  14. 14. Things to remember today #2
  15. 15. Be Lazy
  16. 16. Lazier is Faster
  17. 17. Think yourself as Indiana Jones...
  18. 18. Think yourself as Indiana Jones...• You have to kill this son of a b... !
  19. 19. Think yourself as Indiana Jones...• You have to kill this son of a b... !• You have a gun.
  20. 20. Think yourself as Indiana Jones...• You have to kill this son of a b... !• You have a gun.• Why don’t you just ... use it ?
  21. 21. Think yourself as Indiana Jones...• You have to style this website !• You have a computer.• Why don’t you just ... use it ?
  22. 22. End of the StoryBack to the Code
  23. 23. CSS : The Good Parts• CSS Syntax is easy• Selector Query Language is nice• Cascading is nice• Functions.Yes, CSS have functions • CSS2 : attr(), counter(), url() • CSS3 : calc(), translateX(), rotate()...• Media Queries• and more...
  24. 24. CSS : The Bad Parts• Variables... come on ! (Still draft)• Selectors vs. DRY• Modularity : many files === many HTTP requests• Functions : Can’t write your owns• Separation of Concerns is almost impossible• CSS3 is great but vendors prefixing, damn !• and more !
  25. 25. Solution #1Wait for CSS4 ?
  26. 26. Solution #2Abstraction
  27. 27. Solution #2 Abstraction“ It’s nothing to be scared of ” - Chris Eppstein creator of Compass & Sass Core team member
  28. 28. Good Abstraction How ?
  29. 29. Good AbstractionKeep the Good Parts
  30. 30. Good Abstraction Keep the Good PartsCSS is easy, Keep it easy
  31. 31. Good AbstractionKeep the Good Parts Keep the Syntax
  32. 32. Good AbstractionForget the Bad Parts
  33. 33. Good Abstraction Forget the Bad PartsCSS is clearly not enough
  34. 34. Good AbstractionForget the Bad PartsEnhance the Syntax
  35. 35. Good AbstractionCSS Pre-Processors to the rescue
  36. 36. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSS Voluntary omitted of Other/PHP/Python CSS preprocessors (Turbine, CSS Cacheer...)
  37. 37. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS Ruby
  38. 38. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS Ruby
  39. 39. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / Back
  40. 40. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / Back Front could be good way to go if this was a polyfill but CSS4 doesn’t exist yet
  41. 41. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS Superset
  42. 42. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS Superset Your CSS won’t work
  43. 43. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;
  44. 44. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset JS Like CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue; traction bad abs
  45. 45. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {}
  46. 46. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {} implicit abs traction co uld increase learni ng cur ve
  47. 47. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {} explicit ab s traction
  48. 48. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {}Import Style Style Style & Images !
  49. 49. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {}Import Style Style Style & Images !
  50. 50. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {}Import Style Style Style & Images !Framework Roll your own Roll your own Compass
  51. 51. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {}Import Style Style Style & Images !Framework Roll your own Roll your own Compass
  52. 52. Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSRun with JS JS RubyContext Front & Local Local / Back Local / BackSyntax More on this later CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {}Import Style Style Style & Images !Framework Roll your own Roll your own Compass
  53. 53. Skipping Technical Infos gem install sass http://sass-lang.com/tutorial.html
  54. 54. Sass• One language but 2 syntaxes • Sass : indented syntax, forget { } and ; • SCSS : Sassy CSS === CSS3 superset• Means Syntaxically Awesome StyleSheets• Should run on your machine, not the server• Is watching for folder/file changes and parse• Shares a lot of features with LESS & Stylus
  55. 55. SCSS is a CSS3 Superset• Every existing CSS will work just fine !• You love {...} and ; that’s OK !• You want a little more ? Try it !• You want a lot more ? Love it !
  56. 56. Ready ?
  57. 57. Killer Feature #1
  58. 58. VariablesSCSS $link-color: #b4d455;a { color: $link-color;} ⌘SCSSa { color: #b4d455;}
  59. 59. Variables Types // With or without unit$number: 1.2;$number: 10px;$number: 20%;// With or without quotes$string: "Hello World";$string: /img/icons.png;$string: underline;// Any kind$color: #b4d455;$color: rgba(0, 0, 0, 0.5);$color: hsl(100deg, 40%, 60%);// Wow$boolean: true;$boolean: false;// With commas or spaces$list: 10px 5px 15px;$list: Helvetica, Arial, sans-serif;
  60. 60. What can we dowith Variables ?
  61. 61. Number OperationsBasic Arithmetic : + - * / %// Ever need this ?$lightbox-width: 500px;$lightbox-height: 400px;$lightbox-padding: 20px;.lightbox { position: absolute; top: 50%; ⌘S left: 50%; margin-top: -$lightbox-height / 2; margin-left: -$lightbox-width / 2; padding: $lightbox-padding; width: $lightbox-width - ($lightbox-padding * 2); height: $lightbox-height - ($lightbox-padding * 2);}
  62. 62. Number OperationsTalkin’ about division...// Division happens if.. variable, parentheses or other operationp { font: 10px / 8px; $width: 1000px; width: $width / 2; height: (500px / 2); margin-left: 5px + 8px / 2px;}
  63. 63. Number OperationsTalkin’ about division...// Division happens if.. variable, parentheses or other operationp { font: 10px / 8px; // Plain CSS, no division $width: 1000px; width: $width / 2; height: (500px / 2); margin-left: 5px + 8px / 2px;}
  64. 64. Number OperationsTalkin’ about division...// Division happens if.. variable, parentheses or other operationp { font: 10px / 8px; // Plain CSS, no division $width: 1000px; width: $width / 2; // Uses a variable, does division height: (500px / 2); margin-left: 5px + 8px / 2px;}
  65. 65. Number OperationsTalkin’ about division...// Division happens if.. variable, parentheses or other operationp { font: 10px / 8px; // Plain CSS, no division $width: 1000px; width: $width / 2; // Uses a variable, does division height: (500px / 2); // Uses parentheses, does division margin-left: 5px + 8px / 2px;}
  66. 66. Number OperationsTalkin’ about division...// Division happens if.. variable, parentheses or other operationp { font: 10px / 8px; // Plain CSS, no division $width: 1000px; width: $width / 2; // Uses a variable, does division height: (500px / 2); // Uses parentheses, does division margin-left: 5px + 8px / 2px; // Uses +, does division}
  67. 67. Number OperationsWhat about this ?p { $font-size: 10px; $line-height: 8px; font: $font-size / $line-height;}
  68. 68. Number OperationsWhat about this ?p { $font-size: 10px; $line-height: 8px; font: $font-size / $line-height;} ⌘SOuch...p { font: 1.25;}
  69. 69. Interpolation#{...} avoid operationsp { $font-size: 10px; $line-height: 8px; font: #{$font-size} / #{$line-height};}
  70. 70. Interpolation#{...} avoid operationsp { $font-size: 10px; $line-height: 8px; font: #{$font-size} / #{$line-height};} ⌘SNicep { font: 10px / 8px;}
  71. 71. Interpolation#{...} can be used for...$className: foo;$property: padding;p.#{$className} { #{$property}: 10px;} ⌘STemplating ?p.foo { padding: 10px;}
  72. 72. Color OperationsEasy to understandp { color: #010203 + #040506;}a { color: #010203 * 2;}b { color: rgba(…) + rgba(…);} ⌘Sp {color: #050709;}a {color: #020406;}b {color: rgba(…);}
  73. 73. Number FunctionsSounds familiarround(), ceil(), floor(), abs(), percentage()$width: 960px;$columns: 14;div { width: round($width / $columns);} ⌘Sdiv { width: 69px;}
  74. 74. Color FunctionsLazy RGBA, yay !$my-color: rgba(#b4d455, 0.5);Mutators$my-color: mix(red, blue);$my-color: lighten(red, 20%);$my-color: darken(red, 20%);$my-color: transparentize($my-color, 0.5);$my-color: opacify($my-color, 0.5);$my-color: grayscale(#b4d455);$my-color: invert(#b4d455);$my-color: saturate(#b4d455, 10%);$my-color: adjust-hue(#b4d455, 10%);// And more…
  75. 75. Color FunctionsGetters (aka Accessors)$red-component: red($my-color);$green-component: green($my-color);$blue-component: blue($my-color);$alpha-component: alpha($my-color);$hue-component: hue($my-color);$sat-component: saturation($my-color);$light-component: lightness($my-color);Setters$my-color: adjust-color($my-color, $green: -55);$my-color: scale-color($my-color, $green: 10%);$my-color: change-color($my-color, $green: 255);
  76. 76. and more...http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
  77. 77. Killer Feature #2
  78. 78. NestingPropertiesarticle { background: { color: transparent; image: url("/img/bg.png"); origin: content-box; position: right center; repeat: no-repeat; size: 100px 100px; }} ⌘Sarticle { background-color: transparent; background-image: url("/img/bg.png"); background-origin: content-box; background-position: right center; background-repeat: no-repeat; background-size: 100px 100px;}
  79. 79. NestingRulesh1 { font-size: 200%; a { text-decoration: none; &:hover { text-decoration: underline; } }} ⌘Sh1 {font-size: 200%;}h1 a {text-decoration: none;}h1 a:hover {text-decoration: underline;}
  80. 80. NestingRulesh1 { font-size: 200%; & means this a { text-decoration: none; &:hover { text-decoration: underline; } }} ⌘Sh1 {font-size: 200%;}h1 a {text-decoration: none;}h1 a:hover {text-decoration: underline;}
  81. 81. WarningRules Nesting helps you write more typing less
  82. 82. WarningRules Nesting helps you write more typing less
  83. 83. Warning But !
  84. 84. WarningDon’t forget about Performance
  85. 85. WarningSelectors doesn’t needto reflect your DOM...
  86. 86. Nesting abuse#wrapper { section { article { h2 { font-size: 200%; a { color: red; &:hover { text-decoration: underline; } } } p { text-align: justify; } } }}
  87. 87. Control Directives@if @else @for @each @whileTrivial@if 1 + 1 == 2 { width: 400px;} @else { width: 200px;}Grids@for $i from 1 through 10 { .col-#{$i} { width: $i * 10px; }}
  88. 88. Don’t need it ?
  89. 89. Don’t use it !
  90. 90. Modularity
  91. 91. Don’t use @importhttp://www.stevesouders.com/blog/2009/04/09/dont-use-import/
  92. 92. Don’t use @import Use @import !
  93. 93. Killer Feature #3
  94. 94. @import reset.scss html, body, div, span, object, iframe,style.scss h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr...@import "reset", "header"; header.scss ⌘S header { height: 100px; font-size: 200%; }style.csshtml, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote,pre, abbr............header { height: 100px; font-size: 200%;}
  95. 95. Make your own Abstractions
  96. 96. Killer Feature #4
  97. 97. FunctionsDefine with @function@function round-by($value, $factor: 1) { @return round($value / $factor) * $factor;}div { width: round-by(1337px, 20);} ⌘Sdiv { width: 1340px;}
  98. 98. Killer Feature #5
  99. 99. MixinsDefine with @mixin, use with @include@mixin link-hover-effect($color) { color: $color; &:hover { color: darken($color, 10%); }}article a { @include link-hover-effect( blue);} ⌘Sarticle a { color: blue;}article a:hover { color: #0000cc;}
  100. 100. Mixins augment styleFunctions return values
  101. 101. Pause
  102. 102. Fixing the Bad PartsVariablesDRYModularityFunctionsSeparation of ConcernsCSS3 vs.Vendor prefixing
  103. 103. Fixing the Bad PartsVariables Yep !DRYModularityFunctionsSeparation of ConcernsCSS3 vs.Vendor prefixing
  104. 104. Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!ModularityFunctionsSeparation of ConcernsCSS3 vs.Vendor prefixing
  105. 105. Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!Modularity Imports !FunctionsSeparation of ConcernsCSS3 vs.Vendor prefixing
  106. 106. Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!Modularity Imports !Functions Yep !Separation of ConcernsCSS3 vs.Vendor prefixing
  107. 107. Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!Modularity Imports !Functions Yep !Separation of Concerns ?CSS3 vs.Vendor prefixing ?
  108. 108. Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!Modularity Imports !Functions Yep !Separation of Concerns Mixins ?CSS3 vs.Vendor prefixing ?
  109. 109. Separation of ConcernsClearfix example<div class="clearfix"> <article>Lorem ipsum</article> <article>Lorem ipsum</article> <article>Lorem ipsum</article></div><div class="clearfix"> <article>Lorem ipsum</article> <article>Lorem ipsum</article> <article>Lorem ipsum</article></div>
  110. 110. Separation of ConcernsClearfix example<div> <article>Lorem ipsum</article> <article>Lorem ipsum</article> <article>Lorem ipsum</article></div><div> <article>Lorem ipsum</article> <article>Lorem ipsum</article> <article>Lorem ipsum</article></div>
  111. 111. @mixin Solution@mixin clearfix { zoom: 1; &:before, &:after { content: "0020"; display: block; height: 0; visibility: hidden; } &:after { clear: both; }}div { @include clearfix;}
  112. 112. @mixin Solution@mixin clearfix { zoom: 1; &:before, &:after { content: "0020"; display: block; height: 0; visibility: hidden; } &:after { clear: both; }}div { @include clearfix;}
  113. 113. @mixin Solution Style will be repeated for every mixin uses div { zoom: 1; } div:before, div:after { content: "0020";⌘S display: block; height: 0; visibility: hidden; } div:after { clear: both; }
  114. 114. @mixin Solution Style will be repeated for every mixin uses div { zoom: 1; } div:before, div:after { content: "0020";⌘S display: block; height: 0; visibility: hidden; } div:after { clear: both; } There’s a better way...
  115. 115. Killer Feature #6
  116. 116. Inheritance@extend is at selectorswhat @mixin is for styles
  117. 117. How @extend works.box { border: 1px solid blue; padding: 20px;}.error-message { @extend .box; border-color: red; color: red;} ⌘S.box, .error-message { border: 1px solid blue; padding: 20px;}.error-message { border-color: red; color: red;}
  118. 118. How @extend works.box { border: 1px solid blue; padding: 20px;}.error-message { @extend .box; border-color: red; color: red;} ⌘S.box, .error-message { border: 1px solid blue; padding: 20px;}.error-message { border-color: red; color: red;}
  119. 119. @extend Solution.clearfix { zoom: 1; }.clearfix:before, .clearfix:after { content: "0020"; display: block;....clearfix:after { clear: both; }div { @extend .clearfix;} ⌘S.clearfix, div { zoom: 1; }.clearfix:before, div:before, .clearfix:after, div:after {....clearfix:after, div:after { clear: both; }
  120. 120. @extend more...@import "_reset", "_grid", "_box";div { @extend .clearfix; @extend .grid-12;}article { @extend .box; @extend .col-4;}
  121. 121. Killer Feature #7
  122. 122. Skipping Technical Infosgem install compass http://compass-style.org/install/
  123. 123. Compass is ameta-framework
  124. 124. It helps you writeyour own Framework
  125. 125. Boilerplate
  126. 126. Extensions
  127. 127. Good practices
  128. 128. It comes with 2 frameworksCore
  129. 129. CoreDesign agnostic
  130. 130. CoreProvides mixins for• CSS3 : no more vendor prefixes• Typography : links, lists, text helpers• Utilities : spriting the good way, others...
  131. 131. CoreProvides mixins for• CSS3 : no more vendor prefixes• Typography : links, lists, text helpers• Utilities : spriting the good way, others...
  132. 132. CSS3 mixinsBorder radiusdiv { @include border-radius(5px);} ⌘Sdiv { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}
  133. 133. CSS3 mixinsBox Shadowsdiv { @include box-shadow(rgba(black, 0.5) 0 2px 4px);} ⌘Sdiv { -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px; -o-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px; box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px;}
  134. 134. CSS3 mixinsGradientsdiv { @include background(linear-gradient(top, red, green 50%, blue));} ⌘Sdiv { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,#ff0000), color-stop(50%, #008000), color-stop(100%, #0000ff)); background: -webkit-linear-gradient(top, #ff0000, #008000 50%, #0000ff); background: -moz-linear-gradient(top, #ff0000, #008000 50%, #0000ff); background: -o-linear-gradient(top, #ff0000, #008000 50%, #0000ff); background: -ms-linear-gradient(top, #ff0000, #008000 50%, #0000ff); background: linear-gradient(top, #ff0000, #008000 50%, #0000ff);}
  135. 135. CSS3 mixinsGradientsdiv { @include background(linear-gradient(top, red, green 50%, blue));} ⌘Sdiv { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,#ff0000), color-stop(50%, #008000), color-stop(100%, #0000ff)); background: -webkit-linear-gradient(top, #ff0000, #008000 50%, #0000ff); background: -moz-linear-gradient(top, #ff0000, #008000 50%, #0000ff);} Solves inconsistency background: background: background: -o-linear-gradient(top, #ff0000, #008000 50%, #0000ff); -ms-linear-gradient(top, #ff0000, #008000 50%, #0000ff); linear-gradient(top, #ff0000, #008000 50%, #0000ff);
  136. 136. CSS3 mixinsTransformsdiv { @include rotate(20deg);} ⌘Sdiv { -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}
  137. 137. More CSS3 mixinsbackground-clipbackground-originbackground-sizeboxbox-sizingcolumnsopacitytransformtransitionand more...
  138. 138. SpritingMagic imports@import "icons/*.png";@include all-icons-sprites;
  139. 139. SpritingMagic imports@import "icons/*.png";@include all-icons-sprites; ⌘S.icons-sprite, .icons-tick, .icons-user, .icons-wrench { background: url(/img/icons-scc2e7acafa.png) no-repeat;}.icons-tick { background-position: 0 0;}.icons-user { background-position: 0 -16px;}.icons-wrench { background-position: 0 -32px;}
  140. 140. SpritingMagic imports@import "icons/*.png";@include all-icons-sprites; ⌘S.icons-sprite, .icons-tick, .icons-user, .icons-wrench { background: url(/img/icons-scc2e7acafa.png) no-repeat;}.icons-tick { + background-position: 0 0;}.icons-user { background-position: 0 -16px;}.icons-wrench { background-position: 0 -32px;}
  141. 141. SpritingMagic imports@import "icons/*.png";@include all-icons-sprites; ⌘S.icons-sprite, .icons-tick, .icons-user, .icons-wrench { background: url(/img/icons-scc2e7acafa.png) no-repeat;}.icons-tick { + background-position: 0 0;} uses @extend.icons-user { background-position: 0 -16px;}.icons-wrench { background-position: 0 -32px;}
  142. 142. SpritingMagic imports@import "icons/*.png";@include all-icons-sprites;.icons-sprite { width: 16px; height: 16px;} ⌘S....icons-sprite, .icons-tick, .icons-user, .icons-wrench { width: 16px; height: 16px;}
  143. 143. Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!Modularity Imports !Functions Yep !Separation of Concerns Mixins & Inheritance !CSS3 vs.Vendor prefixing Compass !
  144. 144. Bonus
  145. 145. Performance trick
  146. 146. Save HTTP Requests
  147. 147. Save HTTP Requests but don’t abuse
  148. 148. Include imagesdiv { background: url("icons/tick.png") no-repeat;}
  149. 149. Include imagesdiv { background: inline-image("icons/tick.png") no-repeat;}
  150. 150. Include imagesdiv { background: inline-image("icons/tick.png") no-repeat;} ⌘Sbase64 FTW !div { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhxJREFUeNpi/P//PwMlgImBQsACIhhnCAFZjEAGkANy0B8gwQ00m5kRogpEMYHl5YF4LZBXw/D3/47/Ea/xuOD7PwaGX1AMMvDvfwGGf/8nprkkGQPZLUAVHqR4gY3hH0Ofoby+6ZcvXxjinWL0Gf4wtMC9QAAwAjXXK0jIO8gLyUl9/Pzx98Fjh24AXdOA7gIPoP/PwJwGdvoPoNP/MGQIcwkGq4mrKHz5+uXf0UtH7wBdMRGodgvCgP9ATX/+tyT5JxqCaDAfIu7DwcSWJckjqfzgwQOGU5dP3f3w4cNSoJq5DL//I0Xjn38tMX4xes+ePWOK8IowAPGBmnNZ/jPVS4vLqH7985Xl5YcXDz99+rAJGIDtQAxxIcKA/zVLViy8xM7J9uvU7VPMDnaOOkAb4sVkxTV+sPxgf/fhzdOP797vZ/gLjD4GBojObT8gAQRKiYx9/AxADaAwaDF2NtN6+vMZpwCnAMP7b+8Zfrz49vrj3fdHGJgZkhhYmT4w7P4J1wzWCyY8OBgY5JiBmBFsiLSdvMYP3l/cv1/+/PD57Psz/5kYEhgO/H4K1owEEAYwQlOcAtAQc2YPBmnGFi4TfpnvFz7d+f/wXyrD8T/XGR79w4hfZANAYcELxAJAzMdgzGTJoMOQxnDmfyfD1f9XgGIgq39AaRD+xQDyNBDADAA5gR2IOaA0MzRX/IPiP1D8F4n+BzeAEgAQYAC7HATaTnWSLQAAAABJRU5ErkJggg==) no-repeat;}
  151. 151. Less HTTP Requests butMore Ko in your CSS
  152. 152. BTW...
  153. 153. Configurationconfig.rb# You can select your preferred output style hereoutput_style = :compressedstyle.scssdiv { @include border-radius(5px); @include box-shadow(rgba( black, 0.5) 0 2px 4px); @include background(linear-gradient(top, red, green 50%, blue)); @include rotate(20deg);} ⌘Sstyle.css minifieddiv{-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;-moz-box-shadow:rgba(0,0,0,0.5) 0 2px 4px;-webkit-box-shadow:rgba(0,0,0,0.5) 0 2px4px;-o-box-shadow:rgba(0,0,0,0.5) 0 2px 4px;box-shadow:rgba(0,0,0,0.5) 0 2px 4px;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(50%, #008000), color-stop(100%,#0000ff));background:-webkit-linear-gradient(top, #ff0000,#008000 50%,#0000ff);background:-moz-linear-gradient(top, #ff0000,#008000 50%,#0000ff);background:-o-linear-gradient(top, #ff0000,#00800050%,#0000ff);background:-ms-linear-gradient(top, #ff0000,#008000 50%,#0000ff);background:linear-gradient(top,
  154. 154. .talk:after { content: "Thanks";}
  155. 155. More infoshttp://sass-lang.com/http://compass-style.org/http://nex-3.com/http://chriseppstein.github.com/http://thesassway.com/

×