CSS SASS 变量设置在条件内？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17156966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SASS variables set inside of conditional?
提问by ivanwright
Can I set variables inside of an if / else conditional in SASS? Say for instance you wanted to have 2 color schemes for a page. Thinking in terms of setting a class on the body to handle the color differences, could you do the following (written for English, not attempting any kind of correct syntax):
我可以在 SASS 的 if / else 条件中设置变量吗？比如说你想为一个页面使用 2 种配色方案。考虑在身体上设置一个类来处理颜色差异，您可以执行以下操作（为英语编写，不尝试任何类型的正确语法）：
If parent class is red then $main-color = #f00 else $main-color = #000
Can I do this?
我可以这样做吗？
回答by Nick Tomlin
Yes, this is possible:
是的，这是可能的：
$parent: true
$foo: red
@if $parent == true
$foo: blue
p
color: $foo
It's worth noting, however, that you will not be able to use a conditional to check a propertyon a parent element (or any other element) in SASS (see thispost from the SASS lead), so parent classin your psuedo code would have to be stored in a sass $variable.
但是，值得注意的是，您将无法使用条件来检查SASS 中父元素（或任何其他元素）的属性（请参阅SASS 领导的这篇文章），因此parent class在您的伪代码中必须存储在 sass 中$variable。
回答by Vitaliy Andrusishyn
You can use function. Like this: How to dynamically change text color...
您可以使用功能。像这样：如何动态更改文本颜色...
@function set-color($class) {
@if ($class == red) {
@return #f00;
} @else {
@return #000;
}
}
$main-color = set-color($parent-class);回答by Andrey Mikhaylov - lolmaus
This is how you do it in SASS:
这就是你在 SASS 中的做法：
.some-element
$main-color: black
color: $main-color
.red > &
$main-color: red
color: $main-color
Resulting CSS:
结果 CSS：
.some-element {
color: black;
}
.red > .some-element {
color: red;
}
But it looks like you're trying to apply a bad solution. Please describe what you're trying to achieve rather than how to implement a solution to an unknown task. See XY problem.
但看起来您正在尝试应用一个糟糕的解决方案。请描述您要实现的目标，而不是如何实施未知任务的解决方案。请参阅XY 问题。
UPD
UPD
I thought what I was trying to achieve was pretty clear... but to explain further, I want 2 color schemes for a page. One that's default & one only if the class ".red" is present on the body tag. What you are presenting looks like I would have to set variables for each class and then duplicate for the .red class. I was looking to, basically, have 1 variable (in this case $main-color) that is set for the default and then reset inside the .red class. Make sense?
我认为我想要实现的目标非常清楚......但为了进一步解释，我想要一个页面的 2 个配色方案。一个是默认值，一个只有当 body 标签上存在类“.red”时。您呈现的内容看起来像我必须为每个类设置变量，然后为 .red 类复制。基本上，我希望有 1 个变量（在本例中为 $main-color）设置为默认值，然后在 .red 类中重置。有道理？
In SASS there is no way of setting a variable based on whether current code is wrapped in a class or not. You only can declare the variable manually.
在 SASS 中，无法根据当前代码是否包含在类中来设置变量。您只能手动声明变量。
You should also understand that what SASS does is generating CSS, nothing more. So let's start from the CSS you would like to have. I assume it's something like this:
您还应该了解 SASS 所做的只是生成 CSS，仅此而已。因此，让我们从您想要拥有的 CSS 开始。我假设它是这样的：
header {
background-color: black; }
#main {
background-color: black; }
body.red header {
background-color: red; }
body.red #main {
background-color: red; }
You should have provided such code in the first place and it's a shame that i have to make blind guesses.
你应该首先提供这样的代码，很遗憾我不得不盲目猜测。
This code can be displayed like this (with the same functionality):
此代码可以像这样显示（具有相同的功能）：
header {
background-color: black; }
body.red header {
background-color: red; }
#main {
background-color: black; }
body.red #main {
background-color: red; }
Now we can see a pattern.
现在我们可以看到一个模式。
This code can be easily created with SASS using a mixin:
可以使用混入使用 SASS 轻松创建此代码：
=main-color()
background-color: black
body.red &
background-color: red
Then you apply it like this:
然后你像这样应用它：
header
+main-color
#main
+main-color
Another option is to create a mixin that contains all the styling. This is probably an optimal solution as it contains least duplication.
另一种选择是创建一个包含所有样式的 mixin。这可能是最佳解决方案，因为它包含最少的重复。
=theme-styles($main-color: black)
header
background-color: $main-color
#main
background-color: $main-color
Then you apply it like this:
然后你像这样应用它：
+theme-styles
body.red
+theme-styles(red)
In fact, you can generate multiple themes:
实际上，您可以生成多个主题：
+theme-styles
@each $color in red blue green
body.#{$color}
+theme-styles($color)
回答by Elbaz
Sass Variable Scope
Sass 变量范围
Sass supports two types of variables: local variables and global variables.
Sass 支持两种类型的变量：局部变量和全局变量。
By default, all variables defined outside of any selector are considered global variables. That means they can be accessed from anywhere in our stylesheets. For instance, here's a global variable:
默认情况下，在任何选择器之外定义的所有变量都被视为全局变量。这意味着可以从我们样式表的任何位置访问它们。例如，这是一个全局变量：
$bg-color: green;
On the other hand, local variables are those which are declared inside a selector. Later, we'll examine how we can customize that behavior. But for now, let's see our first example.
另一方面，局部变量是在选择器中声明的变量。稍后，我们将研究如何自定义该行为。但现在，让我们看看我们的第一个例子。
Here we define a mixin and then the btn-bg-color variable within it. This is a local variable, and is therefore visible only to the code inside that mixin:
这里我们定义了一个 mixin，然后是其中的 btn-bg-color 变量。这是一个局部变量，因此仅对该混合中的代码可见：
@mixin button-style {
$btn-bg-color: lightblue;
color: $btn-bg-color;
}
Conclusion
结论
you can use this code to make if directive change in your variable
您可以使用此代码在变量中进行 if 指令更改
$left: left;
$right: right;
@if $dir == rtl {
$left: right;
$right: left;
}
.pull-left{
float:#{$left};
}
you can read this article Sass Variable Scope
你可以阅读这篇文章Sass 变量作用域
