SCSS中的多属性选择器

我有一些用于设置一些定位元素的SCSS代码，非常简单

[no-padding*="left"] { padding-left: 0 !important; }
[no-padding*="right"] { padding-right: 0 !important; }
[no-padding*="bottom"] { padding-bottom: 0 !important; }
[no-padding*="top"] { padding-top: 0 !important; }

但是我想知道是否有一种更干净的方法可以使用

[attr*=value]

选择器来编写它，例如

[no-padding] {
    &[*="left"] { ... }
    &[*="right"] { ... }
}

输入代码后，我得到以下错误

“…=”左“]{…”后的CSS无效：应为“{”，为“}”）

---

@each

循环将是另一种编写方法：

$directions: left right bottom top;
@each $i in $directions {
  [no-padding*="#{$i}"] {
    padding-#{$i}: 0 !important;
  }
}

---

顺便说一句，我注意到使用表示性标记是一种不好的形式，因为它将标记与其外观紧密地结合在一起。你确定没有更抽象的方法来达到相同的效果吗？我有点困惑，它与使用类选择器有什么不同。这本质上不是相同的耦合量吗？请注意，我不是说我认为你错了。我只是不明白。

和

在耦合方面有什么不同？我的意思是，现在不是所有主要的CSS框架都在这样做吗？引导和角度材质都充满了声明性的属性选择器。尽管现在我想得更仔细了，你说的有点道理它，我一直觉得CSS是一种笨拙的方式来设计具有很多耦合性的东西。不，SCSS不支持这种语法。“更干净的方式”是不使用这样的属性（除非是“数据无填充”）并使用类。