SASSのif/else条件の内部に変数を設定できますか？たとえば、ページに2つのカラースキームが必要だったとします。色の違いを処理するために、身体にクラスを設定するという点で考えると、あなたは（正しい構文のいずれかの種類をしようとしていない、英語のために書かれた）は、次の行うことができます：条件の中にSASS変数が設定されていますか？
If parent class is red then $main-color = #f00 else $main-color = #000
は、私がこれを行うことができますか？
はい、これが可能である：
$parent: true
$foo: red
@if $parent == true
$foo: blue
p
color: $foo
それはあなたが親要素のプロパティをチェックするために、条件を使用することができなくなること、しかし、注目に値します（SASSのリードのthisポストを参照）ので、擬似コード内のparent classは、$variableに格納する必要があります。結果のCSS
.some-element
$main-color: black
color: $main-color
.red > &
$main-color: red
color: $main-color
：
これは、あなたがSASSでそれを行う方法です
.some-element {
color: black;
}
.red > .some-element {
color: red;
}
しかし、あなたが悪いのソリューションを適用しようとしているように見えます。未知の課題に対するソリューションの実装方法ではなく、達成しようとしていることを説明してください。 XY problemを参照してください。私はかなりはっきりしていた達成しようとしていた...しかし、さらに説明するために、何を考え
UPDは、私は、ページの2つのカラースキームをしたいです。 1つはbodyタグにクラス ".red"がある場合のみ、デフォルトの&です。あなたが提示しているものは、各クラスの変数を設定し、.redクラスのために複製する必要があるように見えます。私は、基本的に、1つの変数（この場合は$ main-color）をデフォルトに設定し、.redクラス内でリセットすることを考えていました。理にかなっている？
SASSでは、現在のコードがクラスにラップされているかどうかに基づいて変数を設定する方法はありません。変数は手動でのみ宣言できます。
また、SASSがCSSを生成することは何も分かりません。それでは、あなたが望むCSSから始めましょう。私はそれがこのようなものだと仮定します。
header {
background-color: black; }
#main {
background-color: black; }
body.red header {
background-color: red; }
body.red #main {
background-color: red; }
あなたが最初の場所でこのようなコードを提供している必要があり、それは私が盲目の推測を行う必要があり残念です。
このコードは（同じ機能を持つ）は、このように表示することができます。
header {
background-color: black; }
body.red header {
background-color: red; }
#main {
background-color: black; }
body.red #main {
background-color: red; }
今、私たちはパターンを見ることができます。
このコードは簡単にミックスインを使用してSASSを使用して作成することができます。
=main-color()
background-color: black
body.red &
background-color: red
次に、あなたがこのようにそれを適用します。
header
+main-color
#main
+main-color
別のオプションすべてのスタイルが含まれているミックスインを作成することです。これはおそらく、重複を最小限にする最適な解決策です。
=theme-styles($main-color: black)
header
background-color: $main-color
#main
background-color: $main-color
あなたはこのようにそれを適用後：実際には
+theme-styles
body.red
+theme-styles(red)
、あなたが複数のテーマを生成することができます。
+theme-styles
@each $color in red blue green
body.#{$color}
+theme-styles($color)
私は達成しようとしているものはかなり明確だと思っていましたが、さらに説明するために、ページに2つのカラースキームが必要です。 1つは、bodyタグにクラス ".red"が存在する場合にのみ、デフォルトと1つです。 あなたが提示しているのは、各クラスの変数を設定してから、.redクラスを複製する必要があるようです。私は、基本的に、1つの変数（この場合は$ main-color）をデフォルトに設定し、.redクラス内でリセットすることを考えていました。 意味がありますか？ – ivanwright
@ivanwright私の投稿を更新しました。 –
あなたが機能を使用することができます。このように：ローカル変数とグローバル変数：How to dynamically change text color...
@function set-color($class) {
@if ($class == red) {
@return #f00;
} @else {
@return #000;
}
}
$main-color = set-color($parent-class);Sassの変数のスコープ
サスは、変数の2種類をサポートしています。
デフォルトでは、セレクタの外で定義されたすべての変数はグローバル変数とみなされます。つまり、スタイルシートのどこからでもアクセスできます。例えば、ここにグローバル変数です：一方
$bg-color: green;
、ローカル変数は、セレクタ内で宣言されるものです。後で、その動作をカスタマイズする方法について検討します。しかし今のところ、最初の例を見てみましょう。
ここではmixinとその中のbtn-bg-color変数を定義します。これは、ローカル変数あり、そして唯一のそのミックスイン内部コードすることが表示されている：あなたの変数
でディレクティブ変更した場合、あなたが作るためにこのコードを使用することができます@mixin button-style {
$btn-bg-color: lightblue;
color: $btn-bg-color;
}
結論
$left: left;
$right: right;
@if $dir == rtl {
$left: right;
$right: left;
}
.pull-left{
float:#{$left};
}
この記事を読むことができますSass Variable Scope
'！default'フラグを悪用します。このフラグは、「値がない場合にのみ変数に値を設定する」ことを意味します。 –
ああ、あなたは絶対に正しいです。一定。 –
また、ポスターが「親クラスが赤であるかどうか」を要求しています。「別の可変色が赤であれば」ではありません。 ：P –