Drupal+LESS | PHDUG Drupal Developers Day 2012

The Drupal & Less Combo

By: Albert S. Causing [email protected]

Date: October 27, 2012

2 of 16

Table of Contents

1. What is CSS2. What is LESS CSS3. Less CSS:

VariablesMixinsNested RulesFunctions & Operations

4. Code samples

5. Drupal & LessDrupal Less Module Installation

6. Q&A and Live Example

3 of 16

The Drupal & Less Combowww.drupalph.org

What is CSSCascading 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

PHDUG: Drupal Developers Day 2012

http://en.wikipedia.org/wiki/Style_sheet_language

http://en.wikipedia.org/wiki/Presentation_semantics

http://en.wikipedia.org/wiki/Markup_language

http://en.wikipedia.org/wiki/Web_page

http://en.wikipedia.org/wiki/HTML

http://en.wikipedia.org/wiki/XHTML

4 of 16


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.


http://cloudhead.io/

http://cloudhead.io/

http://en.wikipedia.org/wiki/Sass_(stylesheet_language)

http://en.wikipedia.org/wiki/Metalanguage#Nested_metalanguage

http://en.wikipedia.org/wiki/Metalanguage#Nested_metalanguage

http://en.wikipedia.org/wiki/Variable_(programming)

http://en.wikipedia.org/wiki/Nesting_(computing)#In_programming

http://en.wikipedia.org/wiki/Mixin

http://en.wikipedia.org/wiki/Operator_(programming)

http://en.wikipedia.org/wiki/Function_(computer_science)

http://en.wikipedia.org/wiki/Function_(computer_science)

5 of 16



6 of 16



//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”;

Configurable Theme

7 of 16



8 of 16



9 of 16



10 of 16



11 of 16



12 of 16



13 of 16



14 of 16



15 of 16



16 of 16



17 of 16



18 of 16



19 of 16



20 of 16



21 of 16



22 of 16



23 of 16



24 of 16



25 of 16


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.


26 of 16


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.


http://drupal.org/project/libraries





http://leafo.net/lessphp/






http://drupal.org/project/less



27 of 16


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().


28 of 16


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.css"


29 of 16


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


http://drupal.org/project/boost

http://drupal.org/project/advagg

http://drupal.org/project/advagg

http://drupal.org/project/omega

30 of 16


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/


31 of 16


Q & ALive Drupal + Less Dry

Run


THANK YOU!

Albert S. [email protected]

Documents

Drupal+LESS | PHDUG Drupal Developers Day 2012