└── scss/
├── _variables.scss ※色、フォントサイズなどの変数を定義するファイル
├── _mixins.scss ※ミックインを定義するファイル
├── _buttons.scss ※ボタンに関するスタイルを定義するファイル
├── _layout.scss ※ページのレイアウトやグリッドレイアウトに関するスタイルを定義するファイル
└── main.scss
モジュールのインポート
_colors.scss
$base-color:#3498db;
_buttons.scss
$base-color:#e74c3c
style.scss
@use 'buttons'; @use 'colors'; .btn { background-color:buttons.$base-color; color:colors.$base-color; }
↓
style.css
.btn { background-color: #e74c3c; color: #3498db; }
おおおお、素晴らしい!これは使いたい^^
ちなみに、mixinとは、よく利用するCSSスタイルを定義して、他の場所でも使いまわせるようにする機能のこと。
引数を使って、関数のように利用することができる。