すべてのBulmaコンポーネントは、**CSS変数**（CSSカスタムプロパティとも呼ばれます）を使用してスタイルが設定されています。 MDNリファレンスで詳細を読む
たとえば、.title要素のスタイル設定方法は次のとおりです。
.title {
color: var(--bulma-title-color);
font-size: var(--bulma-title-size);
font-weight: var(--bulma-title-weight);
line-height: var(--bulma-title-line-height);
}
スコープ
Bulma CSS変数は、次のいずれかで定義されます。
- **グローバル**スコープ
:root .buttonのような**コンポーネント**スコープ
より具体的なスコープ（.buttonなど）で定義されたCSS変数は、よりグローバルなスコープで定義された変数をオーバーライドします。
:root {
/* Default global value */
--bulma-size-medium: 1.25rem;
}
.button {
/* Overrides the global value */
--bulma-size-medium: 1.5rem;
}
プレフィックス
すべてのBulma CSS変数には、bulma-（ダッシュを含む）というプレフィックスが付いています。ウェブページを検査すると、テーマに気付くでしょう。
このプレフィックスは、$cssvars-prefix Sass変数を設定することで変更できます。
@use "bulma/sass" with (
$cssvars-prefix: "my-prefix-"
);
テーマ
:rootレベルで定義されたグローバルCSS変数は、**Bulmaテーマ**を定義するものです。テーマは単にCSS変数のコレクションと考えてください。