如何使用布爾瑪的默認$變量

我在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上發佈一個新問題。更好的是，尋找這個問題，我知道那裏有現有的解決方案。 –

如何使用布爾瑪的默認$變量

回答

相關問題