elegant css design in drupal: less vs sass
DESCRIPTION
TRANSCRIPT
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