Bulmaのデフォルト$変数の使い方

Question

3日前にコーディングの旅を始めましたので、これは全く新しい次元です。 私は設計しようとしているウェブサイトでhtmlとcssのハングを取得するためにを開始してです。 http://bulma.io/documentation/overview/variables/

はSASSでのみアクセスこれらの変数です：？私は自分のサイト上ブルマ CSSフレームワークを使用している、と私はその変数を使用してトラブルを抱えている

私はSASSをセットアップしているので、私のscssファイルは私のCSSファイルを更新しますが、私のscssファイルは何らかの形でBulmaに関連付けられていないので、「変数は未定義です」という意味になります。ですから、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"> 

私は今達成しようとしている唯一のことは、$黒プリセット変数で黒い背景を取得することです。これは.cssファイルからのもので、明らかにそれを行う方法ではありません.CSSで$変数を使用することはできません。

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

私はここで何か基本的なものを欠いていると思います。初心者を助けてください。

要約：プリセットフレームワークの使用方法（ブルマ、この場合）変数はありますか？

おかげ

Answer 1

あなたのをtesting.scssファイルにインポートするだけでいいと思います。

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

であり、$ blackなどの変数にアクセスできます。

設定が正しいようにパスを変更することを忘れないでください。

Answer 2

、これはそれを行うには、「権利」方法ですが、これは、私はそれがを働かせた方法であるかどうかわからない：

npm install bulma 

が、その後でこのを挿入私のトップtesting.scss ：

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

testing.scssにBulmaの変数を使用できるようになりました。保存/コンパイルすると、testing.cssに変換され、バニラCSSに変換されます。これについての指示を見つけることができなかった、ちょうど私がつまずいた何か。あまりにも基本的なようなので、誰もがこれを行う方法を知っていると仮定しますか？