По умолчанию Gantry содержит в себе все необходимое, чтобы вы могли свободно использовать LESS. Файлы будут компилироваться в CSS встроенным компилятором.
Вам необходимо будет учитывать некоторые главные вещи:
- Чтобы написать стиль редактируете файлы .less, а не скомпилированные .css в папке
/css-compiled/ - Убедитесь что директории
/less/,/css/и/css-compiled/доступны для записи - Очищайте кеш joomla, less, gantry и браузера
Less
Less предназначен для CSS, так что вы должны знать прежде всего этот "язык". Если вы его знаете, то LESS покажется вам очень знакомым. Далее в примерах будет указан сначала код LESS затем скомпилированный из него CSS. Вы можете прочесть на русском языке всю необходимую информацию по использованию less на официальном сайте проекта.
Less в Gantry
Все LESS файлы располагаются в папке /templates/[TEMPLATE]/less/. Чтобы их превратить в css используется компилятор lessphp, который помещает готовые файлы в директорию /templates/[TEMPLATE]/css-compiled/. Не все правила css компилируются в один файл, в случаях необходимости(предусмотренные параметрами) компилируются автономные файлы /templates/[TEMPLATE]/css-compiled/[OUTPUT_CSSFILE].
Как компилируются файлы less
При обнаружении изменений less компилируется автоматически (только не забываем чистить кеш). Чтобы добавить ещё один файл less есть два способа. Первый - вы можете вставить функцию в ваш код php:
$gantry->addLess('NAME.less');Где NAME.less - ваш файл less. Метод addless() имеет несколько необязательных параметров:
public function addLess([INPUT_LESSFILE], [OUTPUT_CSSFILE], [PRIORITY], [ARRAY_OF_VARIABLES]);Пример использования:
$gantry->addLess('global.less', $gantry->templateName . '-compiled.css', 8, array('headerstyle'=>'"header-'.$gantry->get('headerstyle','dark').'.less"'));Как вы видите global.less является источником компиляции, в результате получаем файл gantry-compiled.css. Приоритет выставлен высокий - 8. Далее идет массив из одного элемента headerstyle в котором передается компиляция.
Скомпилированные файлы css будут иметь такую маску имени [TEMPLATE]-compiled-[MD5_VARIALBLE_NAME_VALUES], в нашем примере.: gantry-compiled-845729384248h3hf4haeioh.css
Вторым способом добавить новый less является обычный импорт, как в css - @import. Делать его можно в global.less, например:
// Core variables and mixins
@import "variables.less";
@import "mixins/index.less";
// Core and Grid
@import "gantry-core.less";
@import "joomla-core.less";
// Template core styling and layout
@import "template.less";
@import "style.less";
@import @headerstyle;
@import "prettify.less"; Кроме того, если вам необходим отдельный файл для правил css, то вы можете использовать, например такой метод, который используется в /features/styledeclaration.php:
if ($gantry->get('typography-enabled')) $gantry->addLess('typography.less');Здесь при соблюдения условия, что "возможность" включена файл typography.less будет допущен к компиляции.
Есть ещё одна рекомендация касается переделывания вами стиля. Так как вам может понадобиться обновить шаблон, то лучше чтобы вы создавали свои собственные less файлы. Вам достаточно будет подключить один файл, например template.less, чтобы в дальнейшем использовать эту маску имени (template-my.less, template-custom.less).
