Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bringing Sexy BackSass, LESS, Compass   Design for Drupal Boston 2011   Presented by Claudina Sarahe
@itsmisscs
Straw Pollhttp://www.flickr.com/photos/horiavarlan/4273103337/in/photostream/
1. Limitations of CSSII. More on LESS & SASSIII. Compass FrameworkIV. Takeaways (I hope)
<blink>CSS is not very well     designed    </blink>
CSS Extensions• Sass: Syntactically Awesome Style Sheets• SCSS: Sassy CSS (subset of CSS3)• LESS CSS• Add dynamic behavior...
There’s reason to try out both Sass and Less. Forsome people, the syntax and new ideas in Less aremost important. For othe...
http://www.flickr.com/photos/kayveeinc/2540019625/                                        LESS                       Sass  ...
$Variables        •   Specify widely used values in once for reuse anywhere$primary: purple;    body.unicorn {            ...
MIXINS •   Re-use whole chunks of CSS properties or selectors •   Pass in arguments •   Functions for CSS.rounded-corners ...
MIXINS@mixin banner($img, $height: 110px) {    .header {       background: $img;                                          ...
framework |ˈfrāmˌwərk| noun an essential supporting structure of a building, vehicle, or object a basic structure underlyi...
http://www.flickr.com/photos/teamjenkins/4338666833/in/photostream/                                                        ...
Gleefor CLI
•   Yes, there is a module for that: drupal.org/project/compass•   Compass App: compass.handlino.com $7    •   Free if you...
gem update --systemgem install compasscompass versioncompass create path/to/projectcd path/to/projectcompass watch
# Set this to the root of your projectwhen deployed:http_path = "/"css_dir = "css"sass_dir = "sass"images_dir = "images"ja...
• Library of reusable patterns• Mixins• Import files: core or just what you need• Extremely well documented: http://  compa...
CSS3 Mixins• define at top of style sheet:  •   import “compass/css3”• only include css3 properties you need  •   import “c...
Grids• Pluggable • Blueprint:      compass install blueprint --semantic • 960:   gem install compass-960-plugin   •   http...
Grids$blueprint-grid-columns: 24;$blueprint-container-size: 960px;$blueprint-grid-margin: 10px;body {  #container {    @in...
http://www.flickr.com/photos/losttulsa/3086353114/in/photostream/
Helps develop better practicesMakes work better faster stronger        Manageable CSS        Reduces file size Maintenance ...
http://www.flickr.com/photos/jannem/3312946500/
Resources•   Sass & Compass    •      http://blog.derekperez.com/    •      http://sass-lang.com/    •      http://nex-3.c...
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Upcoming SlideShare
Loading in …5
×

Bringing sexy back to CSS: SASS/SCSS, LESS and Compass

5,809 views

Published on

Slide from a presentation given at 2011 Design for Drupal in Boston about two popular CSS extensions and Compass with a focus on how they integrate in Drupal environment. The goal is to present and overview of Sass and LESS in order to drive front-end developers to abandon plain old CSS. Compass is talked about as the reason to use Sass over LESS.

Published in: Technology
  • Be the first to comment

Bringing sexy back to CSS: SASS/SCSS, LESS and Compass

  1. 1. Bringing Sexy BackSass, LESS, Compass Design for Drupal Boston 2011 Presented by Claudina Sarahe
  2. 2. @itsmisscs
  3. 3. Straw Pollhttp://www.flickr.com/photos/horiavarlan/4273103337/in/photostream/
  4. 4. 1. Limitations of CSSII. More on LESS & SASSIII. Compass FrameworkIV. Takeaways (I hope)
  5. 5. <blink>CSS is not very well designed </blink>
  6. 6. CSS Extensions• Sass: Syntactically Awesome Style Sheets• SCSS: Sassy CSS (subset of CSS3)• LESS CSS• Add dynamic behavior • Variables • Mixins • Operations
  7. 7. There’s reason to try out both Sass and Less. Forsome people, the syntax and new ideas in Less aremost important. For others, the power and maturityof Sass are better. Hopefully as time goes on, bothprojects will continue to learn from each other andgrow to serve the needs of CSS designers as well aspossible. Nathan Weizenbaum http://nex-3.com/posts/83-sass-and-less
  8. 8. http://www.flickr.com/photos/kayveeinc/2540019625/ LESS Sass • Appeared in 2009 • More mature; appeared in 2007 • Doesn’t have as much operation based logic • Run as standalone Ruby gem or through Compass • Implemented in various languages: Ruby, .NET, • Supports CSS style and Python, PHP, JS indent based • CSS like style of writing • drupal.org/project/less module in PHP
  9. 9. $Variables • Specify widely used values in once for reuse anywhere$primary: purple; body.unicorn { body.unicorn$secondary: pink; background-color: $primary; background-color: $primary$success: green; #messases { #messases$alert: red; p.friendly { p.friendly color: $succes; color: $succes } } #messages } p.friendly color: $secondary #messages { p.friendly { p.alert color: $secondary; color: $alert } p.alert { color: $alert; } }
  10. 10. MIXINS • Re-use whole chunks of CSS properties or selectors • Pass in arguments • Functions for CSS.rounded-corners (@radius: 5px) { #css3 { border-radius: @radius; -webkit-border-radius: @radius; .rounded-corners (@radius: 5px) { border-radius: @radius; LESS -moz-border-radius: @radius; -webkit-border-radius: @radius;} -moz-border-radius: @radius; }#header { } .rounded-corners;} #header {#footer { #css3 > .rounded-corners; .rounded-corners(10px); }} #footer { #css3 > .rounded-corners(10px); }
  11. 11. MIXINS@mixin banner($img, $height: 110px) { .header { background: $img; SCSS height:$height; }}body.front { @include banner(url(../i/bg-header.png) repeat-x 0 0);}body.page-project{ @include banner(url(../i/bg-header-project.png) no-repeat 0 0, 80px)}
  12. 12. framework |ˈfrāmˌwərk| noun an essential supporting structure of a building, vehicle, or object a basic structure underlying a system, concept, or texthttp://www.flickr.com/photos/15708236@N07/2757970155/
  13. 13. http://www.flickr.com/photos/teamjenkins/4338666833/in/photostream/ ruby -v
  14. 14. Gleefor CLI
  15. 15. • Yes, there is a module for that: drupal.org/project/compass• Compass App: compass.handlino.com $7 • Free if you compile from Git • 30% of proceeds go to United Mitochondrial Disease Foundation
  16. 16. gem update --systemgem install compasscompass versioncompass create path/to/projectcd path/to/projectcompass watch
  17. 17. # Set this to the root of your projectwhen deployed:http_path = "/"css_dir = "css"sass_dir = "sass"images_dir = "images"javascripts_dir = "js"stylesheets[all][] = css/voxful.cssstylesheets[all][] = css/screen.css
  18. 18. • Library of reusable patterns• Mixins• Import files: core or just what you need• Extremely well documented: http:// compass-style.org/reference/compass/
  19. 19. CSS3 Mixins• define at top of style sheet: • import “compass/css3”• only include css3 properties you need • import “compass/css3/border-radius”• for the browsers you want • $experimental-support-for-opera: false $experimental-support-for-khtml: false
  20. 20. Grids• Pluggable • Blueprint: compass install blueprint --semantic • 960: gem install compass-960-plugin • http://theled.co.uk/blog/archive/2010/06/18/ semantic-960-gs-using-sass-and-compass/ • https://github.com/chriseppstein/compass-960- plugin • Susy: gem install compass-susy-plugin • http://susy.oddbird.net/tutorial/ • Add requirement to your config.rb # Require any additional compass plugins here. require ninesixty
  21. 21. Grids$blueprint-grid-columns: 24;$blueprint-container-size: 960px;$blueprint-grid-margin: 10px;body { #container { @include container; } #header, #footer { @include column($blueprint-grid-columns); } #sidebar { // One third of the grid columns, rounding down. With 24 cols, this is 8. $sidebar-columns: floor($blueprint-grid-columns / 3); @include column($sidebar-columns); } #logo { @include column(12); }}
  22. 22. http://www.flickr.com/photos/losttulsa/3086353114/in/photostream/
  23. 23. Helps develop better practicesMakes work better faster stronger Manageable CSS Reduces file size Maintenance and configuration Develop Patterns Shareable
  24. 24. http://www.flickr.com/photos/jannem/3312946500/
  25. 25. Resources• Sass & Compass • http://blog.derekperez.com/ • http://sass-lang.com/ • http://nex-3.com/ • Kicking Ass + Taking Names with Sass and Compass: http://vimeo.com/24278115• LESS • http://lesscss.org/ • LESSPHP: http://leafo.net/lessphp/docs/ • Grid for LESS: http://designshack.co.uk/articles/css/introducing-the-less-css-grid • LESS + 960 + Zen: http://drupal.org/sandbox/szantog/1101840 • If you start out using LESS and want to change: http://nex-3.com/posts/100-convert-less-to-scss

×