與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