v7.0.0

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

フレームワークによっては効率的な使い方がありますので、各ページを参考にしてください。

例:NextGatsbyNuxtGridsomegulp

Override

MUSUBii の SCSS 変数にはすべて !default が付与されており、インポートより前に同名の変数を宣言することで上書きできます。

例えば、デフォルトでは CSS Variables が有効化されておらず、ダークモード対応ができません。有効化する場合は次のように configs よりも先に $option-css-variables: true; を書きます。

// Override
$option-css-variables: true;

// Import
@import "~musubii/src/scss/configs/_import.scss";
Warning

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-alertfalse にすると Alert の CSS をすべて削除できます。

// Override
$option-generate-alert: false;

// Import
@import "~musubii/src/scss/configs/_import.scss";

また、一部の CSS は付与するか否かを選べます。例えば $option-add-style-button-focusfalse にすると、ボタンのフォーカススタイルだけを削除できます。

// 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();
}

Sources