如何使用布尔玛的默认$变量

我在3天前开始了我的编码之旅，所以这对我来说是一个全新的维度。我是开始得到的HTML和CSS，我试图设计的网站挂。

我用我的网站上布尔玛 CSS框架，我在使用他们的变量麻烦：http://bulma.io/documentation/overview/variables/

难道这些变量只在上海社会科学院访问？我设置了SASS，所以我的scss文件更新了我的css文件，但是我的scss文件并没有以任何方式与Bulma相关联，所以我会得到“Variable is undefined”，这是有道理的。所以我假设我将不得不将Bulma变量导入scss文件，但是如何？

这就是我如何得到我的CSS设置在HTML的“头”。

<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">

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

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

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

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

感谢

来源

2017-10-04 Sykt Norsk

欢迎来到SO！并感谢您汇集了我见过的来自新用户的最佳措辞问题。我们需要一些更多的信息来帮助你，我想。所以你的.scss文件正在编译成'testing.css'，这是否正确？你可以用你的项目的目录结构更新你的问题，包括'.scss'目录/文件吗？ –

这是正确的，我的.scss文件正在编译为测试。CSS。我的项目基本上在D：/ folder1/folder2/projectfolder - html.index，许可等位于。在项目文件夹中，我还获得了一个名为assets的子文件夹，该文件夹中又有3个子文件夹：css，img，sass，以及其中的各自文件。在css文件夹中有testing.css表单，在sass文件夹中有testing.scss文件，没有其他的。 –

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

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

然后您将有权访问像$ black这样的变量。

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

来源

2017-10-04 23:07:23

这是正确的答案，我最终导入了每个实用程序，正如您在上面的答案中所看到的。不能upvote你因为我的低代表。对于我的第二个问题有何洞见？ –

不知道这是否是“正确”的方式做到这一点，但这是我如何使它工作：

npm install bulma

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

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

我现在可以在testing.scss中使用布尔玛的变量，它们在保存/编译为testing.css时转换为vanilla css。无法找到任何指示，只是我偶然发现。它是不是太简单，所以他们认为每个人都知道如何做到这一点？

来源

2017-10-04 23:00:01

建议：移除红利问题并在Stackoverflow上发布一个新问题。更好的是，寻找这个问题，我知道那里有现有的解决方案。 –

如何使用布尔玛的默认$变量

回答

相关问题