jekyll和sass; 我可以使用元吗？

debugcn 发表于 Dev

Letterix

假设我有一个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火腿。

大卫·雅克（David Jacquel）

是的，你可以做到！

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。