Istnieje kilka sposobów na kompilację arkusza stylów LESS do formatu CSS. Można to zrobić poprzez narzędzia online, np: winless.org, lesstester.com, edytory i programy z GUI – Koala lub po prostu z wiersza poleceń 🙂
1 |
lessc bootstrap.less bootstrap.css |
Aby zrobić to w sposób dynamiczny na stronie PHP, możemy skorzystać z biblioteki lessphp.
INSTALACJA LESSPHP
Instalacja biblioteki jest bardzo prosta. Wystarczy pobrać paczkę lessphp-0.4.0.tar.gz i rozpakować ją w katalogu strony.
PRZYKŁAD
Utwórz plik style.less w katalogu strony i dodaj do niego zawartość:
1 2 3 4 5 6 7 8 9 10 11 |
@default: #000; @blue: #0066cc; p { font-size: 16px; font-family: 'Arial'; color: @default; a, span { color: @blue; } } |
Utwórz plik kompilatora – compilator.php:
1 2 3 4 5 6 |
<?php // compilator.php require_once("lessphp/lessc.inc.php"); $less = new lessc; $less->checkedCompile('style.less','style.css'); ?> |
Na samym początku skryptu dołączamy bibliotekę. Następnie tworzymy instancję obiektu lessc (new lessc) i odwołujemy się do jego metody checkedCompile, która przyjmuje dwa parametry – adresy do plików: style.less i style.css. Tego drugiego pliku nie musisz tworzyć, zostanie on automatycznie wygenerowany w momencie wywołania skryptu compilator.php.
Przetestuj skrypt kompilatora odpalając go w przeglądarce internetowej. Kiedy otworzysz plik style.css zobaczysz skompilowaną zawartość:
1 2 3 4 5 6 7 8 9 |
p { font-size: 16px; font-family: 'Arial'; color: #000; } p a, p span { color: #0066cc; } |
Teraz możesz zbudować dowolny layout strony i dołączyć do niego arkusz stylów, a kompilator będzie na bieżąco aktualizował style.css 🙂
Przykład:
1 2 3 4 5 6 7 8 9 10 |
<?php require_once("compilator.php"); ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>LESS CSS & PHP</title> <link rel="stylesheet" href="style.css" /> </head> <body> ... |