Жидкие переменные Jekyll как встроенные значения CSS

Передача жидких переменных в качестве встроенных стилей обычно не одобряется? Вот пример моей разметки:

 <div class="span-8-12">
    <h6> {{page.role}}</h6>
    <h1 style="color:{{ page.accentColor }};"> {{page.title}} </h1>
 </div> 
 <article class="intro">
    <p style="color:{{ page.txtColor }};"> {{ page.summary }} </p>
 </article>

Я устанавливаю цвета h1 и p, используя жидкие переменные в своих постах. Я знаю, что мог бы передать переменную непосредственно в файл CSS, но тогда мне пришлось бы писать еще больше разметки и CSS. Является ли этот метод действительным или есть лучший метод систематического изменения значений цвета на основе переменных вне страницы?


jekyll css liquid
person master    schedule 23.02.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Лучше было бы установить класс, а не напрямую устанавливать встроенные стили.

<div class=" {{ page.typeOfClass  }}">
    <div class="span-8-12">
        <h6> {{page.role}}</h6>
        <h1 > {{page.title}} </h1>
     </div> 
     <article class="intro">
        <p > {{ page.summary }} </p>
     </article>
</div>

Затем в вашем whatever.css установите стили для разных классов, которые вы хотите:

.someClass h1{
    color:blue;
}
.someClass .intro p{
    color:red;
}

Например.

person MarkG    schedule 23.02.2015
comment
Почему вы сказали бы использовать класс вместо того, чтобы использовать его непосредственно в теге? Будет ли это скорее ситуация в каждом конкретном случае, где их использовать? - person roger; 22.02.2018