Jekyll - можете ли вы использовать жидкость для ссылки на переменные перепада объекта

Question

Я хотел бы использовать переменные фронт-материи внутри css, чтобы исключить использование встроенного стиля в html-файлах, и задавался вопросом, возможно ли это? Вот пример того, что у меня есть на данный момент

страницу вводная:

--- 
section-1-color: #222222 
--- 

HTML:

<section class="section-1" style="background-color: {% page.section-1-color %}"> 

То, что я предпочел бы сделать в CSS:

.section-1 { 
    background-color: {% page.section-color %}; 
} 

Возможно ли это? или является встроенным стилем наиболее приемлемого метода?

Answer 1

Inline styling - наиболее приемлемый метод. Вы определяете переменную страницы, которая является конкретной для этой страницы, поэтому она не относится к глобальной таблице стилей (IMO). Вы должны сделать это так:

Создать .md файл так:

--- 
section-1-color: #222222 
layout: default 
--- 

Lorem ipsum 

Creat макет файла (default.html), как это:

<section class="section-1" style="background-color: {% page.section-1-color %};"> 
{{ content }} 
</section> 

Но ... к ответьте на свой вопрос: возможно, см. this answer.

Answer 2

Централизуйте цвета ДАННЫЕ в _settings.yml

section-color: 
1: "yellow" 
2: "#ffffff" 
3: "#f00" 

В ваших страницах вводная ссылка выбранный цвет:

--- 
section-color: 1 
--- 

В макете:

<section class="section-{{ page.section-color }}> 

На дне вашего основного файла scss (искать активы/main.scss), которые уже имеют передний элемент, а затем процесс ed by jekyll:

--- 
# Only the main Sass file needs front matter (the dashes are enough) 
--- 
// a lot of scss here 
// ... 

{% for section in site.section-color %} 
.section-{{ section[0] }} { background: {{ section[1] }}; } // toto 
{% endfor %}