Elegant CSS in Drupal: LESS vs SASS

Elegant CSS In Drupal
LESS vs SASS

By Dante Taylor
Mediacurrent Creative Director
@ThemeMaster

Key Assumptions
 Have basic understanding of CSS principles

 Have basic understanding of procedural languages

 Looking to speed up writing custom CSS

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

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

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?

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

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)


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!)

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)

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
)


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

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

Variables

Sass Less

$red: #ff0000; @red: #ff0000;


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


Selector Inheritance
Sass Less

.border {

}
border: 1px solid #fff;
N/A
.box {
@extend .border;
}

Prints
.border, .box {
border: 1px solid #fff;
}

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;
} }

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

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

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

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)

Thanks!
Remember not to panic
& clear your cache!

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

@mediacurrentmediacurrent.com

Elegant CSS in Drupal: LESS vs SASS

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Similar to Elegant CSS in Drupal: LESS vs SASS

Similar to Elegant CSS in Drupal: LESS vs SASS (20)

More from Mediacurrent

More from Mediacurrent (20)

Recently uploaded

Recently uploaded (20)

Elegant CSS in Drupal: LESS vs SASS

Editor's Notes