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 ...
What is LESS & Sass? Statements below were taken from Sass website “About  Page”, but holds true for for both LESS and Sa...
What problems does LESS& Sass solve? Create reusable code to use on any project Use variables and functions like PHP (Mi...
You May Be Thinking Who would create something with so much awesomeness  baked right in? Who uses LESS and Sass? How mu...
Meet The CreatorsAlexis Sellier (CloudHead)   Hampton Catlin                 Nathan WeizenbaumLESS Creator                ...
What are key differences? Main difference between the two is how they are  processed LESS - Is a JavaScript library and ...
What are key differences? LESS can evaluate JavaScript inline LESS is easier to use. SASS appears to have more  options ...
Who uses LESS & Sass? LESS Github 6,073+ Watch and 848+ Fork  @https://github.com/cloudhead/less.js SASS Github 1,218+ W...
Who uses LESS & Sass Drupal: 5 to 1 seem to install LESS over SASS in Drupal  Community (sample taken over 4 week period,...
Drupal with LESS & Sass LESS Module @http://drupal.org/project/less SASS@http://drupal.org/project/sassy  + PrePro Modul...
Key Concepts   Variables                    String Interpolation   Mixins                       Escaping   Parametric...
Variables       Sass              Less  $red: #ff0000;   @red: #ff0000;                                Source: http://drup...
Mixins                 Sass                                      Less@mixin perspective ($value: 1000) {   .perspective (@...
Selector Inheritance              Sass          Less.border {}  border: 1px solid #fff;                            N/A.box...
Nested Rules              Sass                               Less.box {                              .box {  @extend .bord...
Color Functions                    Sass                              Lessadjust-hue(#cc3, 20deg) => #9c3    saturate(#cc3,...
Conditionals             Sass                  Less/* Sample Sass "if" statement */@if lightness($color) > 30% {}  backgro...
Final Thoughts Both LESS and Sass allow you to save time and give  you the ability to reuse code Drupal 8 will most like...
Resources   http://bit.ly/n01ySn (LESS vs Sass compared)   http://lesscss.org (About Less)   http://drupal.org/project/...
Thanks!Remember not to panic  & clear your cache!
Mediacurrent helps organizations architect custom websites byleveraging our proven processes and deep expertise in Drupal....
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
Upcoming SlideShare
Loading in...5
×

Elegant CSS Design In Drupal: LESS vs Sass

9,329

Published on

Published in: Technology
4 Comments
4 Likes
Statistics
Notes
  • I really like LESS. Plus, SyncStar supports LESS:

    http://the-sync-star.com/documentation/less-file-support/

    It is so cool because when you save the LESS file, it will be automatically compiled, uploaded to server, and then browser is refreshed!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The same applies for conditionals, and for loops (although for loops are less elegant in less than in sass).
    Conditionals are called guards in less.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • it's a mixin with no parameters.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I'm sorry but selector inheritance exists in less.
    Eg :

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

    .box {
    .border;
    }

    Prints

    .border, .box {
    .border: 1px solid #fff;
    }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
9,329
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
44
Comments
4
Likes
4
Embeds 0
No embeds

No notes for slide
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Outline:• Maintainer of Display Suite• Display Purpose • Potential Use Cases• What are display modes?• How do you create new display modes?• What are Dynamic Fields• What are Block Fields?• Display Suite Override Templates• DS Custom Layouts• Display Suite Extras Full Reset Minimal Expert• Display • Panels vs. Display Suite
  • Elegant CSS Design In Drupal: LESS vs Sass

    1. 1. Elegant CSS In Drupal LESS vs SASS
    2. 2. By Dante TaylorMediacurrent Creative Director @ThemeMaster
    3. 3. Key Assumptions Have basic understanding of CSS principles Have basic understanding of procedural languages Looking to speed up writing custom CSS
    4. 4. 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
    5. 5. 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
    6. 6. 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?
    7. 7. Meet The CreatorsAlexis Sellier (CloudHead) Hampton Catlin Nathan WeizenbaumLESS Creator SASS Original Creator SASS 2.0+ Creatorhttp://bit.ly/LJFTh6 http://www.hamptoncatlin.com https://twitter.com/nex3
    8. 8. 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
    9. 9. 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!)
    10. 10. 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
    11. 11. 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
    12. 12. 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
    13. 13. 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
    14. 14. Variables Sass Less $red: #ff0000; @red: #ff0000; Source: http://drupal.org
    15. 15. 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
    16. 16. 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
    17. 17. 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;} }
    18. 18. Color Functions Sass Lessadjust-hue(#cc3, 20deg) => #9c3 saturate(#cc3, 10%) => #d9d926saturate(#cc3, 10%) => #d9d926 desaturate(#cc3, 10%) => #bfbf40desaturate(#cc3, 10%) => #bfbf40 lighten(#cc3, 10%) => #d6d65clighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a329darken(#cc3, 10%) => #a3a329 @http://bit.ly/fzdbZK@see http://bit.ly/nyBv1M
    19. 19. 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
    20. 20. 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
    21. 21. 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)
    22. 22. Thanks!Remember not to panic & clear your cache!
    23. 23. Mediacurrent helps organizations architect custom websites byleveraging our proven processes and deep expertise in Drupal. @mediacurrentmediacurrent.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×