css - SCSS 中的多个属性选择器

Question

我有一些用于设置一些定位元素的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"] { ... }
}

输入该代码，出现以下错误...

Invalid CSS after "...="left"] { ... ": expected "{", was "}")

Answer 1

@each 循环是另一种写法:

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