Sass 在SCS中分别呈现逗号分隔的选择器

我正在尝试使用SCS设置进度条的样式。要在Webkit和Gecko浏览器中实现这一点，我需要同时使用

-Webkit

和

-moz

前缀：

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

这使得

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

这在Firefox中非常有效，但Chrome似乎不喜欢它。比较以下两种实现：

逗号分隔选择器

进展{
高度：50px；
-webkit外观：无；
外观：无；
背景：青色；
}
进度：--moz进度条，进度：--webkit进度值{
背景颜色：橙色；
}
进度：：-webkit进度条{
背景色：青色；
}

---

是的，您可以这样做如果要将SASS呈现为单独的CSS规则，只需将逗号分隔的列表划分为两个单独的规则即可。SASS将不同的规则分开，不会将它们打包在一起。例如：

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

---

哦，桌子怎么转。。。过去，Firefox和Chrome都放弃了这个规则，Safari会接受它。请看-值得注意的是，为了让：is（）和：where（）能够优雅地降级，@BoltClock缓慢而可怕的进程…我理解这一点，但希望将我的DEF保持在一个位置（而不必创建混合）。在我的实际代码中，我做的不仅仅是设置背景色。不过，这似乎是我最好的选择。