在条件内设置 SASS 变量？

Question

我可以在 SASS 的 if / else 条件中设置变量吗？例如，假设您希望一个页面有 2 个配色方案。考虑在 body 上设置一个类来处理颜色差异，您可以执行以下操作（为英文编写，不尝试任何正确的语法）：

If parent class is red then $main-color = #f00 else $main-color = #000

我可以这样做吗？

Answer 1

是的，这是可能的：

$parent: true
$foo: red

@if $parent == true 
  $foo: blue

p
  color: $foo

codepen

然而，值得注意的是，您将无法使用条件来检查 SASS 中父元素（或任何其他元素）上的 属性（参见 this 来自SASS 领导），因此您的伪代码中的 parent class 必须存储在 sass $variable 中。

Answer 2

你可以这样使用函数：

@function set-color($class) {
  @if ($class == red) {
    @return #f00;
  } @else {
    @return #000;
  }
}
$main-color = set-color($parent-class);

Answer 3

这就是你在 SASS 中的做法：

.some-element
  $main-color: black
  color: $main-color

  .red > &
    $main-color: red
    color: $main-color

生成的 CSS：

.some-element {
  color: black;
}
.red > .some-element {
  color: red;
}

但您似乎在尝试应用错误的解决方案。请描述您要实现的目标，而不是如何为未知任务实施解决方案。见XY problem。

UPD

我认为我想要实现的目标很清楚......但为了进一步解释，我想要一个页面的 2 个配色方案。一个是默认的，一个只有在 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 使用 mixin 轻松创建此代码：

=main-color()
  background-color: black

  body.red &
    background-color: red

然后你像这样应用它：

header
  +main-color

#main
  +main-color

另一种选择是创建一个包含所有样式的 mixin。这可能是一个最佳解决方案，因为它包含最少的重复。

=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)

演示：http://sassbin.com/gist/5812941/

Answer 4

Sass 变量范围

Sass 支持两种类型的变量：局部变量和全局变量。

默认情况下，在任何选择器之外定义的所有变量都被视为全局变量。这意味着可以从我们样式表中的任何位置访问它们。例如，这是一个全局变量：

$bg-color: green;

另一方面，局部变量是在选择器中声明的变量。稍后，我们将研究如何自定义该行为。但现在，让我们看看我们的第一个示例。

这里我们定义了一个 mixin，然后在其中定义了 btn-bg-color 变量。这是一个局部变量，因此仅对该 mixin 内的代码可见：

@mixin button-style {
    $btn-bg-color: lightblue;
    color: $btn-bg-color;
}

结论

您可以使用此代码在变量中更改 if 指令

    $left: left;
    $right: right;

@if $dir == rtl { 
     $left: right;
    $right: left;
}
.pull-left{
   float:#{$left};
}

你可以阅读这篇文章Sass Variable Scope