通常不赞成将液体变量作为内联样式传递吗?这是我的标记示例:

 <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。此方法有效还是有更好的方法基于页外变量系统地更改颜色值?

最佳答案

最好是设置一个类,而不是直接内联设置样式。

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


例如。

10-01 17:02
查看更多