Question

有谁知道这是否可能：

我希望我的品牌颜色为$brand: #00cccc;

但是，我想在一个页面上更改它，并且该页面由其正文上的类定义。

body class="purple"

现在我的想法是认为这是理想的：

body.$class { 
    @if $class == 'purple'
    { 
        $brand = #ff0033;
    }
    @else 
    {
        $brand = #00cccc;
    }
}

但这根本不是正确的语法。

这可以用类似的方式完成吗？

Answer 1

我相信你在找这样的东西？

@each $class in purple, none {
  $brand: #00cccc;
  $selector: 'body';
  @if $class == purple {
    $brand: #ff0033;
    $selector: 'body.' + $class;
  }
  #{$selector}{
    /* Use $brand */
  }
}

Answer 2

我不相信你可以为此创建一个@if语句。在LESS中，您可以在body.purple内重新声明相同的变量，它只会在该块内部应用，但在Sass / Scss中重新声明变量将全局更改它。这可能不太理想，但您可以重新声明变量两次，一次在顶部为紫色，一次在底部将其设置为默认值。

<强> SCSS

// Global Variables
$blue: #0cc;
$purple: #f03;
$brand: $blue;

body {
    color: $brand; // blue
}

.purple {
    $brand: $purple;

    color: $brand; // now purple
    // all other styles

    $brand: $blue;
}

.test {
    color: $brand; // back to blue
}

css输出

body {
  color: #00cccc;
}

.purple {
  color: #ff0033;
}

.test {
  color: #00cccc;
}

这是一篇关于LESS和Sass之间可变范围差异的文章。 http://blog.freeside.co/post/41774744757/less-vs-sass-variable-scopes

SCSS的条件语句

2 个答案: