css - Jekyll 液体变量作为内联 CSS 值

Question

将液体变量作为内联样式传递通常不受欢迎吗？这是我的标记示例:

 <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>

我在帖子中使用 liquid 变量设置 h1 和 p 颜色。我知道我可以将变量直接传递给 CSS 文件，但那样我就不得不编写更多的标记和 CSS。这种方法是否有效，或者是否有更好的方法来系统地改 rebase 于页面外变量的颜色值？

Answer 1

更好的方法是设置一个类，而不是直接设置内联样式。

<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;
}

例如。