МЕНЬШЕ CSS и экранирование синтаксиса Liquid для разработки темы shopify

Я создаю тему Shopify и использую LESS для компиляции таблицы стилей, которая нужна Shopify как style.css.liquid. Все работало нормально, я начал добавлять фильтры lquid и операторы if.

У меня работает синтаксис Liquid, когда он находится в свойстве css:

@brand-colour: ~"{{ settings.brand_colour }}"; 
h1{ color: @brand-colour;}

Что компилируется во что-то вроде:

h1 {color: {{ settings.brandcolour }};

что нормально.

Что я НЕ МОГУ сделать, так это вставить оператор Liquid, не находясь перед свойством css, например:

{% if settings.full-bg %}
background-color: …

Я пытался убежать от него как

~"{% settings… %}"

и даже

@var: "{% if settings.full-bg %}"

затем бег

@{var}

Но моему компилятору это не нравится ...

Какие-либо предложения?


less shopify liquid
person Chris Mousdale    schedule 24.06.2012    source источник
comment
Я знаю, что вы используете Less, но если вы переключитесь на использование Sass, вы сможете зарегистрировать конструкции Liquid, чтобы игнорировать их, и, следовательно, Sass с радостью скомпилирует ваши таблицы стилей при повторном заполнении вашей Liquid. Стоит попробовать, так как требуется всего пара строк кода, чтобы научить Sass вашему собственному обработчику, в данном случае обработчику Liquid.   -  person David Lazar    schedule 24.06.2012
comment
Спасибо, Дэвид - я думаю, что тогда я мог бы попробовать переключиться на SASS - я думаю, это имеет больше смысла, поскольку Shopify в любом случае написан на Ruby on Rails ... Спасибо !!   -  person Chris Mousdale    schedule 24.06.2012
comment
@DavidLazar, можешь объяснить, как это можно сделать? Я не могу найти никакой документации. Спасибо!   -  person rda3000    schedule 05.10.2012

Ответы (3)


arrow_upward
6
arrow_downward

Просто для информации для всех, кто может наткнуться на эту страницу, вам на самом деле не нужно обрабатывать такие переменные:

@brand-colour: ~"{{ settings.brand_colour }}"; 
h1{ color: @brand-colour;}

Вы действительно можете сделать это с помощью интерполяции SASS следующим образом:

h1 { color: #{'{{ settings.brand_colour }}'}; }

Интерполяция в терминах непрофессионала - это просто перенос переменной в #{' '}, который сообщает SASS просто выводить это как простой текст при компиляции вашего CSS.

person davidnknight    schedule 14.09.2012
comment
SASS у меня не работает - я тоже пробовал как unquote ('{{liquid statement}}') - person Scott Flack; 06.06.2016

arrow_upward
6
arrow_downward

Если кому-то интересно, я решил это обойти, добавив в комментарии свои материалы о Shopify / Liquid, например:

/* {% if settings.repeating-pattern %} */
background: url(~"{{ 'repeating-pattern-header.png' | asset_url }}");
/* {% endif %} */

И Shopify это удостоил.

person Chris Mousdale    schedule 23.07.2012

arrow_upward
0
arrow_downward

Если кому-то интересно использовать переменные Sass для имени файла и типа файла (например, миксин, который автоматически генерирует медиа-запросы @ 2x), вот код:

background-image: url(#{'{{ "'}#{$filename}.#{$filetype}#{'" | asset_url }}'});
person Jason Gilmour    schedule 03.08.2015