elegant css design in drupal: less vs sass

Elegant CSS In Drupal LESS vs SASS

By Dante TaylorMediacurrent 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

Hampton CatlinSASS Original Creator

http://www.hamptoncatlin.com

Alexis Sellier (CloudHead)LESS Creator

http://bit.ly/LJFTh6

Nathan WeizenbaumSASS 2.0+ Creator

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)

Source: http://drupal.org

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)

Source: http://drupal.org

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

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 Mixins Parametric Mixins Selector Inheritance Nested Rules Color Functions Conditions And Controls Namespaces Scope Importing

Smashing Magazine @http://bit.ly/n01ySn

String Interpolation Escaping JavaScript Evaluation (LESS

Only) Output Formatting

Variables

Source: http://drupal.org

$red: #ff0000; @red: #ff0000; Sass Less

Mixins

Source: http://drupal.org

@mixin perspective ($value: 1000) { -webkit-perspective: $value; -moz-perspective: $value; -ms-perspective: $value; perspective: $value; }

Sass Less

.perspective (@value: 1000) { -webkit-perspective: @value; -moz-perspective: @value; -ms-perspective: @value; perspective: @value; }

.transform { @include perspective (2000); }

.transform { .perspective (2000); }

Selector Inheritance

Source: http://drupal.org

.border { border: 1px solid #fff;}

.box { @extend .border;}

Sass Less

N/A

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

Prints

Nested Rules

.box { @extend .border;

&.selector { background: #000; }}

Sass Less

.border.selector, .box.selector { border: 1px solid #000;}

Prints

.box { &.selector { background: #000; }}

.box.selector { border: 1px solid #000;}

Prints

Color Functions

adjust-hue(#cc3, 20deg) => #9c3 saturate(#cc3, 10%) => #d9d926 desaturate(#cc3, 10%) => #bfbf40 lighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a329

@see http://bit.ly/nyBv1M

Sass Less

saturate(#cc3, 10%) => #d9d926 desaturate(#cc3, 10%) => #bfbf40 lighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a329

@http://bit.ly/fzdbZK

Conditionals

http://bit.ly/n01ySn

/* Sample Sass "if" statement */ @if lightness($color) > 30% { background-color: #000; } @else { background-color: #fff; } /* Sample Sass "for" loop */

@for $i from 1px to 10px { .border-#{i} { border: $i solid blue; } }

Sass Less

N/A

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.

@mediacurrent mediacurrent.com