Bulmaのモジュール性
**必要な**ものだけをインポートする
Bulmaは、多数の`scss`ファイルで定義された要素とコンポーネントで構成されており、`@use`キーワードを使用して個別にロードできます。
@use "path/to/file.scss";これはターゲットファイルのスタイルを正しくロードしますが、ほとんどのBulmaコンポーネントは、デフォルトテーマで定義された**基本スタイル**と**CSS変数**に依存しています。
そのため、`sass/base`フォルダと`sass/themes`フォルダ*も*ロードすることをお勧めします。
// Load Bulma's base styles and themes (including the minireset)
@use "bulma/sass/base";
@use "bulma/sass/themes";
// Load other Bulma components
@use "bulma/sass/elements/button";
@use "bulma/sass/components/message";Bulmaのカラムのようなレイアウト機能は、Bulmaテーマで定義されたCSS変数に依存しません。そのため、追加のファイルなしで直接ロードできます。
たとえば、Bulmaの**カラム**をインポートするには、`bulma/sass/grid`フォルダにあるファイルをロードするだけです。
`@use`キーワードを使用して`columns.scss`ファイルを**ロード**するだけです
// Only load the columns
@use "bulma/sass/grid/columns";これで、`columns`クラス（コンテナ用）と`column`クラスを直接使用できます。
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
</div>`.button`のようなBulma要素と`.message`のようなコンポーネントをロードするには、基本スタイルとデフォルトテーマもロードすることをお勧めします。
// Load Bulma's base styles and themes (including the minireset)
@use "bulma/sass/base";
@use "bulma/sass/themes";
// Load the button and title elements and compnents
@use "bulma/sass/elements/button";
@use "bulma/sass/elements/title";
@use "bulma/sass/components/message";これで、`.button`クラスとそのすべてのモディファイアを使用できます。
`.is-active`
<button class="button">Button</button>
<button class="button is-primary">Primary button</button>
<button class="button is-large">Large button</button>
<button class="button is-loading">Loading button</button>ほとんどのBulmaコンポーネントはSass変数で構成されています。たとえば、`.section`レイアウトコンポーネントは、パディングを定義するために4つの変数を使用します。
$section-padding: 3rem 1.5rem !default;
$section-padding-desktop: 3rem 3rem !default;
$section-padding-medium: 9rem 4.5rem !default;
$section-padding-large: 18rem 6rem !default;`@use`キーワードを使用すると、独自の変数を使用してモジュールをロードするときにモジュールを構成できます。
// Load the section component with custom variables
@use "bulma/sass/layout/section" with (
$section-padding: 3rem,
$section-padding-desktop: 4.5rem
);