Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal & CSS Preprocessors


Published on

Published in: Technology
  • Be the first to comment

Drupal & CSS Preprocessors

  2. 2. VSCSS preprocessors like Sass and LESS are languages made up ofnormal CSS plus some extra features, such as variables, nestedrules, math, mixins, etc.Helper applications can convert stylesheets written in Sass orLESS to standard CSS that can be included normally with yourtheme. LESS Sass & Compass
  3. 3. Why use apreprocessor?
  4. 4. Because CSS SUCKS (sometimes) Redundancy #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} Redundancy a { color: #cff; } .box { border-color: #cff; } Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc; -moz-box-shadow: 1px 1px 10px 3px #ccc; box-shadow: 1px 1px 10px 3px #ccc; } From John Albins WIlkins’ “SASS: CSS with Attitude,” Drupal Design Camp Berlin 2011.
  5. 5. (From Matt Farina and Nathan Smiths "Using Sass & Compass in Drupal Theming"
  6. 6. Preprocessors make CSS more awesomer.Unlike in standard CSS, with a preprocessor you can:1. Build complicated mixins2. Create variables and perform operations on variables like in PHP (Mixins and Parametric Mixins)3. Nest rules and syntax4. Accept math operations and computations inline5. Change scope6. Evaluate JS inline7. Organize your CSS rules in hierarchies; group things logically8. Create reusable code to use on any project
  7. 7. Examples ofLESS and SASS
  8. 8. VARIABLESSASS LESS$color: red; @color: red;div { div { color: $color; color: @color;} }Chris Epstein: Sass/Less Comparison,
  9. 9. NESTED SELECTORSSASS LESSp { p { a { a { color: red; color: red; &:hover { &:hover { color: blue; color: blue; } } } }} }Chris Epstein: Sass/Less Comparison,
  10. 10. MIXINSSASS LESS@mixin bordered { .bordered { border-top: dotted 1px black; border-top: dotted 1px black; border-bottom: solid 2px black; border-bottom: solid 2px black;} }#menu a { #menu a { @include bordered; .bordered;} }Chris Epstein: Sass/Less Comparison,
  11. 11. MIXINS WITH ARGUMENTSSASS LESS@mixin bordered($width: 2px) { .bordered(@width: 2px) { border: $width solid black; border: @width solid black;} }#menu a { #menu a { @include bordered(4px); .bordered(4px);} }Chris Epstein: Sass/Less Comparison,
  12. 12. SELECTOR INHERITANCESASS LESS.bordered { N/A border: 1px solid back;}#menu a { @extend .bordered;}Chris Epstein: Sass/Less Comparison,
  13. 13. CONDITIONALS & CONTROLSSASS LESS@if lightness($color) > 30% { .mixin (@color) when (lightness(@color) > 30%) { background-color: black; background-color: black;} }@else { .mixin (@color) when (lightness(@color) =< 30%) { background-color: white; background-color: white;} }@for $i from 1px to 10px { .border-#{i} { border: $i solid blue; }} Chris Epstein: Sass/Less Comparison,
  14. 14. NAMESPACESSASS LESSN/A #bundle () { .red { background-color: red } .green { background-color: green } } .foo { #bundle > .red; } COMPILES AS: .foo { background-color: red; } Chris Epstein: Sass/Less Comparison,
  15. 15. What does all this mean?
  16. 16. What does all this mean? Libraries!
  17. 17. What does all this mean? Libraries!
  18. 18. What does all this mean? Libraries!
  19. 19. What does all this mean? Libraries!
  20. 20. What does all this mean? Libraries!
  21. 21. STYLE LIBRARIESBoth LESS/SASS can be used to create personal libraries ofmixins and variables, which you can import into projectswith a single line: @import “import-mixins.less”;
  22. 22. PRE-BUILT LIBRARIESMany pre-built collections are available for both LESS and Sass.The best known are Bootstrap for LESS and Compass for Sass.
  23. 23. BOOTSTRAPBootstrap for LESS includes mixins and variables for:Global styles ButtonsGrid systems NavigationLayouts Navbars@media queries BreadcrumbsTypography PaginationTables Labels and badgesForms ThumbnailsImages AlertsIcons Progress barsDropdownsIt also includes 13 Javascript scripts for everything from dropdowns and buttons to popups andcarousels.
  24. 24. COMPASSCompass is a helper library for Sass. It includes libraries of shared mixins, a package manager to addadditional extension libraries, and an executable that can easily convert Sass files into CSS.Reset Helper functions for: CSS3 Mixins:Grid Background Color Stops Appearance Font FaceSticky Footer Colors Background Clip HyphenationStretching Constants Background Origin ImagesTypography Cross Browser Background Size Inline BlockVertical Rhythm Display Helpers Border Radius OpacityColor Font Files Box Shared UtilitiesGeneral Image Dimensions Box Shadow Text ShadowPrint Inline Data Box Sizing TransformSprites Math CSS Regions TransitionTables Selectors CSS3 Pie User Interface Sprites Columns URLs FilterIn addition, many 3rd-party extensions exist for Compass, including a Sass version of Bootstrap:Sassy Buttons: fancy CSS3 button - Scale: calculate typographic scales - Kit: toolset for designing web sites in the browser - responsive grids for Compass - susy.oddbird.netSingularity Grid: responsive grid system - singularity.gsBreakpoint: really simple media queries - breakpoint-sass.comText shadow -
  25. 25. Libraries are nice for reusing code...and sharing with your team.
  26. 26. How do LESSand Sass work?
  27. 27. COMPILING CSSLESS and SASS are preprocessed languages that must becompiled before being served to the browser.There are three ways to compile LESS & Sass:• Server-side• In Drupal• Pre-compiled The exception is including less.js on the page and compiling client-side. Not recommended.
  28. 28. COMPILING SERVER-SIDELESS & Sass can be converted on-the-fly using PHP.LessPHP ( compiles LESS atruntime, using server-side PHP rather than client-sideJavascript. This method requires lessphp and the creationof a styles.php.SASS typically runs on Ruby and is processed server-side.PHPSass ( is a PHP compiler forSASS.For both, compiling on-the-fly can make developmentmore difficult, and there may be some performance andcaching issues.
  29. 29. COMPILING IN DRUPALLESS CSS Preprocessor - LESS module parses LESS on the server. Once LESS is compiled, its cached by the Drupal’s default CSScaching, so the performance hit is negligible. The modules will automatically process any LESS files that areadded using drupal_add_css or through your themes .info file. Works with Drupals CSS compression.Requires the Libraries API and lessphp ( Place LESS and Libraries in your modulesdirectory and lessphp in your libraries directory (sites/all/libraries/lessphp/ - Sassy module automatically compiles SASS/SCSS into CSS via PHP, rather than Ruby. Compiles all .scssand .sass files that are added using drupal_add_css or through your themes .info file. Includes support forCompass, Bootstrap, and Foundation. Works with Drupals CSS compression.Requires the Prepro module, Libraries API, and PHPSass ( Sassy, Prepro, and Libraries in your modules directory and PHPSass in your libraries directory.NOTE: Sass ( is another module for Drupal that compiles SASS/SCSS files. However, PHP needs codewrite access to theme.
  30. 30. COMPILING IN DRUPALThe bad news.Compiling broken LESS orSass can break your site.Not good.
  31. 31. PRE-COMPILINGMany people recommend compiling LESS and Sass locally.They suggest isolating LESS/Sass from Drupal by using acompiler to watch your .less/.sass/.scss files, then compiling topure CSS files that you can deploy to your staging andproduction servers.Compiling locally makes sense. It takes advantage of first-partyreleases of Sass and LESS directly. It avoids performance andcaching issues. And your site won’t break if you push brokenLESS or Sass.If CSS preprocessors are really only useful during thedevelopment phase, it makes sense to keep them there,
  32. 32. PRE-COMPILING: LESSTo compile LESS locally:1. Add less.js to your development theme.2. You can use a compiler like ( orCodeKit ( to compile your LESS into CSSbefore publishing on the web. But you could also compile LESS into CSSusing just your browser: view the source CSS in a browser and copy-n-pasteinto a CSS file.
  33. 33. PRE-COMPILING: SASS/SCSSYou can use or CodeKit to compile Sass locally, or you cancompile via the command-line:1. If on Windows or Linux, set up Ruby - Set up Compass & SASS: $gem install compass3. Add config.rb to your theme directory (see next slide)4. cd to your theme directory and run: $compass watch If you just want to flush cache and compile, run: $compass clean && compass compile(From Matt Farina and Nathan Smiths "Using Sass & Compass in Drupal Theming"
  34. 34. (From Matt Farina and Nathan Smiths "Using Sass & Compass in Drupal Theming"
  35. 35. DRUPAL CSS COMPRESSIONEven when you minimize compiled files, use Drupal’s CSS compression to benefit from:1. Cache-busting. File name is changed to... “css_VvtjvgJd9tI4sfrm9jVFoHRnrEBsJlQs.css”2. <link /> instead of <style>@import</style> (older IE versions are slower at the latter)3. Full paths: Drupal replaces url(../images/file.png) with url(/full/path/to/images/file.png) — Useful if you have assets on a CDN or subdomain.(From Matt Farina and Nathan Smiths "Using Sass & Compass in Drupal Theming"
  36. 36. Which is better-- LESS or Sass?
  37. 37. THEIR SIMILARITIESThere really isn’t much difference between Sass and LESS.1. They both have active communities.2. Both will run on PHP.3. LESS syntax was closer to CSS than Sass, but with the release of Sassy CSS (SCSS), this is no longer the case.4. It’s just as easy, less fragile, and probably more secure to use Sass and LESS straight-up, rather than with a module. So theres no need to evaluate the Drupal modules.5. Both should be used only for development and compiled locally, and both have decent compilers available.
  38. 38. THEIR DIFFERENCESThe main difference between LESS and Sass is in thelibraries and frameworks available for each. Sass LESS Compass Bootstrap Foundation BootstrapIn addition, more Drupal themes use Sass: Sass LESS Zen Basic AdaptiveTheme Basic Boilerplate Sasson Aurora
  39. 39. WHO’S USING WHAT?Results from 13,000 respondents to Chris Coyier’s “Popularity of CSS Preprocessors” poll. Why John Albin Wilkins choose SASS for Zen: "We picked Sass mostly because it is a much more mature project, especially when you add Compass into the mix. The answer to Does LESS have any supporting libraries that can compare to Compass? seems quite lacking."
  40. 40. CONCLUSION (GRAND FINALE)Use Sass for development only, compile locallyand share a team library.LESS might be a little easier to learn and install. However:★ In my research, I found more documentation and extensions for Sass.★ I heard more people say they’d switched from LESS to Sass (never vice versa).★ FireSass.★ Sass has Compass, as well as the Sass version of Bootstrap.