4

从字面上看，我在 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; }

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

回顾：如何使用预设框架（在这种情况下为布尔玛）变量？

谢谢

4

2 回答 2

2

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

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

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

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

于 2017-10-04T23:07:23.513 回答
-3

不确定这是否是“正确”的方法，但这就是我让它工作的方式：

npm install bulma

然后将其插入我的顶部testing.scss ：

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

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

于 2017-10-04T23:00:01.100 回答