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.
- 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
- Instalacja Node.js
- Integracja z Symfony2 i Assetic
- Konfiguracja Assetic
Edytujemyconfig.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 argumentufilter
:#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!
- Konfiguracja Assetic