sass 中属性的条件

Question

我想根据 html 提供的 typa 属性的条件应用样式，如下所示：

<img src="pf_brise_lame_bdef_034.jpg?itok=3vKP-E25" width="325" height="183" alt="Présentation de l'Association" title="Présentation de l'Association" loading="lazy" typeof="Image" class="lazy-hidden">

所以我不知道如何将条件写入我的 scss 文件，这里是起点：

   $attribut:[typeof="Image"];
                @if $attribut == [typeof="Image"]{
                background: transparent;
                  a{
                      display: none;
                  }
                  }
                  @else {
                  background: $gris-anthracite;
                    a{
                        display: initial;
                    }
                  }

实现此目标的正确语法是什么？进入 li 元素。

谢谢

Answer 1

不需要为此使用 SASS。您可以将 vanilla CSS 与属性选择器一起使用。请参阅以下示例 - 默认情况下图像没有边框，但是这里分配了 typeof 属性 'image' 它们将收到定义的边框。

img {
  border: none;
}
img[typeof='image'] {
  border: 2px solid red;
}

<img src='https://via.placeholder.com/50' typeof='image' />
<img src='https://via.placeholder.com/50' typeof='' />

但如果您设置为 SASS...

您在示例中尝试做的只是设置一个变量，然后运行对其进行比较。但是，您需要将该变量用引号引起来才能起作用。

$attribut: '[typeof="Image"]';
@if $attribut == '[typeof="Image"]' {
...
}

然而，这只是比较定义的变量 'attribut'，绝不是为包含该属性的图像定义规则。为此，我坚持我的第一个建议，只使用 CSS.

sass 中属性的条件

Condition on attribute in sass

css

sass