在萨斯,我可以和& x& y& z

时间:2017-12-20 11:22:34

标签: css sass

我想做什么

asdf{
   &-b&-c {font-size: 16px;}
}

生成的css为

asdf.asdf-b.asdf-c{
   font-size: 16px;
}

这可以用sass做吗? 或者我将不得不多次写出父元素

2 个答案:

答案 0 :(得分:2)

你可以使用mixins:

@mixin fontSize($selector) {
  .#{$selector}.#{$selector}-b.#{$selector}-c {
    font-size: 16px;
  }
}

@include fontSize("asdf");

结果

.asdf.asdf-b.asdf-c {
  font-size: 16px;
}

答案 1 :(得分:1)

如果您使用Less,则语法为:

.asdf {
  &&-b&c {
    font-size: 16px;
  }
}

但是,Sass不允许&与同一选择器中的另一个&直接连接。相反,重用必须使用插值(#{...}):

.test {
  &#{&}-b#{&}-c {
    font-size: 16px;
  }
}