Компиляция Less CSS для Bootstrap 3 с помощью PHP

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

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

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

  1. bootstrap.less
  2. мой.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 были опечаткой: они должны быть одной и той же переменной. Но после прочтения документации и просмотра исходного кода я отказался от попыток выяснить, точно ли следующие строки передают свое назначение:

  1. /var/www/mysite/bootstrap.less - Это меньший файл для компиляции?
  2. /mysite/ - для чего это??
  3. /var/www/writable_folder - Это куда записывается css?

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


person CL22    schedule 03.01.2014    source источник
comment
Я обновил пример на странице lessphp.gpeasy.com/Bootstrap, чтобы сделать его более понятным. Спасибо, что нашли эту опечатку! Кроме того, не могли бы вы пометить это как less.php?   -  person user697576    schedule 04.01.2014
comment
ffs, им приходилось сталкиваться с такими именами? Бесит.   -  person Charles    schedule 04.01.2014
comment
Извините за конфликт имен. Я унаследовал имя/проект less.php от других пользователей на github.   -  person user697576    schedule 04.01.2014
comment
Будет ли кто-нибудь достаточно любезен, чтобы опубликовать реальный пример фрагмента, который просил плакат? Спасибо!   -  person Ralf    schedule 18.08.2014


Ответы (3)


Насколько я знаю, 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 работает только для одного файла за раз.

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

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

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

Я выделяю включая импортированные файлы, потому что это, кажется, решает вашу проблему. Объедините ваши файлы с помощью LESS:

стили.лесс:

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

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

/var/www/mysite/bootstrap.less — это файл меньшего размера, который нужно скомпилировать?

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

/mysite/ - для чего это??

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

/var/www/writable_folder — сюда записывается css?

Нет, после того как $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 выполняется автопрефиксером в процессе сборки. Предыдущее означает, что код кода Bootstrap Less содержит объявление свойства, которое использует только синтаксис W3C, в то время как префикс требуется для кросс-браузерной поддержки. При компиляции исходного кода с помощью less.php автопрефиксер не запускается. См. также: https://github.com/oyejorge/less.php/issues/158< /а>

person Bass Jobsen    schedule 03.01.2014
comment
Less_Cache::Get работает только с одним файлом за раз. Это действительно работает для нескольких файлов - person user697576; 04.01.2014
comment
Re: Yes, why not? ... из-за двух строк в исходниках Less_Cache, которые я нашел: foreach($less_files as $file_path => $uri_or_less ){ и $parser->ParseFile( $file_path, $uri_or_less ); (строки 112 и 120). Казалось, что и ключ, и значение были меньшим количеством источников, а не меньшим источником и пунктом назначения css - чертовски запутал меня - person CL22; 04.01.2014
comment
ваш ввод должен быть массивом (один файл) или массивом массивов. То же, что и для parseFile(). - person Bass Jobsen; 04.01.2014

другое решение с использованием 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);

ваше здоровье

person Gabriel    schedule 05.06.2015
comment
Я работаю над настройщиком Wordpress. Я использую вот так, но это не работает: $theme_options = array( 'color_primary' => get_theme_mod( 'color_primary' ), 'color_secondary' => get_theme_mod( 'color_secondary' ), 'color_success' => get_theme_mod( 'color_success' ), 'color_alert' => get_theme_mod( 'color_alert' ) ) $theme_options_data = ' '; foreach ( $theme_options AS $key => $val ) { $theme_options_data .= "@{$key}: {$val};\n"; } $theme_options_data .= file_get_contents( $fileout ); $css = $compiler->compile( $theme_options_data ); - person huykon225; 22.06.2017

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

person SeanOlson    schedule 03.01.2014
comment
Если вам не нужен динамический CSS, это НЕТ преимущества! На мой взгляд, в вашем рабочем процессе нет ничего плохого, с другой стороны, я не думаю, что вы отвечаете на вопрос. - person Bass Jobsen; 04.01.2014
comment
Вы правы, это не ответ. Динамический CSS, это было бы причиной для размещения его на сервере — я полагаю, позволяя пользователям создавать скин приложения или что-то в этом роде. Спасибо за вопрос, заставил задуматься. - person SeanOlson; 04.01.2014
comment
Для меня это просто вопрос предпочтений, я использую PHP-скрипты на WAMP-сервере localhost для различных компиляций и так далее, в том числе для управления репозиторием subversion. Я считаю, что это более портативно, чем набор независимых инструментов рабочего процесса, а также использовать мое знакомство с PHP. Возможно, у создателей компиляторов PHPless есть и другие причины. - person CL22; 04.01.2014
comment
На самом деле кэширование здесь будет на стороне сервера, поэтому проверка кеша по-прежнему будет накладной для ваших пользователей. Он отличается от компиляции на стороне клиента. - person Bass Jobsen; 04.01.2014
comment
Для меня было бы преимуществом во время разработки, чтобы сервер компилировал код вместо браузера. Конечно, теоретического преимущества после разработки нет, в этом случае необработанные файлы лучше. - person Coded Monkey; 04.11.2014