与SCSS

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和萨斯之间的可变范围的差异的制品。 http://blog.freeside.co/post/41774744757/less-vs-sass-variable-scopes