Question

我可以在SASS中的if / else条件中设置变量吗？比如说你想为一个页面设置2种配色方案。考虑在身体上设置一个类以处理颜色差异，你可以做以下（用英语编写，不尝试任何正确的语法）：

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

您可以使用功能。像这样：How to dynamically change text color...

@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种颜色方案。一个默认＆amp;只有当“.red”类出现在body标签上时才会出现。你所呈现的内容看起来像我必须为每个类设置变量然后复制.red类。基本上，我希望有一个变量（在本例中为$ 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; }

现在我们可以看到一种模式。

使用mixin可以使用SASS轻松创建此代码：

=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 Variable Scope

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

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

$bg-color: green;

另一方面，局部变量是在选择器内声明的变量。稍后，我们将研究如何定制该行为。但就目前而言，让我们看看我们的第一个例子。

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

@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

SASS变量设置在条件内？

4 个答案: