如何使用 Bulma 的默认 $ 变量

Question

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

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

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

这就是我在 html 的 "head" 中设置 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; }

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

回顾：如何使用预设框架（Bulma，在本例中）变量？

谢谢

Answer 1

不确定这是否是“正确的”方法，但是这是我的工作方式:

npm install bulma

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

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

我现在可以在 testing.scss 中使用 Bulma 的变量，当 saved/compiled 到 testing.css 时，它们会转换为原版 css。找不到任何说明，这只是我偶然发现的。是不是太基础了，所以他们假设每个人都知道怎么做？

Answer 2

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

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

然后您将可以访问 $black 等变量。

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

如何使用 Bulma 的默认 $ 变量

How to use default $ variables from Bulma

html

css

variables

import

bulma