SASS变量设置在条件内？

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中的父元素(或任何其他元素)上的属性(请参阅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);