Question

我想在css中使用前端变量来消除html文件中内联样式的使用，并且想知道这是否可行？这是我目前所拥有的一个例子

页面问题：

---
section-1-color: #222222
---

HTML：

<section class="section-1" style="background-color: {% page.section-1-color %}">

我更喜欢在CSS中做什么：

.section-1 {
    background-color: {% page.section-color %};
}

这可能吗？或内联样式是最可接受的方法？

Answer 1

内联样式是最可接受的方法。您定义了一个特定于此页面的页面变量，因此它不属于全局样式表（IMO）。你应该这样做：

像这样创建一个.md文件：

<section class="section-1" style="background-color: {% page.section-1-color %};">
{{ content }}
</section>

创建一个布局文件（default.html），如下所示：

jQuery(document).on('click','input', function(){
    // do something
});

但是......回答你的问题：有可能，请参阅this answer。

Answer 2

将您的颜色数据集中在_settings.yml

中

section-color:
 1: "yellow"
 2: "#ffffff"
 3: "#f00"

在您的页面前面，参考选择的颜色：

---
section-color: 1
---

在你的布局中：

<section class="section-{{ page.section-color }}>

在主scss文件的底部（查找assets / main.scss），已经有了前面的内容，然后由jekyll处理：

---
# Only the main Sass file needs front matter (the dashes are enough)
---
// a lot of scss here
// ...

{% for section in site.section-color %}
.section-{{ section[0] }} { background: {{ section[1] }}; } // toto
{% endfor %}

杰基尔 - 你能用液体来参考前面的物质变量吗？

2 个答案: