1. Elegant CSS In Drupal
LESS vs SASS

2. By Dante Taylor
Mediacurrent Creative Director
@ThemeMaster

3. Key Assumptions
 Have basic understanding of CSS principles
 Have basic understanding of procedural languages
 Looking to speed up writing custom CSS

4. What is LESS & Sass?
 Statements below were taken from Sass website “About
Page”, but holds true for for both LESS and Sass
 Sass is a meta-language on top of CSS that’s used to
describe the style of a document cleanly and structurally, with
more power than flat CSS allows.
 Sass both provides a simpler, more elegant syntax for CSS
and implements various features that are useful for creating
manageable stylesheets.
@http://sass-lang.com/about.html

6. What problems does LESS
& Sass solve?
 Create reusable code to use on any project
 Use variables and functions like PHP (Mixins + Parametric
Mixins)
 Accepts math operations and computations inline
 Change scope like PHP and other popular procedural
languages
 Evaluate JavaScript inline
 Create nested syntax and CSS declaration blocks
Source: http://drupal.org

7. You May Be Thinking
 Who would create something with so much awesomeness
baked right in?
 Who uses LESS and Sass?
 How much of extra work is this to use with Drupal?
 Is it worth my time to learn?
 What is the easiest way to get started?

8. Meet The Creators
Alexis Sellier (CloudHead) Hampton Catlin Nathan Weizenbaum
LESS Creator SASS Original Creator SASS 2.0+ Creator
http://bit.ly/LJFTh6 http://www.hamptoncatlin.com https://twitter.com/nex3

9. What are key differences?
 Main difference between the two is how they are
processed
 LESS - Is a JavaScript library and typically processed
client-side
 Sass - Typically runs on Ruby and is processed server
side.(PHPSass Script with Prepro Module allows Drupal
to process it via php without Ruby)
Source: http://drupal.org

10. What are key differences?
 LESS can evaluate JavaScript inline
 LESS is easier to use. SASS appears to have more
options to create complex MIXINS (functions). This is a
highly debated point. @http://wrangl.com/sass-v-less
 (CAUTION: Statement above has been known to cause
comment wars.YOU HAVE BEEN WARNED.Use with
EXTREME CAUTION!)

11. Who uses LESS & Sass?
 LESS Github 6,073+ Watch and 848+ Fork
@https://github.com/cloudhead/less.js
 SASS Github 1,218+ Watch and 155+ Fork
@https://github.com/nex3/sass
 SASS appears to have more active contributors
 GitHub: 5 to 1 seem to watch and fork LESS over SASS
@http://bit.ly/Nk4xaf (LESS vs SASS Google trend since
2009)
Source: http://drupal.org

12. Who uses LESS & Sass
 Drupal: 5 to 1 seem to install LESS over SASS in Drupal
Community (sample taken over 4 week period, Jun 10 -
Jul 1, from member who run the update status module)
@http://drupal.org/project/usage
 SASS Built themes
(Zen, AdaptiveTheme, Basic, Boilerplate, Sasson, Aurora
)
Source: http://drupal.org

13. Drupal with LESS & Sass
 LESS Module @http://drupal.org/project/less
 SASS@http://drupal.org/project/sassy
+ PrePro Module @http://www.drupal.org/project/prepro
+ PHPSass@http://github.com/richthegeek/phpsass/downloads
+ Libraries API Module @http://www.drupal.org/project/libraries

17. Key Concepts
 Variables  String Interpolation
 Mixins  Escaping
 Parametric Mixins  JavaScript Evaluation (LESS
 Selector Inheritance Only)
 Nested Rules  Output Formatting
 Color Functions
 Conditions And Controls
 Namespaces
 Scope
 Importing
Smashing Magazine @http://bit.ly/n01ySn

18. Variables
Sass Less
$red: #ff0000; @red: #ff0000;
Source: http://drupal.org

19. Mixins
Sass Less
@mixin perspective ($value: 1000) { .perspective (@value: 1000) {
-webkit-perspective: $value; -webkit-perspective: @value;
-moz-perspective: $value; -moz-perspective: @value;
-ms-perspective: $value; -ms-perspective: @value;
perspective: $value; perspective: @value;
} }
.transform { .transform {
@include perspective (2000); .perspective (2000);
} }
Source: http://drupal.org

20. Selector Inheritance
Sass Less
.border {
}
border: 1px solid #fff;
N/A
.box {
@extend .border;
}
Prints
.border, .box {
border: 1px solid #fff;
}
Source: http://drupal.org

21. Nested Rules
Sass Less
.box { .box {
@extend .border; &.selector {
background: #000;
&.selector { }
background: #000; }
}
}
Prints Prints
.border.selector, .box.selector { .box.selector {
border: 1px solid #000; border: 1px solid #000;
} }

22. Color Functions
Sass Less
adjust-hue(#cc3, 20deg) => #9c3 saturate(#cc3, 10%) => #d9d926
saturate(#cc3, 10%) => #d9d926 desaturate(#cc3, 10%) => #bfbf40
desaturate(#cc3, 10%) => #bfbf40 lighten(#cc3, 10%) => #d6d65c
lighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a329
darken(#cc3, 10%) => #a3a329
@http://bit.ly/fzdbZK
@see http://bit.ly/nyBv1M

23. Conditionals
Sass Less
/* Sample Sass "if" statement */
@if lightness($color) > 30% {
}
background-color: #000; N/A
@else {
background-color: #fff;
} /* Sample Sass "for" loop */
@for $i from 1px to 10px {
.border-#{i} {
border: $i solid blue; }
}
http://bit.ly/n01ySn

24. Final Thoughts
 Both LESS and Sass allow you to save time and give
you the ability to reuse code
 Drupal 8 will most likely use Sass as its CSS
Processor/Meta Language
 CSS has evolved and LESS and Sass are examples of
the new standards

25. Resources
 http://bit.ly/n01ySn (LESS vs Sass compared)
 http://lesscss.org (About Less)
 http://drupal.org/project/sassy (SASS Drupal Project)
 http://bit.ly/mRjV5t (Sass presentation DrupalCon Dever 2012)
 http://bit.ly/OQttYb (Sassy 101 PDF)
 http://compass-style.org (CSS Framework)
 http://foundation.zurb.com (CSS Framework)
 http://twitter.github.com/bootstrap (CSS Framework)
 http://compass.handlino.com (Compass App)
 http://www.manning.com/netherland (Sass and Compass in Action)
 http://drupal.org/project/twitter_bootstrap (Twitter Bootstrap Drupal Project)

26. Thanks!
Remember not to panic
& clear your cache!

27. Mediacurrent helps organizations architect custom websites by
leveraging our proven processes and deep expertise in Drupal.
@mediacurrentmediacurrent.com