Refactoring variable, function, mixin layer.

[inc2734]

サイト全体で管理するべきグローバル変数・関数と、その場だけで良いローカルな変数・関数を整理したい。ミックスインもファイル構成を整理する（できれば #48 も可能なように）

[inc2734]

ミックスインはそれぞれ独立して使えるように、変数は !default でもっておき、Basis で中で使うときはデザインのバランスが崩れないように Basis のグローバル変数で上書きする形が良いかも。

[torounit]

+1

[inc2734]

とりあえずのアーキテクチャ案。

• /basis-setting [各コンポーネントの変数を上書きする変数]
  • _basis-setting.scss
  • _typography.scss
  • etc...
• /require [Basis の各コンポーネントに必須の関数・ミックスイン]
  • /function
  • /mixin
• /mixin [各コンポーネントの実体。ミックスインライブラリとして利用できる用]
  • /object
    • /component
    • /utility
• /foundation [HTML 要素のデフォルトスタイル]
• /class [CSS フレームワークとして動作させるための各クラス]
  • /object
    • /component
    • /utility
• basis.scss

[inc2734]

/require とか作っちゃったら結局そこまでモジュラブルじゃなくない…。変数も /require に入れちゃいたくなるし。それならいっそ /require 無くして /basis-setting に /function、/mixin を入れて各コンポーネントで変数とかミックスイン使ってる部分全てローカル変数かしたほうが良さそう。変数の二重定義がくそめんどくさいのが問題。

[torounit]

そもそもこれ大まじめにやるなら、sassのmixin集は別に切り出してCSSの設計とは別のレイヤーとして考えた方が良いかも。

[inc2734]

CSS フレームワーク、Sass ミックスインライブラリ、各モジュールの単体利用、どのパターンでも使えるようにしようとすると必ずどこかで重複がでてくるので管理が大変ですね。Bourbon の設計とかも参考にしてみたいと思います。考えているうちによくわからなくなってきました…。

[torounit]

http://refills.bourbon.io/ に至るまでのアプローチは綺麗ですねぇ。
Mixin自体はセレクターに依存しないはず。ということはCSSのアーキテクチャーとは別物！って開き直るとわかりやすいのかなーどうなのかなー

[inc2734]

僕的には便利ミックスインを提供する気は全然なくて、各コンポーネントのスタイルをオリジナルのクラス名で使いたいとか、単独のコンポーネントだけ取り出して使いたい、とかを想定しているので、そのへんて設計に違いが出てくるかなとは思います。（その想定の需要あるの？な気はしてきる…）

[inc2734]

Basis には「タブ」とか「ドロワー」とか、最小のコンポーネントよりちょっと大きめのコンポーネントは入ってなくて（グリッドシステムはあるけど…）、それ単体を抜き出して使いたいという需要は無いだろうから、その需要は無視した構成にしたほうがシンプルで良さそうな気がしてきた。