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

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 4 years ago.

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.

Answer 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.

Answer 2

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

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

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