Elegant CSS Design 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) 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  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; Source: http://drupal.org

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

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

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 Design In Drupal: LESS vs Sass

More Related Content

What's hot

Similar to Elegant CSS Design In Drupal: LESS vs Sass

More from Mediacurrent

Recently uploaded

Elegant CSS Design In Drupal: LESS vs Sass

Editor's Notes