通常不赞成将液体变量作为内联样式传递吗?这是我的标记示例:
<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;
}
例如。