当您以正确的方式构建网站时，有关样式变量的 CSS 或 Sass 问题就更容易回答。
自从CSS 变量在 2010 年代流行以来， Sass用户就想知道它们可以在多大程度上填充Sass 变量。虽然您当然可以选择仅使用这些样式变量类型中的一种，但最好的选择可能是两者的明智组合。如果您使用精通 Sass 的静态站点生成器 (SSG) 以智能方式构建网站，则尤其如此。
在继续之前，让我承认正确的术语是CSS 自定义属性而不是CSS 变量，但大多数人在谈论这个问题时似乎使用后一个术语，所以让我们放弃并将其称为CSS 变量。此外，这将使您更容易理解接下来的比较。
尽管一些 Web 开发专家表示应该使用 CSS变量或Sass 变量（第一组变量的数量显然在逐月增加），但每种类型的样式变量都有其自己的位置。而且，由于在 SSG 上启用 Sass 通常非常容易，因此您绝对可以使用这两种类型。事实上，你应该这样做。
这是一个简单的经验法则。如果您要使用 JavaScript 在浏览器运行时更改值，请将值存储在 CSS 变量中；否则，将其存储在 Sass 变量中。
为什么？好吧，除了无法在运行时更改 Sass 变量的明显原因之外，还因为在 Sass 变量中存储任何内容可以减少浏览器要做的工作，因为该值是由 Sass 编译过程提供的（再次强调，在典型配置的 SSG 中是“无需思考”级别的自动操作）。浏览器要做的工作越少，浏览器交付页面的效率就越高。
因此，假设您正在使用一个变量，例如font-family ，该变量在任何情况下都不应在浏览器中更改。那应该是一个 Sass 变量：
$sans-serif : ui-sans-serif , system-ui , - apple-system , BlinkMacSystemFont , "Segoe UI" , Roboto , "Helvetica Neue" , Arial , "Noto Sans" , sans-serif , "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Symbol" , "Noto Color Emoji" ; html , body { font-family : $sans-serif ; }
但是，如果您需要一个变量，其值将（或可以）根据某些运行时事件而改变（就像本页面基于 JavaScript 在浅色和深色模式之间切换的情况一样），那么它必须是 CSS 变量。考虑到这一点，下面是如何使用这两种变量类型的示例，每种变量类型都更有意义：
// These values won't change, // so they're in Sass variables. $bkgd-light : #fefefe ; $bkgd-dark : #202020 ; // But this one will, so it's // in a CSS variable... html , body { background-color : var ( -- bkgd ); } // ... the value of which changes // conditionally (based on the // user-selected `data-theme`) // to the appropriate one of // the Sass variable values. [ data-theme = "light" ] { --bkgd : #{ $bkgd-light } ; } [ data-theme = "dark" ] { --bkgd : #{ $bkgd-dark } ; }
注意：正如您在上面看到的，在 CSS 变量中使用 Sass 变量需要插值（包装#{和} ）。
尽管 vanilla CSS 不断进步，但Sass 仍然有很多东西可以提供。在更合适的时候使用 Sass 是在 Web 开发过程中遵循的合理策略。