Ostatnio staje siÄ? bardziej popularny LESS. By go zintegrowaÄ? z Symfony2 za pomocÄ? Assetic’a i zachowaÄ? prÄ?dko??Ä? ??adowania strony bez przeskoku spowodowanego kompilacjÄ? LESS’a przez JavaScript less.js.
DziÄ?ki temu pliki less bÄ?dÄ? skompilowane do normalnego css. Dodatkowo mo??na je wrzuciÄ? bezpo??rednio na serwer do static contentu np. Amazon S3.

Schemat dzia??ania Less Node.js i Assetica
- Instalacja Less
- Instalacja Node.js
sudo apt-get update
sudo apt-get install git-core curl build-essential openssl libssl-dev
git clone https://github.com/joyent/node.git
cd node
chmod +x ./configure
./configure
make
sudo make install
node -v
- Instalacja NPM
wget http://npmjs.org/install.sh --no-check-certificate
sudo ./install.sh
- Instalacja Less
sudo npm install less --global
Parametr global jest niezwykle istotny, gdy?? nie bÄ?dziesz m??g?? potem uzyskaÄ? dostÄ?pu do lessa
- Dodanie PATH Less’a do ~/.bashrc
Edytuj plik: ~/.bashrc
gedit ~/.bashrc
Dodaj nowÄ? liniÄ? na ko??cu pliku:
PATH=$PATH:$HOME/node_modules/less/bin
- Teraz trzeba prze??adowaÄ? profil Basha
source ~/.bashrc
- Testujemy Less!
lessc wejscie_less.less > wyjscie_css.css
- Integracja z Symfony2 i Assetic
- Konfiguracja Assetic
Edytujemy config.yml
i dodajemy 3 liniÄ? zwiÄ?zane z lessem tak jak to widaÄ? na przyk??adzie poni??ej:
# app/config/config.yml
assetic:
debug: %kernel.debug%
use_controller: false
filters:
cssrewrite: ~
less:
node: /usr/local/bin/node
node_paths: [/usr/local/lib/node]
yui_css:
jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar
yui_js:
jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar
- Edytujemy nasz g????wny plik layoutu(
base.html.twig
)
DodajÄ?c warto??Ä? less,
do argumentu filter
:
#base.html.twig
...
<head>
{% stylesheets filter='less,?yui_css' '@AcmeBundle/Resources/less/main.less' %}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}
</head>
...
- Budujemy assety za pomocÄ? Assetic’a
php app/console assetic:dump --env=prod
- Cieszymy siÄ? ??migajÄ?cym arkuszem styli kompilowanym z less’a!