在 SCSS 中单独渲染逗号分隔的选择器

Question

我正在尝试使用 SCSS 设置进度条的样式。为了使其在 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 似乎不喜欢它。比较以下两个实现：

逗号分隔选择器

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

完全独立的声明

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>

上述代码片段在 Firefox 和 Chrome 中呈现如下所示

	火狐浏览器	铬合金
逗号分隔
单独声明

问题似乎来自于在逗号分隔列表中使用特定于供应商的伪代码渲染 CSS。 有什么方法可以强制 SASS 处理器将逗号分隔列表中的每个选择器呈现为其自己的声明吗？

不使用 mix-ins 会很好，但如果这是唯一的方法，那就是唯一的方法。

Answer 1

是的，你可以这样做！如果您想将 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;
}