Elegant CSS Design In Drupal: LESS vs Sass
-
Upload
mediacurrent -
Category
Technology
-
view
110 -
download
0
description
Transcript of Elegant CSS Design In Drupal: LESS vs Sass
![Page 1: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/1.jpg)
Elegant CSS In Drupal LESS vs SASS
![Page 2: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/2.jpg)
By Dante TaylorMediacurrent Creative
Director@ThemeMaster
![Page 3: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/3.jpg)
Key Assumptions
Have basic understanding of CSS principles
Have basic understanding of procedural languages
Looking to speed up writing custom CSS
![Page 4: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/4.jpg)
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
![Page 5: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/5.jpg)
![Page 6: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/6.jpg)
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
![Page 7: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/7.jpg)
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?
![Page 8: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/8.jpg)
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
![Page 9: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/9.jpg)
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
![Page 10: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/10.jpg)
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!)
![Page 11: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/11.jpg)
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
![Page 12: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/12.jpg)
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
![Page 13: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/13.jpg)
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
![Page 14: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/14.jpg)
![Page 15: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/15.jpg)
![Page 16: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/16.jpg)
![Page 17: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/17.jpg)
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
![Page 18: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/18.jpg)
Variables
Source: http://drupal.org
$red: #ff0000; @red: #ff0000; Sass Less
![Page 19: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/19.jpg)
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); }
![Page 20: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/20.jpg)
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
![Page 21: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/21.jpg)
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
![Page 22: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/22.jpg)
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
![Page 23: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/23.jpg)
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
![Page 24: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/24.jpg)
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
![Page 25: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/25.jpg)
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)
![Page 26: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/26.jpg)
Thanks!Remember not to panic
& clear your cache!
![Page 27: Elegant CSS Design In Drupal: LESS vs Sass](https://reader036.fdocuments.net/reader036/viewer/2022070304/54c79f174a7959c0408b4576/html5/thumbnails/27.jpg)
Mediacurrent helps organizations architect custom websites by leveraging our proven processes and deep expertise in Drupal.
@mediacurrent mediacurrent.com