1

有谁知道这是否可能：

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

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

body class="purple"

现在我的想法是，这将是理想的：

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

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

这是可以以类似方式完成的事情吗？

4

2 回答 2

3

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

@each $class in purple, none {
  $brand: #00cccc;
  $selector: 'body';
  @if $class == purple {
    $brand: #ff0033;
    $selector: 'body.' + $class;
  }
  #{$selector}{
    /* Use $brand */
  }
}
于 2013-02-21T11:34:06.277 回答
0

我不相信您可以为此创建@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

于 2013-02-19T06:17:17.427 回答