41

いくつかの異なる「メイン」カラーを使用している Web サイトがあります。一般的な HTML レイアウトは同じままで、コンテンツに応じて色が変わるだけです。

CSSセレクタに応じて色変数を設定できないかと思っていました。このようにして、いくつかの変数を使用して Web サイトのテーマを設定し、Sass に色を塗りつぶさせることができます。

例えば：

$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;

body.class-1 {
  color-default: $color-1;
  color-main: $color-2;
}
body.class-2 {
  color-default: $color-3;
  color-main: $color-4;
}

/* content CSS */
.content {
  background: $color-default;
  color: $color-main;
}

これにはミックスインを使用することを考えていましたが、これを行うためのより良い方法があるかどうか疑問に思っていました。私はSassが得意ではないので、助けていただければ幸いです。

4

8 に答える 8

37

mixinが答えだと思います。(私が書いたように、変数は機能しません。)

@mixin content($color-default, $color-main) {
  background: $color-default;
  color: $color-main;
}

body.class-1 {
  @include content(#444, #555);
}

body.class-2 {
  @include content(#666, #777);
}

その SCSSは次のCSSにコンパイルされます。

body.class-1 {
  background: #444444;
  color: #555555; }

body.class-2 {
  background: #666666;
  color: #777777; }

SCSS ファイルで色の値をグループ化したい場合は、ミックスインと組み合わせて変数を使用できます。

$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;

body.class-1 {
  @include content($color-1, $color-2);
}

body.class-2 {
  @include content($color-3, $color-4);
}
于 2013-08-07T19:46:38.857 に答える
14

本当にハックしたい場合は$scheme1: class1 #333 #444、最初の値が常に名前で、その後にそのスキームのすべての色が続く、のような単一の変数でさまざまな配色を定義することもできます。

その後、次を使用できます@each。

// Define your schemes with a name and colors
$scheme1: class1 #444 #555;
$scheme2: class2 #666 #777;
$scheme3: class4 #888 #999;

// Here are your color schemes
$schemes: $scheme1 $scheme2 $scheme3;

@each $scheme in $schemes {
  // Here are the rules specific to the colors in the theme
  body.#{nth($scheme, 1)} .content {
    background-color: nth($scheme, 2);
    color: nth($scheme, 3);
  }
}

これは次のようにコンパイルされます。

body.class1 .content {
  background-color: #444444;
  color: #555555; }

body.class2 .content {
  background-color: #666666;
  color: #777777; }

body.class4 .content {
  background-color: #888888;
  color: #999999; }

セレクターでbody.class1andを組み合わせたくない場合は明らかに、ミックスインを指定して、上記のコードのようにusing内で呼び出すことができますが、ポイントは、それぞれのルールを書き出す必要がないことです。あなたのクラス。.contentcontent($main, $default)@eachnth

編集Sass で動的に変数を作成または参照し、文字列と変数を SASS を使用して変数にマージすることに関する興味深い回答がたくさんあります。

于 2013-08-08T07:22:37.853 に答える
2

更新: その 2017 年と変数は動作します!

@mixin word_font($page) {
  @font-face {
    font-family: p#{$page};
    src: url('../../static/fonts/ttf/#{$page}.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  .p#{$page} {
   font-family: p#{$page};
  }
}

// Loop and define css classes 
@for $i from 1 through 604 {
 @include word_font($i);
}
于 2017-01-12T05:41:35.253 に答える
1

色ごとに変数を使用したくない場合は、すべての種類の色に対して 1 つの変数を使用できます。ミックスインでは、 で適切な色を選択できますnth。たとえば、色のインデックスを と記述すると1、色変数の最初の色が取得されます。

$colors: #444, #555, #666, #777;

@mixin content($color-default-num, $color-main-num) {
  background: nth($colors, $color-default-num);
  color: nth($colors, $color-main-num);
}

body.class-1 {
  @include content(1, 2);
}
于 2013-08-07T20:31:48.997 に答える
-1

クラスラッパー内でscss変数を単純にオーバーライドできます。

$color1: red;
$color2: yellow;

header { background: $color1; }

.override-class {
  $color1: green;
  header { background: $color1; }
}

私にはうまくいくようです。

于 2016-07-19T14:09:13.163 に答える