20

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

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

我可以这样做吗？

4

4 回答 4

14

是的，这是可能的：

$parent: true
$foo: red

@if $parent == true 
  $foo: blue

p
  color: $foo

codepen

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

于 2013-06-17T21:43:57.250 回答
11

您可以像这样使用该功能：

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

于 2016-01-26T10:15:07.157 回答
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 问题。

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/

于 2013-06-18T08:57:17.670 回答
0

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 变量范围

于 2017-09-25T11:55:54.667 回答