Using less on Drupal
LESS is its own style markup language that extends the capabilities of standard css.
You can read more about less on the official website of the project , there are wonderful examples of its use.
Less has already written many libraries that have gained immense popularity. For example, such as twitter bootstrap or semantic grid system.
To use this language and apply it in your Drupal projects, you need to teach the browser to understand files with the * .less extension. 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 page rendering time. Therefore, there is another option - convert on the server side, and the browser will accept a regular css file.
Next, I’ll show you how to convert less on the server when 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/lessphpand put it in the library folder:
/ 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, enable the previously downloaded modules.
Now you can safely connect the less files in the info file of your topic:
stylesheets [all] [] = less / common.less
As you can see in this case the media rule works for the options:
all - apply everywhere
screen - apply only when viewing the
print web page - apply only to the print version.
Let's now deal with connecting libraries written in less. I will consider this example using the semantic grid system:
First, create the following folder structure:
In the grid folder we put the grid.less framework file
And in the less 2 folder of the file:
custom.grid.less (The page layout itself)
common.grid.less (connecting the library and user files, we will connect it in the subject)
Please note that when connecting multiple files and using relative paths, each subsequent file must be indicated relative to the connected file in front of it.
After clearing the cache, our less file will be picked up and converted to css. Each time you refresh the page, less 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. During development, the “LESS developer mode” checkbox will be useful - when enabled, less will be converted every time the page is refreshed.
You can read more about less on the official website of the project , there are wonderful examples of its use.
Less has already written many libraries that have gained immense popularity. For example, such as twitter bootstrap or semantic grid system.
To use this language and apply it in your Drupal projects, you need to teach the browser to understand files with the * .less extension. 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 page rendering time. Therefore, there is another option - convert on the server side, and the browser will accept a regular css file.
Next, I’ll show you how to convert less on the server when 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/lessphpand put it in the library folder:
/ 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, enable the previously downloaded modules.
Now you can safely connect the less files in the info file of your topic:
stylesheets [all] [] = less / common.less
As you can see in this case the media rule works for the options:
all - apply everywhere
screen - apply only when viewing the
print web page - apply only to the print version.
Let's now deal with connecting 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 we put the grid.less framework file
And in the less 2 folder of the file:
custom.grid.less (The page layout itself)
@columns: 12;
@column-width: 60;
@gutter-width: 20;
article {
.column(9);
}
section {
.column(3);
}
common.grid.less (connecting 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 multiple files and using relative paths, each subsequent file must be indicated relative to the connected file in front of it.
After clearing the cache, our less file will be picked up and converted to css. Each time you refresh the page, less 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. During development, the “LESS developer mode” checkbox will be useful - when enabled, less will be converted every time the page is refreshed.