SCSS中的多个属性选择器

时间:2016-12-28 01:41:18

标签: css sass css-selectors

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

放入该代码,我收到以下错误......

  

" ... ="左"] {...":预期" {",是"}& #34;)

1 个答案:

答案 0 :(得分:2)

@each循环是写这个的另一种方式:

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