css - 杰基尔和萨斯；我可以使用元数据吗？

Question

假设我有一个在 _data/slides.yml 中定义一些数据的 jekyll 元素:

- number: 1   
  image: image1.jpg   
  class: one
  paragraph: Apa

- number: 2  
  image: image2.jpg  
  class: two
  paragraph: Bepa

...等等

然后我也有一个像这样的包含:

{% for slide in site.data.slides %}

  <!-- Section #{{ slide.number }} -->
  <div class="bg-wrapper">
    <div class={{ slide.class }} id={{ slide.class }}>
      <div class="page-bg"></div>
      <div class="center">
        <h1>{{ slide.number }}</h1>
        <hr>
        <h4>{{ slide.paragraph }}</h4>
      </div>
    </div>
  </div>

{% endfor %}

想法是幻灯片中的每张幻灯片都应该有一个部分，这样幻灯片中的图像就是背景图像。
现在，我知道我可以在这里添加一些带有类等的内联样式，但我宁愿在我的 sass 文件中再次遍历数据并为每个创建一个类。有可能做这样的事情吗？

例如在 main.sass 中:

---
---

{% for slide in site.data.slides %}

  .{{ slide.class }}
    background: url(/assets/images/{{ slide.image }}) no-repeat center center fixed

{% endfor %}

此外，如果可能的话，您是否也可以将 {{ slide.image }} 作为 mixin 的参数传递？

提前致谢!

编辑:

接受的答案说明了一切。对我来说，问题是我使用的是 .sass 文件(不是 scss)，当我在 for 循环中缩进时没有看到我自己的错误，导致 sass 出错。

Answer 1

是的，你可以做到!

- number: 1
  image: image1.jpg
  class: one
  paragraph: Apa
  radius: 5px <-- added radius for example

sass 代码

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

{% for slide in site.data.slides %}
.{{ slide.class }}{
  background: url(/assets/images/{{ slide.color }}) no-repeat center center fixed;
  @include border-radius({{slide.radius}});
}
{% endfor %}