SASS を使用してレスポンシブ サイトを作成しています。現時点では、私のコードはいくつかのパーシャルに構造化されています。
- 一部のデフォルトの色とサイズ
- 全体のレイアウト
- 各要素の部分
この編成の結果として、メディア クエリが結果として得られる CSS を通じて何度も宣言されることになることに気付きました。その結果、現在の構造を維持するためにいくつかのアイデアを検討してきましたが、最終的にはより単純なコードになりました。
私の考えは次のようになります。
- 変数には、パーシャルのリストが含まれています
@import - 変数には、メディア クエリ サイズのリストが含まれます (常に最小幅を使用するため、このリストは数字の文字列にすぎません)
- 各部分 (
_footer.scss,_header.scss) には@mixin、コンテンツ フッター、コンテンツ ヘッダーなどのタイトルが含まれます。 - それら
@mixinは、メディアクエリに関連する単一の変数を取り、その条件に適したコードを出力します。 style.scss@importリストから各パーシャルを取得し、- 次に、関数とメディア サイズを呼び出して、各メディア サイズとパーシャルをそれぞれ循環します。
上記のプロセスは、このような結果になります...
@import 'footer';
@import 'header';
@include content-footer(0);
@include content-header(0);
@include content-footer(320);
@include content-header(320);
@include content-footer(640);
@include content-header(640);
等..
私の質問はこれです - どうすれば動的にタイトルを付けることができ@mixinますか? 動作するはずのようcontent-#{$partial}に見えますが、動作しません。
これが機能しない場合は、毎回パーシャルを再インポートできると思いますが、これはやり過ぎのようです...
@import 'footer';
@include content(0);
@import 'header';
@include content(0);
@import 'footer';
@include content(320);
@import 'header';
@include content(320);
@import 'footer';
@include content(640);
@import 'header';
@include content(640);