Drupal + LESS[CSS], Presentation by Albert Causing during Drupal Developers Day 2012 | October 27

1. The Drupal & Less Combo
By: Albert S. Causing
acausing@drupalph.org
Date: October 27, 2012

2. 1. What is CSS
2. What is LESS CSS
3. Less CSS:
Variables
Mixins
Nested Rules
Functions & Operations
4. Code samples
5. Drupal & Less
Drupal Less Module Installation
6. Q&A and Live Example
2 of 16

3. www.drupalph.org
What is CSS
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation semantics (the look and formatting) of a
document written in a markup language. Its most common application
is to style web pages written in HTML and XHTML.
CSS Usage
• Prior to CSS, nearly all of the presentational attributes of HTML
documents were contained within the HTML markup;
• HTML element attributes had to be explicitly descripted, often
repeatedly, within the HTML.
• CSS allows authors to move much of that information to another
file, the style sheet, resulting in considerably simpler HTML.
- Wikipedia
3 of 16

4. www.drupalph.org
What is LESS
• LESS was developed by Alexis Sellier,
• The dynamic stylesheet language.
• It is influenced by Sass and has influenced the newer "SCSS" syntax
of Sass, which adapted its CSS-like block formatting syntax.
• The indented syntax of LESS is a nested metalanguage, as valid
CSS is valid LESS code with the same semantics.
• LESS provides the following
mechanisms: variables, nesting, mixins, operators and functions.
4 of 16

5. www.drupalph.org
5 of 16

6. www.drupalph.org
//Site Theme Configuration
@main-background : transparent url(mainbg.png) no-repeat;
@main-font-color : #333333;
@anchor-color : #776600;
@banner-image : sites/default/files/banners/newbanner.jpg;
@footer-background : transparent url(footer.png) no-repeat;
//Fonts
@font-h1 : "Times New Roman",Georgia,Serif;
@font-h2 : “Arial”;
@font-block-title : “Helvetica”;
6 of 16

7. www.drupalph.org
7 of 16

8. www.drupalph.org
8 of 16

9. www.drupalph.org
9 of 16

10. www.drupalph.org
10 of 16

11. www.drupalph.org
11 of 16

12. www.drupalph.org
12 of 16

13. www.drupalph.org
13 of 16

14. www.drupalph.org
14 of 16

15. www.drupalph.org
15 of 16

16. www.drupalph.org
16 of 16

17. www.drupalph.org
17 of 16

18. www.drupalph.org
18 of 16

19. www.drupalph.org
19 of 16

20. www.drupalph.org
20 of 16

21. www.drupalph.org
21 of 16

22. www.drupalph.org
22 of 16

23. www.drupalph.org
23 of 16

24. www.drupalph.org
24 of 16

25. www.drupalph.org
DRUPAL + LESS
http://www.drupal.org/project/less
This module will automatically process any LESS files
that are added using drupal_add_css or added through
your theme's .info file.
Add your files just like any other css file, just with .less as
the extension, and they will be automatically processed.
25 of 16

26. www.drupalph.org
LESS Module Installation
• Download & Install Libraries API.
@ http://drupal.org/project/libraries
• Download lessphp @ http://leafo.net/lessphp/
and unpack it so that 'lessc.inc.php' is located at
'sites/all/libraries/lessphp/lessc.inc.php'.
• Download and install http://drupal.org/project/less.
26 of 16

27. www.drupalph.org
Changes should be made to theme
• Rename all [name].css file to [name].css.less
• Open and Edit [theme-name].info
-> Search and Replace “.css” to “.css.less” and save file.
• Open and Edit template.php
-> Search and Replace “.css” to “.css.less” and save file.
Make sure to check that .css files are loaded/imported using drupal_add_css()
api, otherwise don’t append .less unless you’ll change the loading/importing
using drupal_add_css().
27 of 16

28. www.drupalph.org
File placement during LESS compilation.
• If your source file was "sites/all/modules/test/test.css.less“
• Then your compiled file will be
"sites/[sites|default]/files/less/[random.string]/sites/all/modules/test/test.c
ss"
28 of 16

29. www.drupalph.org
Compatibility:
Fully compatible with "Optimize CSS files"
setting on "Admin->Site configuration->Performance"
(admin/settings/performance).
RTL (Right-To-Left Languages) support will work as long as your files are
named "somename.css.less".
Should work with most themes and caching mechanisms.
Confirmed to work with:
• Boost
• Advagg (Advanced CSS/JS Aggregation)
• Omega
29 of 16

30. www.drupalph.org
LINKS:
• Drupal = http://www.drupal.org/project/drupal
• Less Module = http://www.drupal.org/project/less
• Libraries Api Module = http://www.drupal.org/project/libraries
• LessPHP Library = http://leafo.net/lessphp/
• Less CSS Doc = http://lesscss.org/
30 of 16

31. www.drupalph.org
31 of 16

32. THANK YOU!
Albert S. Causing
acausing@drupalph.org