SCSSカスタマイズの再設計

qrac commented 5 years ago

実務での利用を楽にするために npm install からのカスタマイズ方法を簡単にしていく。想定する制作スタイルは4つ。

Static（gulp Nunjucks + gulp SCSS）：受託WebサービスUIテンプレ開発用
WordPress（php + gulp SCSS）：受託WordPress開発用 ※LaravelのBladeは検討中
Vue.js（Nuxt, Vue.jsそのまま, VuePress...はもう使わないかも）：自前サイト・Web App開発用
React（Gatsby, Reactそのまま...はほぼ使わない）：自前サイト開発用

考慮する点としてあげられるものは以下。

4つのスタイルでの使い方をできるだけ似せたい
分割された多数のSCSSファイルをでまとめてImportできる方が良いか
Vue.js・Reactはコンポーネント管理ができるので分割して読み込んでみたい
- Layoutで全てを読み込めば重複しないがコンポーネントで読み込むことも考えてみたい
- 他のフレームワークはビルド後のCSSファイル1つを読み込んでるパターンが多い
変数が膨大になってしまっているがまとめることや短くすることはできないか

qrac commented 5 years ago

変数は一括変更と、割り込んで個別に変更する両パターンを想定する。

例：線の色を一括で薄くしつつ input だけ濃くするなど

qrac commented 5 years ago

MUSUBiiのSCSSは shitajicss moftone sass-dashi をnode_modulesから読み込んでいるため、musubii.scss 1ファイルを読み込んで完結させることはできない。

qrac commented 5 years ago

最低限のImportで完結できるようにした。

@import "shitajicss/src/scss/_shitaji.scss";
@import "moftone/src/scss/tone/_moftone.scss";
@import "sass-dashi/src/scss/_dashi.scss";
@import "_configs.scss";
@import "_components.scss";

Vue.jsなどでグローバル変数を使い回す場合にも、変数系とコンポーネントを分けてImportできる。

qrac commented 5 years ago

セッティング項目を絞り込んで、最小限のSCSS設定で全体の色を変更できるようにした。MOFTONE使用時の初期値は以下。

$theme-primary: #37B0BE;
$theme-info: #37ADD7;
$theme-success: #2CA52C;
$theme-warning: #EC9213;
$theme-danger: #DB5757;

$theme-focus-border-color: #37ADD7;
$theme-focus-shadow-color: #15B5EF;

$theme-light-background-color: #FFFFFF;
$theme-light-text-color: rgba(0, 0, 0, 0.7);

$theme-dark-background-color: #212121;
$theme-dark-text-color: rgba(255, 255, 255, 0.87);

これで、テーマカラー（Light・Dark）の大部分は変更可能。もっと細かくSCSSで変更することもできるが、そこまではドキュメント化しない。

qrac commented 5 years ago

Alpha版にて反映。

qrac commented 5 years ago

全てのスタイルを変数でON/OFFできるようにする。

qrac commented 5 years ago

Alpha版にて反映。

qrac commented 4 years ago

v7.0.0-alpha.42 → v7.0.0 #235 アルファ版から大きく変わったのでドキュメントを作り直す。

qrac / musubii

SCSSカスタマイズの再設計 #163