web-dev-qa-db-ja.com

セレクターに応じてSassで変数を設定します

いくつかの異なる「メイン」カラーを使用しているウェブサイトを持っています。一般的な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にはそれほど向いていないので、どんな助けでも感謝します。

cssvariablessass
26
Jrn

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ファイルで色の値をグループ化する場合は、mixinとともに変数を使用できます。

$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);
}
23
Rory O'Kane

本当にハックしたい場合は、$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.class1と.contentを組み合わせたくない場合は、上記のコードのようにnthを使用して、ミックスインcontent($main, $default)を指定し、@each内で呼び出すことができます。 't haveは、各クラスのルールを書き出します。

[〜＃〜] edit [〜＃〜]Sassでの変数の動的な作成または参照に関する興味深い回答がたくさんあります。 および SASS を使用して、文字列と変数を変数にマージします。

9
Elise

更新：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);
}
2
Naveed

アンパサンド親セレクターを使用するミキシングを作成することもできます。 http://codepen.io/juhov/pen/gbmbWJ

@mixin color {
  body.blue & {
    background: blue;
  }
  body.yellow & {
    background: yellow;
  }
}
1
Juho Valtonen

各色に変数を使用したくない場合は、すべての種類の色に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);
}
1
Tim Hartmann

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

$color1: red;
$color2: yellow;

header { background: $color1; }

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

私のために働くようです。

0
Don Townsend

私にとって、私の問題に対する明確な答えは、マップのマップを作成し、次のようにそれらをループすることでした。

$pallettes: (
  light-theme: (
    container-color: red,
    inner-color: blue,
  ),
  dark-theme: (
    container-color: black,
    inner-color: gray,
  ),
);

@each $pallette, $content in $pallettes {
  .main.#{$pallette} {
    background-color: map-get($content, container-color);
    .inner-div {
      background-color: map-get($content, inner-color);
    }
  }
}
0
Francesco Meli