如何在 .css 文件中使用在 .scss 文件中声明的变量（例如 $blue Color:#ffffff）？答案

【问题标题】：How can I use variables declarated in a .scss file (e.g. $blueColor: #ffffff) in a .css file?如何在 .css 文件中使用在 .scss 文件中声明的变量（例如 $blue Color:#ffffff）？
【发布时间】：2019-09-19 22:01:22
【问题描述】：

我想在.scss 文件中声明我需要使用的所有颜色，以便仅从我的.css 文件中调用这些颜色变量。

我尝试将@import "<.scss file path>" 放在.css 文件的顶部，但没有成功。

例子：

mycssfile.css

@import "./myscssfile.scss"

body {

  color: $whiteColor;

}

myscssfile.scss

$whiteColor : #ffffff

有人可以帮我吗？谢谢。

【问题讨论】：

你不能在 css 中使用它们。 Css 不支持变量、mixins 或导入。相反，您可以在任何地方使用 scss，然后将它们转换为 css
@Satif CSS 永远支持@import，变量是一个新的（ish）添加，但支持越来越好。当然，如果没有预处理器/编译步骤，它将无法与 scss 结合使用。
@Satif 谢谢！还有一个问题。 scss文件和css有什么区别？浏览器加载样式表的方式一样吗？
@pawel 谢谢！还有一个问题。 scss文件和css有什么区别？浏览器加载样式表的方式一样吗？
@ECF CSS 是一种原生支持的标准，用于定义 HTML 文档的样式。 SCSS/SASS、LESS 等都是非标准语言，需要附带预处理器，将代码转换成浏览器可以理解的 CSS 文件。预处理器之所以有用有很多原因，其中最有用的一种是嵌套语法。我认为大多数大型项目都使用预处理器（我不记得上次为项目编写“vanilla”CSS 是什么时候了）。

标签： javascript css sass

【解决方案1】：

CSS 和 SCSS 文件不能混合使用。

SCSS 文件在浏览器对它们进行任何操作之前被解析为 CSS 文件。如果需要，您可以将 SCSS 文件导入其他 SCSS 文件。

如果你只是想在 CSS 中使用变量，你可以查看css variables。由于它们是实际 CSS 中的变量，因此您可以用它们做一些非常简洁的事情。

【讨论】：

谢谢！但我需要在 .scss 文件中声明颜色变量。如果我不能在 css 文件中使用/导入 scss 变量......我可能会在 .scss 文件中转换 .css 文件，但我必须搜索使用 .scss 文件或 .css 之间是否有任何区别像主样式表文件一样的文件。
SCSS 是 CSS 的超集。因此，您可以将所有 CSS 代码复制到 SCSS 文件中，这样就可以了。最大的不同是 SCSS 代码需要进行预处理。这是浏览器不会为您做的事情。此过程可以作为您的开发设置的一部分自动化。这个预处理的结果是标准的 CSS 代码，浏览器可以使用它以你想要的方式呈现你的页面。
好的，谢谢！有人对我说前身...我不知道它是如何运行的...但我在最后有一个解决方案 jajaja

【解决方案2】：

您不能将.scss文件导入.css文件，使用前需要将SCSS翻译成CSS。

【讨论】：

谢谢！可能用 .scss 文件替换 .css 文件