Question

我如何使用＆＃34; *＆＃34;使用SASS时的CSS通配符选择器？例如，我如何制作以下CSS代码SASSy？

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 1;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

编辑：

感谢您到目前为止的答案，但让我澄清一下。我意识到代码示例有许多不同的观点。代码示例不是问题。问题仍然存在，如何使用*选择器？ SASS解析器在遇到*时会抛出语法错误，并说它遇到*，但期望选择器。我在Mac OSX 10.9.5上使用Sass 3.4.19（Selective Steve）。

编辑2：

我找到了解决方案。错误是由于;代码块之前的行中包含的文件中缺少*引起的。这就是处理其他人代码的生活。我要给@torazaburo答案，因为他是唯一一个真正解决这个问题并让我重新考虑其他可能性的人。

Answer 1

SASS几乎没有帮助你。您不需要供应商前缀。只需写下

*, ::before, ::after {
  box-sizing: border-box;
}

* {
  line-height: 1;
}

是否撰写*::before或::before是个人偏好的问题。

I-must-use-SASS 心态就是说我必须写

*::before

作为

的规则

* { 
  &::before

因为我必须使用嵌套，无论如何，只因为我可以。其实并不是。您的CSS通常更清洁，嵌套更少（或为零）。（通常它更清晰，没有SASS，但这是另一天的主题。）

使用SASS时如何使用* CSS通配符选择器？

SASS的*没什么特别之处。这只是另一个选择器。您可以像使用任何其他选择器一样使用它。

Answer 2

foo { .bar { } }代表当前选择器。例如foo .bar是foo { &.bar { } }; foo.bar匹配missing <!DOCTYPE> declaration。

Answer 3

@mixin boxSixing($boxType:border-box){
  -webkit-box-sizing: $boxType;
  -moz-box-sizing: $boxType;
  box-sizing: $boxType;
}
* {
  @include boxSixing;
  line-height: 1;
  &:after,&:before{
    @include boxSixing;
  };
}

如何在SASS中使用通配符星号CSS选择器？

编辑：

编辑2：

3 个答案: