Dynamiczna kompilacja LESS do CSS w języku PHP

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ń 🙂

lessc bootstrap.less bootstrap.css

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ść:

@default: #000;
@blue: #0066cc;
p {
    font-size: 16px;
    font-family: 'Arial';
    color: @default;
    
    a, span { 
        color: @blue; 
    }
}

@default: #000;

@blue: #0066cc;

p {

font-size: 16px;

font-family: 'Arial';

color: @default;

a, span {

color: @blue;

}

Utwórz plik kompilatora – compilator.php:

<?php
// compilator.php
require_once("lessphp/lessc.inc.php");
$less = new lessc;
$less->checkedCompile('style.less','style.css');
?>

<?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ść:

p {
  font-size: 16px;
  font-family: 'Arial';
  color: #000;
}
p a,
p span {
  color: #0066cc;
}

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:

<?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>
...

<?php require_once("compilator.php"); ?>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

...

#less #php

Dynamiczna kompilacja LESS do CSS w języku PHP

INSTALACJA LESSPHP

PRZYKŁAD

KOMENTARZE