Use less on Drupal

LESS is a proprietary markup language that extends the abilities of standard css.
You can read more about less on the official website of the project , there are wonderful examples of its use.

Many libraries have already been written on less, which have gained immense popularity. For example, such as twitter bootstrap or semantic grid system.

To use this language and use it in your Drupal projects you need to teach the browser to understand files with the extension * .less. For this there is a small js file less.js, which is connected after the files with styles. (In fact, this js does not “teach” the browser to understand files with an unknown extension. It simply converts to a simple css file) There is a bad side to this. This reduces the time to draw the page. Therefore, there is another option - convert on the server side, and the browser will accept a regular css file.

Next, I will tell you how to convert less on the server, using CMF Drupal.
')
First you need to install the following modules:
drupal.org/project/libraries
drupal.org/project/less
Then download the library leafo.net/lessphp and put it in the folder with the libraries:
/ your site / sites / all / libraries or / your site / sites / domain name / libraries for specific sites.
As a result, the file 'lessc.inc.php' should be available at:
'/ your site / sites / all / libraries / lessphp / lessc.inc.php' or '/ your site / sites / domain name / libraries / lessphp / lessc.inc.php'.
After installing the php library, we include the modules downloaded earlier.

Now you can safely connect less files in the info file of your theme:
stylesheets [all] [] = less / common.less
As you can see in this case the media rule works for options:
all - apply everywhere
screen - use only when viewing a web page
print - apply only with the print version.

Let's now deal with the connection of libraries written in less. I will consider this example using the semantic grid system:

First, create the following folder structure:

 theme folder
 -less
 --libraries
 --- grid

In the grid folder, put the grid.less framework file
And in the folder less than 2 files:
custom.grid.less (page markup itself)

@columns: 12; @column-width: 60; @gutter-width: 20; article { .column(9); } section { .column(3); } 

common.grid.less (connection of the library and user files, we will connect it in the subject)

 @import 'libraries/grid/grid.less'; @import '../../custom.grid.less'; 

Please note that when connecting several files and using relative paths, each next file must be specified relative to the connected file before it.

After clearing the cache, our less file will pick up and convert to css. Each time the page is updated, the less page will not be processed.

To reset the less cache, go to the admin / config / development / less page and click on the “Flush LESS files” button. When developing, the “LESS developer mode” checkbox will be useful - if this is turned on, less will be converted each time the page is refreshed.