Компиляция меньшего CSS для Bootstrap 3 с PHP

В PHP есть два компилятора LessCSS, о которых я знаю:

Оба утверждают, что совместимы с Bootstrap (версия 3). Однако я изо всех сил пытаюсь получить что-либо, учитывая крутую кривую обучения этих трех аспектов. Короче говоря, я просто хочу добиться следующего:

Скомпилировать несколько файлов .less в PHP:

  • bootstrap.less
  • my.less

Скомпилировать один файл в leafo.net/lessphp было легко, я нашел:

require_once 'lessc.inc.php'; 
$less = new lessc;
$less->checkedCompile("my.less", "mainless.css");

Однако я не уверен, что библиотека предназначена для нескольких файлов. (Если да, то как это сделать/должно быть сделано?)

Я решил перейти к другой библиотеке, которая явно продемонстрировала, как скомпилировать для бутстрапа: lessphp.gpeasy.com. Однако их примерный фрагмент оставил меня почесывать мою голову (взято из здесь):

<?php
require 'less.php/LessCache.php';
$files = array( '/var/www/mysite/bootstrap.less' => '/mysite/' );
Less_Cache::$cache_dir = '/var/www/writable_folder';
$css_file_name = Less_Cache::Get( $to_cache );
$compiled = file_get_contents( '/var/www/writable_folder/'.$css_file_name );

Посмотрев на другие примеры, я понял, что $files и $to_cache являются опечатками: они должны быть одной и той же переменной. Но после прочтения документации и просмотра источника я отказался от попытки разобраться, если следующие строки точно передавали свою цель:

  • /var/www/mysite/bootstrap.less - Является ли это тем меньше файлов, которые нужно скомпилировать?
  • /mysite/ - что это такое?
  • /var/www/writable_folder - Это где css написано?

Пожалуйста, может кто-нибудь дать мне фрагмент, который компилирует bootstrap.less и my.less в css файл (ы) с помощью PHP?

Ответы

Ответ 1

AFAIK http://leafo.net/lessphp/ несовместим с Boostrap 3 > 3.0.0, см. https://github.com/leafo/lessphp/issues/503

http://lessphp.gpeasy.com/ работает для меня, я успешно использовал его для JBST (https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/82), я не использовал функцию кеширования.

Без кэширования вы можете вызывать $parser->parseFile() для каждого добавляемого файла, он будет скомпилирован в один файл. array(/var/www/mysite/bootstrap.less' => '/mysite/');. Используйте массив массивов для нескольких файлов: array(array(/var/www/mysite/bootstrap.less' => '/mysite/'), array(/var/www/mysite/.less' => '/mysite/'));

<?php
$parser = new Less_Parser();
$parser->parseFile( '/var/www/mysite/bootstrap.less', 'http://example.com/mysite/' );
$parser->parseFile( '/var/www/mysite/mainless.css', 'http://example.com/mysite/' );
$css = $parser->getCss();

Less_Cache:: Get, похоже, работает только для одного файла.

update Как комментируется @user697576 Less_Cache::Get() принимает один файл или список (массив файлов). Единым файлом будет массив вроде array(/var/www/mysite/bootstrap.less' => '/mysite/');

Из документов:

Используйте класс Less_Cache для сохранения и повторного использования результатов скомпилированных меньше файлов. Этот метод мы проверяем измененное время каждого меньшего файла (, включая импортированные файлы), и регенерировать при обнаружении изменений.

Я выделяю , включая импортированные файлы, потому что это, похоже, решает вашу проблему. Слейте файлы с МЕНЬШЕ:

styles.less:

@import "my.less"; 
@import "mainless.css";

И компилировать только стили.

/var/www/mysite/bootstrap.less - Является ли это тем меньше файлов для компиляции?

Да, почему бы и нет? Убедитесь, что файлы, импортированные в bootstrap.less, доступны в том же каталоге, что и bootstrap.less, или используйте $parser->SetImportDirs() для установки правильного пути.

/mysite/- что это за???

Он устанавливает правильный путь. Если файл LESS содержит, например, url(image.png), он выводит url( /mysite/image.png). Примечание. Бутстрап использует../для пути глификонов, это не будет исправлено или даже хуже станет /mysite/../. Вам нужно будет установить этот путь в LESS: @icon-font-path: "/mysite/fonts/";

/var/www/writable_folder - это где css написано?

Nope после $compiled = file_get_contents( '/var/www/writable_folder/'.$css_file_name ); $compiled содержит (скомпилированный) CSS, который вы должны записать в файл. Или используйте: $css_file_name = Less_Cache:: Get ($ to_cache); в вашем HTML:

    <link rel="stylesheet" type="text/css" href="/writable_folder/<?php echo $css_file_name;?>">

Обновление Обратите внимание, что с Bootstrap 3.2.0. префикс свойств в Bootstrap выполняется с помощью средства autoprefixer в процессе сборки. Предыдущее означает, что код кода Bootstrap Less содержит объявление свойства, в котором используется только синтаксис W3C, в то время как для поддержки кросс-браузера требуется префикс. Компиляция источника с помощью less.php не запускает средство autoprefixer. См. Также: https://github.com/oyejorge/less.php/issues/158

Ответ 2

Честно говоря, я все еще пытаюсь понять преимущество того, что сервер компилирует файлы LESS, а не компилирует их во время разработки, а затем просто загружает CSS на сервер при развертывании приложения. Это просто кажется дополнительной работой для сервера без каких-либо преимуществ. Я использую инструмент под названием Prepros - эквивалент Windows Code Code. Его легко настроить. Я делаю свои изменения в LESS и сохраняю. Файлы CSS автоматически перекомпилируются и сохраняются в папке приложения на моей машине разработки. Когда все так, как я этого хочу, я уменьшаю файлы и переношу их в поле производства.

Ответ 3

другое решение с использованием http://leafo.net/lessphp:

1: получите код css для ваших файлов .less:

$baseCSS = file_get_contents("style.less");

$baseCSS .= file_get_contents("default.less");//append the second file to the variable

2: скомпилировать, используя:

$finalCSSCode = $less->compile($baseCSS);

веселит