最近，CSS 添加了许多新的很酷的功能，例如自定义属性和新功能。尽管这些新属性可以使我们的生活更加轻松，但它们最终也可能以有趣的方式与 Sass 等预处理器进行交互。因此，这将是关于我遇到的问题，如何解决这些问题？特此整理一篇文章来说说。
错误
如果您在使用新功能min()和新max()功能时，使用不同的单元时可能会遇到如下错误消息：“不兼容的单元：vh和em。”
然后使用 mixins 避免在对诸如 range input 之类的东西进行样式化时一遍又一遍地编写完全相同的声明。不同的浏览器使用不同的伪元素来设置此类控件的组件样式，因此对于每个组件，我们都必须设置用于控制多个伪组件外观的样式。
可悲的是，将其放入我们的 CSS 中可能很诱人：
input::-webkit-slider-runnable-track,
input::-moz-range-track,
input::-ms-track { /* common styles */ }
我们不能这样做，因为它不起作用！如果没有选择器之一，整个规则集将被删除。而且，由于没有浏览器能够识别上述所有三种，因此样式不会在任何浏览器中应用。
如果要应用样式，我们需要具有以下内容：
input::-webkit-slider-runnable-track { /* common styles */ }
input::-moz-range-track { /* common styles */ }
input::-ms-track { /* common styles */ }
但这可能意味着许多相同的样式重复了三遍。而且，例如，如果要更改background轨道的，则需要在::-webkit-slider-runnable-track样式，::-moz-range-track样式和样式中进行更改::-ms-track。
我们唯一的理智的解决方案是使用 mixin。样式在编译后的代码中会重复，因为它们必须在那儿重复，但是我们不必再写三次相同的东西。
@mixin track() { /* common styles */ }
input {
&::-webkit-slider-runnable-track { @include track }
&::-moz-range-track { @include track }
&::-ms-track { @include track }
}
结语
以上就是今天为大家带来的关于如何解决 Sass 和新 CSS 功能发生冲突的问题，希望对大家有帮助，文章有点长，但是干货满满，建议先马后看。如有更好方法欢迎留言讨论。