Render comma separated selectors separately in SCSS

user_1496453 0
Viewed 305

I'm trying to style progress bars using SCSS. To get this working in both Webkit and Gecko browsers I need to use both -webkit and -moz prefixes:

progress {
    height: 50px;
    -webkit-appearance: none;
    appearance: none;
    background: cyan;
    
    &::-moz-progress-bar,
    &::-webkit-progress-value {
        background-color: orange;
    }
    
    &::-webkit-progress-bar {
        background-color: cyan;
    }
}

which renders to

progress {
  height: 50px;
  -webkit-appearance: none;
  appearance: none;
  background: cyan;
}
progress::-moz-progress-bar, progress::-webkit-progress-value {
  background-color: orange;
}
progress::-webkit-progress-bar {
  background-color: cyan;
}

This works great in Firefox, but Chrome doesn't seem to like it. Compare the following two implementations:

Comma separated selectors

progress {
    height: 50px;
    -webkit-appearance: none;
    appearance: none;
    background: cyan;
}

progress::-moz-progress-bar, progress::-webkit-progress-value {
    background-color: orange;
}

progress::-webkit-progress-bar {
    background-color: cyan;
}
<progress max="1" value="0.5"></progress>

Entirely separate declarations

progress {
    height: 50px;
    -webkit-appearance: none;
    appearance: none;
    background: cyan;
}

progress::-webkit-progress-value {
    background-color: orange;
}

progress::-moz-progress-bar {
    background-color: orange;
}

progress::-webkit-progress-bar {
    background-color: cyan;
}
<progress max="1" value="0.5"></progress>

The above code snippets render in Firefox and Chrome as shown below

Firefox Chrome
comma separated Comma separated rendered in Firefox Comma separated rendered in Chrome
separate declarations Separate declaration rendered in Firefox Separate declaration rendered in Chrome

It seems like the problem comes from rendering the CSS with vendor-specific pseudos in comma-separated lists. Is there any way to force the SASS processor to render each selector in a comma separated list as its own declaration?

It would be nice to not use mix-ins, but if it's the only way it's the only way.

sass css-selectors
1 Answers

Yes, you are able to do so! If you want to render SASS to seperate CSS rules simply divide the comma seperated list into two seperate rules. SASS keeps different rules seperate and will not wrap them together. Example:


// ### > SASS

xprogress {
    height: 50px;
    appearance: none;
    background: cyan;
  
  //## divide comma seperated selectors
  //## into different rules
  &::-moz-progress-bar {
    background-color: orange;
  }
  &::-webkit-progress-value {
    background-color: orange;
  }
  &::-webkit-progress-bar {
    background-color: cyan;
  }
}



// ### > compiles to css

progress {
  height: 50px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: cyan;
}

//## when compiling CSS
//## different rules will survive
progress::-moz-progress-bar {
  background-color: orange;
}
progress::-webkit-progress-value {
  background-color: orange;
}
progress::-webkit-progress-bar {
  background-color: cyan;
}
user_92684850
Related