ParisJS #11 : Sass & Compass

1. Sass & Compass

2. Sass &http://sass-lang.com/ http://compass-style.org/ 3. Question #1Do you write CSS ? 4. Question #2 Do you love(writing) CSS ? 5. Question #3 Did you love(writing) CSS ? 6. Good News #1 Sass makesCSS fun again 7. Good News #2Sass will make youlove CSS again 8. Good News #3Compass will make youlove CSS3 again 9. Who ?Julien CabansI care about Front End @ZeeAgencyI reply to [email protected] tweet sometimes @JulienCabanesI share some code to github.com/ZeeAgency 10. Things to remember today #1 11. SYFK ! 12. Save Your F... Keyboard ! 13. Save Your F... Keyboard ! 14. Things to remember today #2 15. Be Lazy 16. Lazier is Faster 17. Think yourself as Indiana Jones... 18. Think yourself asIndiana Jones... You have to kill this son of a b... ! 19. Think yourself asIndiana Jones... You have to kill this son of a b... ! You have a gun. 20. Think yourself asIndiana Jones... You have to kill this son of a b... ! You have a gun. Why dont you just ... use it ? 21. Think yourself as Indiana Jones... You have to style this website ! You have a computer. Why dont you just ... use it ? 22. End of the StoryBack to the Code 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. CSS : The Bad Parts Variables... come on ! (Still draft) Selectors vs. DRY Modularity : many les === many HTTP requests Functions : Cant write your owns Separation of Concerns is almost impossible CSS3 is great but vendors prexing, damn ! and more ! 25. Solution #1Wait for CSS4 ? 26. Solution #2Abstraction 27. Solution #2 Abstraction Its nothing to be scared of - Chris Eppsteincreator of Compass & Sass Core team member 28. Good Abstraction How ? 29. Good AbstractionKeep the Good Parts 30. Good Abstraction Keep the Good PartsCSS is easy, Keep it easy 31. Good AbstractionKeep the Good PartsKeep the Syntax 32. Good AbstractionForget the Bad Parts 33. Good AbstractionForget the Bad PartsCSS is clearly not enough 34. Good AbstractionForget the Bad PartsEnhance the Syntax 35. Good AbstractionCSS Pre-Processorsto the rescue 36. Quick Overview of CSS Pre-ProcessorsLESS Stylus Sass/SCSSVoluntary omitted ofOther/PHP/Python CSS preprocessors(Turbine, CSS Cacheer...) 37. Quick Overview of CSS Pre-ProcessorsLESSStylus Sass/SCSSWritten in JS JS Ruby 38. Quick Overview of CSS Pre-ProcessorsLESSStylus Sass/SCSSWritten in JS JS Ruby 39. Quick Overview of CSS Pre-Processors LESSStylus Sass/SCSSWritten inJSJS RubyContextFront & Local Local / Back Local / Back 40. Quick Overview of CSS Pre-ProcessorsLESSStylus Sass/SCSSWritten in JSJS RubyContext Front & Local Local / Back Local / Back Front could be good way to goif this was a polyfillbut CSS4 doesnt exist yet 41. Quick Overview of CSS Pre-Processors LESSStylusSass/SCSSWritten inJSJS RubyContextFront & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS Superset 42. Quick Overview of CSS Pre-Processors LESSStylusSass/SCSSWritten inJSJS RubyContextFront & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetYour CSS wont work 43. Quick Overview of CSS Pre-ProcessorsLESSStylusSass/SCSSWritten in JS JS RubyContext Front & LocalLocal / BackLocal / BackSyntaxCSS SupersetNot CSSCSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue; 44. Quick Overview of CSS Pre-ProcessorsLESS StylusSass/SCSSWritten in JSJS RubyContext Front & Local Local / BackLocal / BackSyntaxCSS Superset JS LikeCSS SupersetVariable Syntax @color: blue;variable = blue $variable: blue;tractionbad abs 45. Quick Overview of CSS Pre-ProcessorsLESSStylusSass/SCSSWritten in JS JS RubyContext Front & LocalLocal / BackLocal / BackSyntaxCSS SupersetNot CSSCSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {}foo() @mixin foo() {} 46. Quick Overview of CSS Pre-ProcessorsLESSStylusSass/SCSSWritten in JS JS RubyContext Front & LocalLocal / BackLocal / BackSyntaxCSS SupersetNot CSSCSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {}foo() @mixin foo() {} implicit abs traction co uldincrease learni ng cur ve 47. Quick Overview of CSS Pre-ProcessorsLESSStylusSass/SCSSWritten in JS JS RubyContext Front & LocalLocal / BackLocal / BackSyntaxCSS SupersetNot CSSCSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {}foo() @mixin foo() {} explicitab s traction 48. Quick Overview of CSS Pre-ProcessorsLESSStylusSass/SCSSWritten in JS JS RubyContext Front & LocalLocal / BackLocal / BackSyntaxCSS SupersetNot CSSCSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {}foo() @mixin foo() {}ImportStyleStyleStyle & Images ! 49. Quick Overview of CSS Pre-ProcessorsLESSStylusSass/SCSSWritten in JS JS RubyContext Front & LocalLocal / BackLocal / BackSyntaxCSS SupersetNot CSSCSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {}foo() @mixin foo() {}ImportStyleStyleStyle & Images ! 50. Quick Overview of CSS Pre-ProcessorsLESSStylusSass/SCSSWritten inJSJS RubyContext Front & LocalLocal / BackLocal / BackSyntaxCSS SupersetNot CSSCSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax.foo() {} foo() @mixin foo() {}ImportStyleStyleStyle & Images !Framework Roll your own Roll your ownCompass 51. Quick Overview of CSS Pre-ProcessorsLESSStylusSass/SCSSWritten inJSJS RubyContext Front & LocalLocal / BackLocal / BackSyntaxCSS SupersetNot CSSCSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax.foo() {} foo() @mixin foo() {}ImportStyleStyleStyle & Images !Framework Roll your own Roll your ownCompass 52. Quick Overview of CSS Pre-ProcessorsLESSStylusSass/SCSSRun withJSJS RubyContext Front & LocalLocal / BackLocal / BackSyntax More on this laterCSS SupersetNot CSSCSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax.foo() {} foo() @mixin foo() {}ImportStyleStyleStyle & Images !Framework Roll your own Roll your ownCompass 53. Skipping Technical Infos gem install sasshttp://sass-lang.com/tutorial.html 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/le changes and parse Shares a lot of features with LESS & Stylus 55. SCSS is a CSS3 Superset Every existing CSS will work just ne ! You love {...} and ; thats OK ! You want a little more ? Try it ! You want a lot more ? Love it ! 56. Ready ? 57. Killer Feature #1 58. VariablesSCSS $link-color: #b4d455;a { color: $link-color;} SCSSa { color: #b4d455;} 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. What can we dowith Variables ? 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. 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. 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. 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. 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. 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. Number OperationsWhat about this ?p {$font-size: 10px;$line-height: 8px;font: $font-size / $line-height;} 68. Number OperationsWhat about this ?p {$font-size: 10px;$line-height: 8px;font: $font-size / $line-height;} SOuch...p {font: 1.25;} 69. Interpolation#{...} avoid operationsp {$font-size: 10px;$line-height: 8px;font: #{$font-size} / #{$line-height};} 70. Interpolation#{...} avoid operationsp {$font-size: 10px;$line-height: 8px;font: #{$font-size} / #{$line-height};} SNicep {font: 10px / 8px;} 71. Interpolation#{...} can be used for...$className: foo;$property: padding;p.#{$className} { #{$property}: 10px;}STemplating ?p.foo { padding: 10px;} 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. Number FunctionsSounds familiarround(), ceil(), floor(), abs(), percentage()$width: 960px;$columns: 14;div { width: round($width / $columns);}Sdiv { width: 69px;} 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. 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. and more...http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html 77. Killer Feature #2 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. 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. 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. WarningRules Nesting helps you write more typing less 82. WarningRules Nesting helps you write more typing less 83. Warning But ! 84. WarningDont forget about Performance 85. WarningSelectors doesnt needto reect your DOM... 86. Nesting abuse#wrapper { section { article { h2 { font-size: 200%; a { color: red; &:hover { text-decoration: underline; } } } p { text-align: justify; } } }} 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. Dont need it ? 89. Dont use it ! 90. Modularity 91. Dont use @importhttp://www.stevesouders.com/blog/2009/04/09/dont-use-import/ 92. Dont use @importUse @import ! 93. Killer Feature #3 94. @importreset.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. Make your own Abstractions 96. Killer Feature #4 97. FunctionsDene with @function@function round-by($value, $factor: 1) { @return round($value / $factor) * $factor;}div { width: round-by(1337px, 20);} Sdiv {width: 1340px;} 98. Killer Feature #5 99. MixinsDene 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. Mixins augment styleFunctions return values 101. Pause 102. Fixing the Bad PartsVariablesDRYModularityFunctionsSeparation of ConcernsCSS3 vs.Vendor prexing 103. Fixing the Bad PartsVariables Yep !DRYModularityFunctionsSeparation of ConcernsCSS3 vs.Vendor prexing 104. Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!ModularityFunctionsSeparation of ConcernsCSS3 vs.Vendor prexing 105. Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!ModularityImports !FunctionsSeparation of ConcernsCSS3 vs.Vendor prexing 106. Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!ModularityImports !Functions Yep !Separation of ConcernsCSS3 vs.Vendor prexing 107. Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!ModularityImports !Functions Yep !Separation of Concerns ?CSS3 vs.Vendor prexing? 108. Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!ModularityImports !Functions Yep !Separation of ConcernsMixins ?CSS3 vs.Vendor prexing? 109. Separation of ConcernsClearx example

110. Separation of ConcernsClearx example

111. @mixin Solution@mixin clearfix { zoom: 1; &:before, &:after { content: "0020"; display: block; height: 0; visibility: hidden; } &:after { clear: both; }}div { @include clearfix;} 112. @mixin Solution@mixin clearfix { zoom: 1; &:before, &:after { content: "0020"; display: block; height: 0; visibility: hidden; } &:after { clear: both; }}div { @include clearfix;} 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. @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; }Theres a better way... 115. Killer Feature #6 116. Inheritance@extendis at selectorswhat @mixin is for styles 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. 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. @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. @extend more...@import "_reset", "_grid", "_box";div { @extend .clearfix; @extend .grid-12;}article { @extend .box; @extend .col-4;} 121. Killer Feature #7 122. Skipping Technical Infosgem install compass http://compass-style.org/install/ 123. Compass is ameta-framework 124. It helps you writeyour own Framework 125. Boilerplate 126. Extensions 127. Good practices 128. It comes with2 frameworksCore 129. CoreDesign agnostic 130. CoreProvides mixins for CSS3 : no more vendor prexes Typography : links, lists, text helpers Utilities : spriting the good way, others... 131. CoreProvides mixins for CSS3 : no more vendor prexes Typography : links, lists, text helpers Utilities : spriting the good way, others... 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. 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. 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. 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 inconsistencybackground: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. 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. More CSS3 mixinsbackground-clipbackground-originbackground-sizeboxbox-sizingcolumnsopacitytransformtransitionand more... 138. SpritingMagic imports@import "icons/*.png";@include all-icons-sprites; 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. 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. 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. 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. Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!ModularityImports !Functions Yep !Separation of ConcernsMixins & Inheritance !CSS3 vs.Vendor prexingCompass ! 144. Bonus 145. Performance trick 146. Save HTTP Requests 147. Save HTTP Requestsbut dont abuse 148. Include imagesdiv { background: url("icons/tick.png") no-repeat;} 149. Include imagesdiv { background: inline-image("icons/tick.png") no-repeat;} 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. Less HTTP Requests butMore Ko in your CSS 152. BTW... 153. Congurationcong.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 minieddiv{-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. .talk:after { content: "Thanks";} 155. More infoshttp://sass-lang.com/http://compass-style.org/http://nex-3.com/http://chriseppstein.github.com/http://thesassway.com/

Technology

ParisJS #11 : Sass & Compass