の組み合わせを使用して@importと@mixinのコンボを使用してスタイルを生成することは可能です。このメソッドは、最小限の繰り返しコードを生成する必要があります。
ファイルの設定方法は次のとおりです。ファイルの一部に
- scss
- themes
- _theme1.scss
- _theme2.scss
- _theme.scss
- styles.scss
_プレフィックスがきれい私たちのビルドを維持するためにCSSにコンパイルされてからそれらを防ぎます。今度は、ファイルの内容を見ていきましょう：
_theme1.scss
$theme-name: 'theme1';
$primary-color: red;
$primary-font-size: 24px;
_theme2.scss
$theme-name: 'theme2';
$primary-color: blue;
$primary-font-size: 12px;
これは単純化しすぎの例であるが、基本的なアイデアを与える必要があります。各テーマファイルには変数のみが含まれます。
_theme.scss
@mixin themestyle() {
body.#{$theme-name} {
p {
color: $primary-color;
font-size: $primary-font-size;
}
.bordered {
border: 3px solid $primary-color;
}
}
}
themestyleミックスインは/themes/_theme*.scssファイルから変数を使用して、テーマごとにすべてのスタイルが含まれています。 body.#{$theme-name}は、変数の現在の値に応じて、body.theme1またはbody.theme2のようなセレクタを作成します。
このデモでは、pタグでスタイリングしていますが、これはサイトのすべての要素/セレクタに簡単に拡張できます。重要なことは、すべてのスタイルがbody.#{$theme-name}セレクタの内側にある必要があることです。
最終的には、DRY部分です。styles.scssファイルは各テーマファイルをインポートし、mixinを呼び出して各テーマのスタイルを生成します。それはループまたはミックスイン内@importすることはできませんので
styles.scss
@import 'themes/theme';
/* Theme 1 Styles */
@import 'themes/theme1';
@include themestyles();
/* Theme 2 Styles */
@import 'themes/theme2';
@include themestyles();
繰り返し@import/@includeが必要とされる、またはこれがもう少し最適化することができます。
/* Theme 1 Styles */
body.theme1 p {
color: red;
font-size: 24px; }
body.theme1 .bordered {
border: 3px solid red; }
/* Theme 2 Styles */
body.theme2 p {
color: blue;
font-size: 12px; }
body.theme2 .bordered {
border: 3px solid blue; }
これらのテーマは、今<body class="theme1">または<body class="theme1">のように、bodyタグにクラスを追加することで実現することができます：styles.scss一度
は出力がされるコンパイルされます。
セットアップを示すCloud9 projectです。