Jekyll液体变量作为内联CSS值 [英] Jekyll liquid variables as inline CSS values
问题描述
传递液体变量作为内联样式通常不被接受吗?这是我的标记示例:
Is passing liquid variables as inline styles commonly frowned upon? Here is an example of my markup:
<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.这种方法有效还是有更好的方法基于页外变量系统地更改颜色值?
I am setting h1 and p colors using the liquid variables in my posts. I know I could pass the variable directly to a CSS file, but then'd i'd have to write even more markup and CSS. Is this method valid or is there a better method on systematically changing values of color based off page variables?
推荐答案
最好是设置一个类,而不是直接内联设置样式.
Better would be to set a class, rather than directly setting the styles inline.
<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
中设置所需的不同类的样式:
Then in your whatever.css
set the styles for the different classes you want:
.someClass h1{
color:blue;
}
.someClass .intro p{
color:red;
}
例如.
这篇关于Jekyll液体变量作为内联CSS值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!