如何使用 Bulma 的默认 $ 变量答案

【问题标题】：How to use default $ variables from Bulma如何使用 Bulma 的默认 $ 变量
【发布时间】：2017-10-04 20:55:02
【问题描述】：

我真的在 3 天前开始了我的编码之旅，所以这对我来说是一个全新的维度。我正在开始在我正在尝试设计的网站上掌握 html 和 css 的窍门。

我在我的网站上使用 Bulma CSS 框架，但在使用它们的变量时遇到问题：http://bulma.io/documentation/overview/variables/

这些变量只能在 SASS 中访问吗？我设置了 SASS，所以我的 scss 文件更新了我的 css 文件，但我的 scss 文件与 Bulma 没有任何关联，所以我会得到“变量未定义”，这有点道理。所以我假设我必须将 Bulma 变量导入到 scss 文件中，但是如何？

这就是我在 html 的“头”中设置 css 的方式。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/testing.css">

我现在唯一想要完成的事情就是使用预设变量 $black 获得一个黑色背景。这是来自.css文件，显然不是这样做的方式，你不能在css中使用$变量，对吧？

html, body {
font-family: Calibri, sans-serif;
font-size: 16px;
color: #dfdfdf;
background-color: $black; }

我想我在这里缺少一些基本的东西，请帮助初学者。

回顾：如何使用预设框架（本例中为布尔玛）变量？

谢谢

【问题讨论】：

欢迎来到 SO！感谢您将我从新用户那里看到的措辞最好的问题之一放在一起。我想我们需要更多信息来帮助你。所以你的 .scss 文件正在编译成testing.css，对吗？您能否使用项目的目录结构更新您的问题，包括.scss 目录/文件？
没错，我的 .scss 文件正在编译成 testing.css。我的项目基本上位于 D:/folder1/folder2/projectfolder - html.index、许可证等位于其中。在项目文件夹中，我还有一个名为 assets 的子文件夹，它又有 3 个子文件夹：css、img、sass，以及它们各自的文件。 css 文件夹中有 testing.css 表，sass 文件夹中有 testing.scss 文件，没有别的。

标签： html css variables import bulma

【解决方案1】：

听起来您只需将 Bulma initial-variables.scss file 导入您的 testing.scss 文件即可。

@import 'path/to/initial-variables';

然后你就可以访问像 $black 这样的变量了。

记得更改路径，使其适合您的设置。

【讨论】：

这是正确的答案，我最终导入了每个实用程序，正如您在上面的答案中看到的那样。由于我的低代表，不能投票给你。我的第二个问题有什么见解吗？

【解决方案2】：

不确定这是否是“正确”的方法，但我就是这样做的：

npm install bulma

然后在我的testing.scss 的顶部插入 this ：

@import "C:/Users/username/node_modules/bulma/sass/utilities/_all";

我现在可以在 testing.scss 中使用 Bulma 的变量，并且在保存/编译到 testing.css 时它们会转换为 vanilla css。找不到任何说明，只是我偶然发现的。是不是太基础了，所以他们认为每个人都知道怎么做？

【讨论】：

建议：删除奖励问题并在 Stackoverflow 上发布新问题。更好的是，搜索那个问题，我知道那里有现有的解决方案。