Download as PDF, PPTX
Uploaded byIdan Gazit
CSS Extenders
This document summarizes and compares CSS preprocessor tools Sass and LESS. Both tools allow for variables, mixins, nested rules and other features to aid in writing CSS in a more modular way. Sass uses the SCSS syntax which is a CSS superset, while LESS uses its own syntax. Both compile to plain CSS. The Compass framework is also mentioned, which builds on Sass and provides reusable components and a workflow for building CSS.
More Related Content
![Organizing & Simplifying CSS [with Sass]](https://cdn.slidesharecdn.com/ss_thumbnails/organizingcss-100527235847-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
CSS Extenders
- 1. Intro to CSSExtenders: SASS LESS Bonus: Compass Framework PyWeb-IL #22 / 27 Dec 2010 http://flic.kr/p/768ooD
- 2. This frontend dudemaintains… a production site with lots of CSS a heavy drinking habit a growing hatred for humanity http://flic.kr/p/5cCATU
- 3. CSS can beannoying. Here are some workarounds that might make you SMILE
- 4. CSS ANNOYANCES variables class mixins rule nesting math
- 5. CSS Extenders CSS Preprocessorsis a crappy name.
- 6. srsly? at pyweb? (please don’t shoot me)
- 7. SASS LESS sass-lang.com lesscss.org
- 8. CleverCSS very similar •not as mature • not actively developed
- 10. variables variables class mixins class mixins rule nesting rule nesting math math
- 11. DSL is for losers. CleverCSS SASS LESS DSL CSS Superset
- 12. Yeah, um, what he said… CleverCSS SASS LESS (.scss) DSL CSS Superset
- 13.
- 14. gem install haml gem install less .scss .less DSL: .sass
- 15.
- 16. $mycolor: #ddeeff; @mycolor: #ddeeff; $myborder: 3px; @myborder: 3px; #mynav { #mynav { background-color: $mycolor; background-color: @mycolor; color: $mycolor + #111; color: @mycolor + #111; } } .hasborder { .hasborder { border: $myborder solid black; border: @myborder solid black; padding: $myborder * 4; padding: @myborder * 4; } }
- 17. Basic Color Math Basic Color Math $mycolor + #111 @mycolor + #111 Fancy color functions lighten($mycolor, 20%) Advantage: SASS
- 18.
- 19. @mixin sidebar { .sidebar { font-size: 14px; font-size: 14px; background-color: #ddd; background-color: #ddd; width: 100px; width: 100px } } .sidebar_right { .sidebar_right { @include sidebar; .sidebar; float: right; float: right; } } .sidebar_left { .sidebar_left { @include sidebar; .sidebar; float: left; float: left; } }
- 20. @mixin sidebar($width: 100px){ .sidebar(@width: 100px) { font-size: 14px; font-size: 14px; background-color: #ddd; background-color: #ddd; width: $width; width: @width; } } .sidebar_right { .sidebar_right { @include sidebar; .sidebar; float: right; float: right; } } .sidebar_right_wide { .sidebar_right_wide { @include sidebar(150px); .sidebar(150px); float: right; float: right; } }
- 21.
- 22. #header { color: green; } #header a { text-decoration: none; color: red; }
- 23. #header #header a #header ul #headerul li #header ul li strong #content a #content ul … #FML
- 24. #header { #header { color: green; color: green; a{ a{ text-decoration: none; text-decoration: none; color: red; color: red; } } a.special { a.special { font-weight: bold; font-weight: bold; color: blue; color: blue; } } } }
- 25. #header { color: green; border: { width: 1px; color: black; style: solid; } } ?
- 26.
- 27. .error { color: red; } .error.severe { @extend .error; font-weight: bold; } ?
- 28.
- 29. /* _mysnippet.scss */ /* mysnippet.less */ … … /* style.scss */ /* style.less */ @import “mysnippet” @import “mysnippet”
- 30. Rope! enough for youto hang yourself with.
- 31.
- 32. sass style.scss:style.css lessc style.less sass srcdir/sass:srcdir/css
- 33. sass style.scss:style.css lessc style.less sass srcdir/sass:srcdir/css sass --watch style.scss:style.css lessc style.less --watch sass --watch srcdir/sass:srcdir/css
- 34. More functionality Less functionality More documentation Less documentation Took ideas from LESS Took ideas from SASS Core is the same Core is the same
- 35. More functionality Less functionality More documentation Less documentation Took ideas from LESS Took ideas from SASS Core is the same Core is the same
- 36. A CSS AuthoringFramework based on SASS http://compass-style.org but really, you should see http://beta.compass-style.org
- 37. Like Django forCSS extensible, best-practice implementations that you don’t need to reinvent
- 38. Installing gem install compass compass create /path/to/project
- 39. _BASE.SCSS $brand_color: #acd29f; $base_font_size: 16px; @import“compass/reset”; @import “compass/utilities”; …
- 40. MYAPP.CSS @import “base”; /* yoursassy styles go here. */
- 41. DEJA VU? {% extends“base.html” %} <!-- your markup goes here. -->
- 42. END PRESENTATIONAL MARKUP <bodyid=“blog-detail”> <article class=“wrap”> <header class=“grid-12”>…</header> <div class=“grid-8” id=“content”>…</div> <aside class=“grid-4” id>…</aside> <footer class=“grid-12”>…</footer> </article> </body>
- 43. END PRESENTATIONAL MARKUP @import“blueprint” @mixin two-column { /* two-col layout on a 12-col grid */ article { @include container; header, footer { @include column(12); } aside { @include column(4); } .content { @include column(8); } } } body#blog-detail, body#blog-list { @include two-column; }
- 44. END PRESENTATIONAL MARKUP <body id=“blog-detail”> <article class=“wrap”> <header class=“grid-12”>…</header> <div class=“grid-8” id=“content”>…</div> <aside class=“grid-4” id>…</aside> <footer class=“grid-12”>…</footer> </article> </body> <body id=“blog-detail”> <article> <header>…</header> <div id=“content”>…</div> <aside>…</aside> <footer>…</footer> </article> </body>
- 45. COST: LARGER CSS GeneratedCSS body#blog-detail article { /* wrap styles copied here */ } body#blog-detail article header, body#blog-detail article footer { /* grid-12 styles copied here */} body #blog-detail article aside { /* grid-4 styles copied here */ }
- 46. VENDOR PREFIX HELL @import“compass/css3” .alert { background-color: red; @include border-radius(4px) }
- 47. VENDOR PREFIX HELL .alert{ background-color: red; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }
- 48. SAME POWERFUL TECHNIQUES, NEW LOW PRICE cross-browser hacks and fixes shortcuts around verbose CSS pre-baked layout (ex: sticky footer) spriting extensions!
- 49. DEPLOYMENT I still haven’tcompletely figured this out. Trigger compilation from Fabric. Bonus: sass --style compressed infile:outfile
- 50. Power complexity can’t use fancy GUI editors (SASS) toolchain addition Still pretty awesome.
- 51.
- 52. Thank you! @idangazit