Using with SCSS
Table of Contents
Detail
MUSUBii は SCSS 製です。利用時に SCSS を使うことで細かいカスタマイズが可能となります。まずは、npm でインストールを行ってください。
npm install musubii
yarn add musubii
また、MUSUBii はビルド時に PostCSS で微調整を行っています。同様の CSS が再現できない場合は PostCSS の設定頁を確認ください。
Directory
MUSUBii の SCSS ファイルは、全体で利用する変数や Mixin の集合体である configs・各スタイル出力を行う styles の 2 つに大きく分かれています。ディレクトリ構造は次の通りです。
src/scss
├── configs
│ ├── _import.scss
│ ├── mixins
│ │ ├── _generate.scss
│ │ ├── _mediaquery.scss
│ │ ├── _placeholder.scss
│ │ └── _safearea.scss
│ ├── themes
│ │ ├── _convert.scss
│ │ ├── _theme-common.scss
│ │ ├── _theme-dark.scss
│ │ └── _theme-light.scss
│ └── variables
│ ├── _breakpoint.scss
│ ├── _color.scss
│ ├── _font.scss
│ ├── _global.scss
│ ├── _option.scss
│ ├── _radius.scss
│ ├── _shadow.scss
│ └── _meter.scss
├── styles
│ ├── _import.scss
│ ├── bases
│ │ ├── _html.scss
│ │ ├── _reset.scss
│ │ ├── _root-dark.scss
│ │ └── _root-light.scss
│ ├── elements
│ │ ├── _alert.scss
│ │ ├── _badge.scss
│ │ ├── _button.scss
│ │ ├── _form.scss
│ │ ├── _icon.scss
│ │ ├── _iframe.scss
│ │ ├── _list.scss
│ │ ├── _table.scss
│ │ ├── _text.scss
│ │ └── _wysiwyg.scss
│ ├── layouts
│ │ ├── _box.scss
│ │ ├── _card.scss
│ │ ├── _grid.scss
│ │ ├── _joint.scss
│ │ └── _section.scss
│ └── utilities
│ ├── _clearfix.scss
│ ├── _display.scss
│ ├── _flex.scss
│ ├── _margin.scss
│ ├── _overflow.scss
│ ├── _padding.scss
│ ├── _size.scss
│ └── _space.scss
└── musubii.scss
Import
configs はプロジェクト全体で読み込みます。
musubii/src/scss/configs/_import.scss
styles はプロジェクトで 1 回だけ読み込みます。configs が渡される状態になっている必要があります。また、configs が渡されていれば部分的に使う（グリッドだけなど）ことも可能です。
musubii/src/scss/styles/_import.scss
フレームワークによっては効率的な使い方がありますので、各ページを参考にしてください。
例：Next・Gatsby・Nuxt・Gridsome・gulp
Override
MUSUBii の SCSS 変数にはすべて !default が付与されており、インポートより前に同名の変数を宣言することで上書きできます。
例えば、デフォルトでは CSS Variables が有効化されておらず、ダークモード対応ができません。有効化する場合は次のように configs よりも先に $option-css-variables: true; を書きます。
// Override
$option-css-variables: true;
// Import
@import "~musubii/src/scss/configs/_import.scss";
CSS Variables を有効化すると、対応していない IE11・Android 4.4 (OS Browser) では色プロパティが認識されなくなります。Ponyfill の導入を検討してください。
その他、プライマリーカラーを全体的に変更・ボタンの class 名をプレフィックス付きに変更・ボタンの角をもっと丸くするなど、様々な調整が可能です。
// Override
$theme-primary: red;
$selector-button: ".c-musubii-button";
$button-border-radius: 12px;
// Import
@import "~musubii/src/scss/configs/_import.scss";
SCSS 変数はコンフィグ・スタイルの各ページを参照してください。
Reduce
MUSUBii の CSS 出力はスタイルごとに設定可能で、例えば $option-generate-alert を false にすると Alert の CSS をすべて削除できます。
// Override
$option-generate-alert: false;
// Import
@import "~musubii/src/scss/configs/_import.scss";
また、一部の CSS は付与するか否かを選べます。例えば $option-add-style-button-focus を false にすると、ボタンのフォーカススタイルだけを削除できます。
// Override
$option-add-style-button-focus: false;
// Import
@import "~musubii/src/scss/configs/_import.scss";
各 SCSS 変数 $option-generate-(xxxx) $option-add-style-(xxxx) は「Option」を参照ください。
Mixin Copy
MUSUBii の スタイルはすべて Mixin で定義されているため、他コンポーネントへの転用が容易です。
例えば「.button.is-plain のスタイルを当てたいけれど WordPress プラグインが生成したタグの class が編集できない」など、実務では HTML タグの構造変更が難しい場面があります。
そこで、MUSUBii に使われているスタイルが登録されている Mixin を使います。
.wpcf7 input[type="submit"] {
@include musubii-style-button();
@include musubii-style-button-plain();
}
これで、.wpcf7 input[type=submit] に MUSUBii の .button .button.is-plain と同じスタイルがあたりました。Mixin は styles の各 SCSS ファイルに含まれているため、利用する場合は事前に対象の SCSS ファイルを読み込んでいる必要があります。
Mixin Mode
$option-mixin-mode を使えば、MUSUBii の CSS を出力せずに Mixin だけ使うことが可能です。例えば、「Vue.js の SFC で MUSUBii のボタンに似たボタンを作りたい」ケースでは次のように記述。
$option-mixin-mode: true;
@import "musubii/src/scss/configs/_import.scss";
@import "musubii/src/scss/styles/elements/_button.scss";
.category-button {
@include musubii-style-button();
@include musubii-style-button-plain();
}