Announcing TWBS LESS: Simple LESS Support for Drupal 7

During TWBS development I figure out that introducing LESS support in Drupal 7 would be a great idea when combine with Bootstrap and Font Awesome. After some research and development during Christmas holiday, I would like to introduce my helper module named "TWBS LESS". The goal of TWBS LESS is to provide a handy support for LESS and act as the helper module for on going Drupal-Bootstrap-Remix development.

Add your files just like any other CSS file, just with .less as the extension, and they will be automatically processed. No additional configuration is required.

Key Features

  • Provide drush make file for library download
  • Confirm library successfully initialized with hook_requirements()
  • Support both LTR *.less and RTL *-rtl.less, as like as that of locale_css_alter() supported
  • If Drupal's CSS aggregation enabled, all .less will automatically pre-compile as .css at server-side by lessphp before Drupal CSS aggregation
  • If Drupal's CSS aggregation disabled, all .less will link with rel set to "stylesheel/less" individually, so less.js will handle in client-side live- compile
  • Support FireLESS for .less debug with Firebug in client-side compile mode

Getting Started

Download and install with drush manually:

drush -y dl --dev twbs_less
drush -y make --no-core sites/all/modules/twbs_less/twbs_less.make

Package into your own drush .make file (e.g. build-drustack.make):

api = 2
core = 7.x
projects[twbs_less][download][branch] = 7.x-3.x
projects[twbs_less][download][type] = git
projects[twbs_less][download][url] = http://git.drupal.org/project/twbs_less.git
projects[twbs_less][subdir] = contrib

Live Demo

TWBS LESS is now integrated into DruStack distribution, so you can try it in a live sandbox with simplytest.me.

Why Another LESS Module?

For general and generic LESS support you should always consider another LESS CSS Preprocessor module which started since 2010-03-04.

On the other hand you should consider about using this module because of:

  • Purely design for assist TWBS, which means you will have the best compatibility when using both together
  • Support both server-side pre-compile / client-side live-compile with debug mode enable; LESS CSS Preprocessor support server-side pre-compile
  • RTL support with *-rtl.less just as simple as CSS *-rtl.css that Drupal core supported; LESS CSS Preprocessor RTL support will work as long as your files are named "somename.css.less"
  • Server-side pre-compile CSS will name based on its original .less md5_file() result, which means even you add a single space the cache file will also be regenerate; LESS CSS Preprocessor calculate based on filemtime()
  • Much simple implementation which handle all LESS support automatically as like as that of Drupal core CSS support; LESS CSS Preprocessor provide more customization options

Known Issues

IMHO, below limitation as not directly due to our current implementation:

  • Can't package into Drupal distribution hosted under drupal.org GIT repository directly (but able to include into your own build-*.make or simplytest.make), because:
  • LESS variables and mixins that defined by other else module/theme can't be reuse directly (e.g. You can't reuse . fa mixin that provided by TWBS Font Awesome into your own module/theme), because:
    • If using server-side pre-compile, all LESS/CSS should be sorted in correct order, all url() and @import should replace as correct absolute URL, and aggregated into a single-fat-file before compile into CSS at once
    • If using client-side live-compile, external .less should be referenced by @import with absolute URL correctly

Author

Please feel free to test it out and comment with your idea. Let's enjoy simplified theme development with LESS ;-)

Tags: DrupalDevelopmentLESS

Original Article: