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.

1. Bringing Sexy Back
Sass, LESS, Compass
Design for Drupal Boston 2011
Presented by Claudina Sarahe

2. @itsmisscs

3. Straw Poll
http://www.flickr.com/photos/horiavarlan/4273103337/in/photostream/

4. 1. Limitations of CSS
II. More on LESS & SASS
III. Compass Framework
IV. Takeaways (I hope)

6. <blink>
CSS is not very well
designed
</blink>

7. CSS Extensions
• Sass: Syntactically Awesome Style Sheets
• SCSS: Sassy CSS (subset of CSS3)
• LESS CSS
• Add dynamic behavior
• Variables
• Mixins
• Operations

8. There’s reason to try out both Sass and Less. For
some people, the syntax and new ideas in Less are
most important. For others, the power and maturity
of Sass are better. Hopefully as time goes on, both
projects will continue to learn from each other and
grow to serve the needs of CSS designers as well as
possible.
Nathan Weizenbaum
http://nex-3.com/posts/83-sass-and-less

9. 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

10. $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;
}
}

11. 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);
}

12. 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)
}

14. framework |ˈfrāmˌwərk|
noun
an essential supporting structure of a building, vehicle, or object
a basic structure underlying a system, concept, or text
http://www.flickr.com/photos/15708236@N07/2757970155/

15. http://www.flickr.com/photos/teamjenkins/4338666833/in/photostream/
ruby -v

16. Glee
for CLI

17. • 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

18. gem update --system
gem install compass
compass version
compass create path/to/project
cd path/to/project
compass watch

19. # Set this to the root of your project
when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
stylesheets[all][] = css/voxful.css
stylesheets[all][] = css/screen.css

20. • Library of reusable patterns
• Mixins
• Import files: core or just what you need
• Extremely well documented: http://
compass-style.org/reference/compass/

21. 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

22. 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'

23. 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);
}
}

24. http://www.flickr.com/photos/losttulsa/3086353114/in/photostream/

26. Helps develop better practices
Makes work better faster stronger
Manageable CSS
Reduces file size
Maintenance and configuration
Develop Patterns
Shareable

27. http://www.flickr.com/photos/jannem/3312946500/

28. 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