How do I use a wildcard asterisk CSS selector in SASS? [closed]

问题

How do I use a "*" CSS wildcard selector when using SASS? For instance, how would I make the following CSS code 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;
}

Edit:

Thank you for the answers so far, but let me clarify. I realize that there are many different perspectives on the code sample. The code sample is not the question. The question remains, how do I use the * selector? The SASS parser throws a syntax error when it encounters the * and says that it encountered *, but expected a selector. I'm using Sass 3.4.19 (Selective Steve) on Mac OSX 10.9.5.

Edit 2:

I have found the solution. The error was being cause by a missing ; in a file that was included on the line immediately preceding the * code block. Such is the life of dealing with other people's code. I'm going to award the answer to @torazaburo since he was the only one who actually addressed the question and made me rethink other possibilities.

回答1:

There's little here that SASS can help you with. You do not need vendor prefixes. Just write

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

* {
  line-height: 1;
}

Whether to write *::before or ::before is a matter of personal preference.

The I-must-use-SASS mentality would be to say I must write the

*::before

rule as

* { 
  &::before

because I must use nesting, no matter what, just because I can. Actually, not. Your CSS is often much cleaner with less (or zero) nesting. (Often it's clearer with no SASS at all, but that's a topic for another day.)

How do I use a * CSS wildcard selector when using SASS?

There is nothing special about the * to SASS. It's just another selector. You use it like you use any other selector.

回答2:

*
　...
  &:before, &:after
    ...

& stands for the current selector. e.g. foo { .bar { } } is foo .bar; foo { &.bar { } } matches foo.bar.

回答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;
  };
}

来源：https://stackoverflow.com/questions/34057849/how-do-i-use-a-wildcard-asterisk-css-selector-in-sass

标签

css

Sass

css-selectors

wildcard