CSS 和 SCSS/SASS 变量中的自定义属性之间的区别答案

【问题标题】：Difference between custom properties in CSS and SCSS/SASS variableCSS 和 SCSS/SASS 变量中的自定义属性之间的区别
【发布时间】：2018-09-11 08:25:45
【问题描述】：

我正在学习一个非常好的教程

https://www.sitepoint.com/variables-in-css-custom-properties/

我试图理解 CSS 中自定义属性的概念。但我真的很困惑，因为 SASS/SCSS 变量也做同样的事情。然后当自定义属性。或者有什么重要的方式应该让人们更喜欢 CSS 自定义属性而不是预处理器。

谢谢！！非常感谢任何帮助

【问题讨论】：

css-tricks.com/difference-between-types-of-css-variables
看过那个教程。我的结论是在这种情况下更喜欢自定义属性而不是预处理器。我走对了吗？
或多或少是的。 CSS 属性确实是新的并且是相当实验性的，因此您可能希望将它与支持它们的浏览器一起使用。但是，使用预处理器，您可以确保获得兼容的 CSS。这里的一个怪癖是预处理器有很多开销，所以也试试看。
@ApurvaPathak - 在某些情况下，我认为现在使用 css 变量还为时过早，没有任何预处理器（谈论 postcss 或类似的东西）。在不久的将来，没有理由使用预处理器（个人意见）:)

标签： css sass scss-lint

【解决方案1】：

非常简单的答案是 CSS 属性在预处理器之后很久才出现。人们喜欢预处理器的原因之一是它就像一种具有函数和变量的编程语言，而不仅仅是静态 CSS。

通过向 vanilla CSS 添加属性，您可以在不需要任何预处理器的情况下使用它；它只是对语言的补充。

关于什么时候应该使用它，问题应该是：什么时候应该使用 CSS 预处理器。当您需要很大的灵活性和类似编程语言的环境时。我希望这能回答这个问题。

【讨论】：

另外：有可能对它们进行作用域（预处理器无法做到这一点）真的很酷，例如仅在某些 css 规则中覆盖（非常适合主题或白标签）。
没错。老实说，如果我们将这些固有地内置到 CSS 中，那么就没有预处理器了，唉
@GomatoX 你对它们的范围是什么意思（预处理器不能这样做）？

【解决方案2】：

sass/scss 是为 css 编译的代码，与自定义 css 不同的是，自定义 css 是用于更改页面样式的自制变量。但是这两种方法都有助于级联。在我看来，您必须查看浏览器的兼容性以及在哪个项目上下文中使用它

【讨论】：