search

qrac / musubii

Simple CSS Framework for JP
https://musubii.qranoko.jp
149 stars 6 forks source link

Mixinを使ったSCSSの転用機能を追加 #226

Closed qrac closed 5 years ago

qrac commented 5 years ago

構造を変えられないコンポーネントにSCSSのMixinを使ってMUSUBiiのCSSをコピーする機能。

例えば、WordPressのメニューはaタグにclassをつけるのが面倒。.button のスタイルを .menu-item > a にコピーできれば楽になる。

また、Vue.jsやReactのコンポーネントなどで、役割を分けるために独自のclass名を使うけどほぼ同じCSSという場合など。

qrac commented 5 years ago

v7の変更ボリュームが大きいのでv8で検討。

qrac commented 5 years ago

実作業で困っているのでv7に盛り込むことを再検討。

qrac commented 5 years ago

mixinで設定するならグローバルで読み込めるようにするか個別でインポートさせるか、どちらにせよそのファイル内にスタイルの出力が混じってるとまずい。

qrac commented 5 years ago

WordPressなど単一のCSSファイルを生成する場合はそのままで良いが、VueやReactの場合はグローバルに読み込むとスタイルが重複する。

qrac commented 5 years ago

Vue.jsアイデア

<style lang="scss">
@use "musubii/src/styles/components/_button.scss" with ($use-mixin-mode: true);

.category-button {
  @include musubii-style-button-outline();
}
</style>

Sassの @use がβの間は↓

<style lang="scss">
$use-mixin-mode: true;
@import "musubii/src/styles/components/_button.scss";

.category-button {
  @include musubii-style-button-outline();
}
</style>
qrac commented 5 years ago

v7.0.0から適応。