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

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

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

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

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

Answer 2

不确定这是否是＆＃34; 正确＆＃34;这样做的方法，但这就是我的工作方式：

getRolesCount

然后在npm install bulma的顶部插入此：

testing.scss

我现在可以在@import "C:/Users/username/node_modules/bulma/sass/utilities/_all";中使用Bulma的变量，并在保存/编译为testing.scss时转换为vanilla css。无法找到任何关于此的说明，只是我偶然发现的事情。是不是太基本了，所以他们认为每个人都知道如何做到这一点？

如何使用Bulma

2 个答案: