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 属性分配为“图像”，它们将接收定义的边框。

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"]' {
...
}

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