# Variables

SCSS は先に同名の変数を宣言することで !default の付与された変数を宣言させない仕様です。よって、読み込んだ変数ファイルよりも前に変数を記述することで、不要な CSS 出力をせずに変更できます。また、カスタマイズ用の変数も 1 つのファイルにすると管理しやすくなります。

// プライマリーカラーをオレンジに変えたい場合
$primary: #fb8c00;

// カスタマイズ用の変数を1ファイルで管理する場合
@import "config/_customize.scss";

// 読み込む変数↓より前に記述する↑
@import "moftone/src/scss/tone/_moftone.scss";
@import "sass-dashi/src/scss/_dashi.scss";
@import "musubii/src/scss/config/_variable.scss";

# Break Point

ブレイクポイントの変更ができる変数。メディアクエリの値を一括で変更することが可能。

# Theme Color

テーマカラーの変更ができる変数。役割に応じたボタンやリンク色を一括で変更可能。Default で設定されている変数は、ライブラリを使った場合に MOFTONE または iOSTONE、使わなかった場合に MDTONE の色を参照します。

# Size

XXL〜XXS までのサイズ設定を変更できる変数。拡大率すべてに影響します。

# Weight

フォントの太さを変更できる変数。

# Font Family

フォントファミリーを変更できる変数。

# Global

全体に影響する変数。

# Section

.section 直下の .inner 類を調整する変数。

# Space

.is-space 直下のマージンを調整する変数。

# Grid

グリッドの分割数や溝を調整する変数。

# Heading

見出し専用の変数はありません。

# Text

テキスト・リンク・引用やコードブロックを調整する変数。

# Button

ボタンを調整する変数。役割毎の色はテーマカラーで変更します。

# List

リストを調整する変数。

# Table

テーブルを調整する変数。

# Form

フォームを調整する変数。

# Icon

アイコンを調整する変数。

# Alert

アラートを調整する変数。役割毎の色はテーマカラーと分離しています。

# WYSIWYG

WYSIWYG 出力の要素を調整する変数。