SASS（地図）を使用してテーマを作成する

Question

私はSASSを初めて使いました。ユーザーにウェブサイトのさまざまなテーマを選択できるようにしています。

$theme-map: ( 
    main-theme: (
     primary: #007991, 
     secondary: #55D3AE, 
     tertiary: #D35555, 
     gradientFirstColour: #007991, 
     gradientSecondColour: #34EBE9 
), 
    test-theme: (
     primary: #1abc9c, 
     secondary: #e67e22, 
     tertiary: #c0392b, 
     gradientFirstColour: #2c3e50, 
     gradientSecondColour: #f1c40f 
    ) 
) 

は今、私はどのようにこれらをループするかわからないし、その後、特定の要素に適用します：私はこのようになります。マップを作成しました。例：メインテーマを選択して、ボタンの背景にプライマリカラー、divの背景にセカンダリカラー、テストテーマを選択したときと同じものを使用したいとします。誰か助けてくれますか？

ありがとうございます！

Answer 1

これを実装する方法はたくさんあると思いますが、私は過去に似たようなことを経験していますので、ここに実装します。

ステップ1

あなたのケースmain.cssとtest.cssに、あなたが持っているさまざまなテーマについて複数のCSSの出力ファイルを作成します。たとえば、theme-main.cssとtheme-test.cssのように、名前の前に接頭辞を付けて分かりやすくすることもできます。

リセット、マージン、タイポグラフィなどの一般的なスタイルを1つのファイルに保存することをお勧めします。具体的には、global.cssのようにして、別のファイルにテーマを追加してください。これらのCSSファイルをHTMLの上に重ねてロードします。

メインテーマ：

<link href="global.css" rel="stylesheet" type="text/css"> 
<link href="theme-main.css" rel="stylesheet" type="text/css"> 

とテストテーマ：プロジェクトのサスフォルダに

<link href="global.css" rel="stylesheet" type="text/css"> 
<link href="theme-test.css" rel="stylesheet" type="text/css"> 

、global.scssに沿って、theme-main.scssとtheme-test.scssを作成します。

ステップ2

異なる部分サスファイルにあなたのテーマカラーを移動し、変数の名前が同じであることを確認してください

。個人的には、プロジェクトのSassフォルダ内に、CSS出力ファイルと一致する名前のフォルダを作成し、そこにこれらのファイルを配置します。

あなたの場合は、Sassフォルダ内に_theme-mainと_theme-testというフォルダを作成します。各フォルダ内のファイルを作成し、それらを次の内容の両方_variables.scssに名前を付ける：

_theme-main/_variables.scssで：

$colors: (
    primary: #007991, 
    secondary: #55D3AE, 
    tertiary: #D35555, 
    gradientFirstColour: #007991, 
    gradientSecondColour: #34EBE9 
); 

そして_theme-test/_variables.scss中：

$colors: (
    primary: #1abc9c, 
    secondary: #e67e22, 
    tertiary: #c0392b, 
    gradientFirstColour: #2c3e50, 
    gradientSecondColour: #f1c40f 
); 

ステップ3

ロードあなたがそれらを必要とするファイルの必要な変数。あなたのファイルtheme-main.scssで

、置く：

@import '_theme-main/variables'; 

そして、あなたのファイルtheme-test.scssで、置く：

@import '_theme-test/variables'; 

をこれまでのところ、これは別のテーマファイルが別の値で動作することを保証します同じ変数。実際には、変数$colorsは、これら2つのテーマファイルで同じものと呼ばれていますが、実際は同じではありません。

ステップ4

あなたは上のテーマを適用したいスタイルで部分サスファイルを作成します。

我々はすでに_theme-testフォルダに_theme-mainフォルダ内のtheme-main.scssの依存関係とtheme-test.scssの依存関係を入れているので、私は個人的にこのパターンを打破したいとは思わないでしょうので、私はsharedフォルダまたは同様のものを作成し、部分的にサスを置きます複数のSassファイルにインポートされたファイルもちろんこれを省略することもできますが、プロジェクトをより保守性のあるものにするのに役立ちます。

あなたの例では、_styles.scssという名前の部分的なSassファイルを作成し、sharedフォルダに入れます。

button { 
    background-color: map-get($colors, primary); 
} 

div { 
    background-color: map-get($colors, secondary); 
} 

そして、この部分ファイルをテーマファイルにインポートするだけで済みます。あなたのファイルで

theme-main.scss、置く：

@import '_theme-main/variables'; 
@import 'shared/styles'; 

そして、あなたのファイルtheme-test.scssで、置く：

@import '_theme-test/variables'; 
@import 'shared/styles'; 

を私はミスをしなかった場合は、お使いの出力CSSファイルは次のようになります。

theme-main.css：

：

button { 
    background-color: #1abc9c; 
} 

div { 
    background-color: #e67e22; 
} 

は、あなたがこの便利なやご不明な点や懸念がある場合は見つけた場合、私に教えてください。