Question

假设我有一个jekyll项目，它在_data / slides.yml中定义了一些数据：

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

杰基尔和萨斯;我可以使用元吗？

1 个答案: