Css 在条件内设置SASS变量？

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

---

我可以这样做吗？

是的，这是可能的：

$parent: true
$foo: red

@if $parent == true 
  $foo: blue

p
  color: $foo

---

但是，值得注意的是，您将无法使用条件来检查SASS中父元素（或任何其他元素）的属性（请参阅来自SASS lead的帖子），因此psuedo代码中的父类必须存储在SASS

$变量中

这是您在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;
}

但看起来你在尝试应用一个糟糕的解决方案。请描述您试图实现的目标，而不是如何实现未知任务的解决方案。看

UPD

---

我想我想要达到的目标很清楚。。。但为了进一步解释，我想要一页有两种颜色方案。一个是默认值&仅当类“.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
  +main-color

#main
  +main-color

+theme-styles

body.red
  +theme-styles(red)

您应该首先提供这样的代码，我不得不盲目猜测，这是一种耻辱

此代码可以如下显示（具有相同的功能）：

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

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

=main-color()
  background-color: black

  body.red &
    background-color: red

然后像这样应用它：

header {
  background-color: black; }

#main {
  background-color: black; }

body.red header {
  background-color: red; }

body.red #main {
  background-color: red; }

header
  +main-color

#main
  +main-color

+theme-styles

body.red
  +theme-styles(red)

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

=theme-styles($main-color: black)
  header
    background-color: $main-color

  #main
    background-color: $main-color

然后像这样应用它：

header {
  background-color: black; }

#main {
  background-color: black; }

body.red header {
  background-color: red; }

body.red #main {
  background-color: red; }

header
  +main-color

#main
  +main-color

+theme-styles

body.red
  +theme-styles(red)

事实上，您可以生成多个主题：

+theme-styles

@each $color in red blue green
  body.#{$color}
    +theme-styles($color)

---

演示：

您可以使用该函数。像这样：

@函数集颜色（$class）{
@如果（$class==红色）{
@返回#f00；
}@else{
@返回#000；
}
}
$main color=设置颜色（$parent class）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};
}

你可以阅读这篇文章
你误用了
！默认
标志。此标志表示“仅当变量没有值时才为其设置值”。还请注意，海报要求的是“如果父类为红色”，而不是“如果另一个变量的颜色为红色”。：PI认为我想要达到的目标非常明确。。。但为了进一步解释，我想要一页有两种颜色方案。一个是默认值&仅当类“.red”出现在body标记上时才有一个。您所展示的内容看起来像是我必须为每个类设置变量，然后为.red类复制变量。基本上，我希望有一个变量（在本例中是$main color），设置为默认值，然后在.red类中重置。有道理？