Kiwwito

Code Snippets and More

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

For the LESS Assetic filter we need to have installed first node.js, the npm package manager and the LESS library.

Installing LESS, node.js and npm for Ubuntu

Under Ubuntu you can install all of those in an easy way through the terminal:

sudo apt-get install nodejs-dev nodejs npm

Install the LESS library:

npm install less

Configuring the LESS filter in Assetic

In Ubuntu the LESS library may be installed into a hidden directory called ".node_libraries" under your home. If not you have to know where is it before Assetic integration. To configure Assetic for the less filter, open the "app/config/config.yml" and add the next lines:

assetic:
    filters:
        less:
            node: /usr/bin/node
            node_paths: [/home/USER/.node_libraries]

Where "USER" is our user.

Usage

To use it, add the following lines to the main base layout file:

{% stylesheets filter='less' output='css/compiled-main.css'
    '@MyBundle/Resources/public/less/*'
%}
   <link href="" type="text/css" rel="stylesheet" media="all" />
{% endstylesheets %}

That will combine all the LESS files that where under the "less" directory of your Bundle into a one CSS "compiled-main.css".

On development environment all the files will be generated for every request. For production environment you have to generate them manually:

php app/console assetic:dump --env=dev --no-debug

You can use this filter with other powerful filters like theYUI compressor filter for Assetic.

Recent comments

© 2014 Copyright by Keyvan Akbary