在SASS/SCSS中定義變量覆蓋

我之前使用過sass，並且有一個問題與我認爲sass中可能或應該存在的功能有關。在SASS/SCSS中定義變量覆蓋

是它在所有可能做這樣的事情，以及如何：

$base-color: #ffffff; 
.pink { 
    $base-color: #ec008c; 
} 
.green { 
    $base-color: #a4d20e; 
} 
a, .pink a, .green a { 
    color: $base-color; 
}

這將意味着我可以給一個類.pink到<body>元素，這將使該頁面「中的所有<a>元素粉」。這雖然是一個簡單的例子，看起來像是SASS應該做的事情。

這意味着上述SCSS將彙編所以像這樣：

a { 
    color: #ffffff; 
} 
.pink a { 
    color: #ec008c; 
} 
.green a { 
    color: #ec008c; 
}

這是我結束了簡化前說，考慮以下因素：

$base-color: #ffffff; 
.pink { 
    $base-color: #ec008c; 
} 
.green { 
    $base-color: #a4d20e; 
} 
.pink, .green { 
    #header #nav li a { 
    color: $base-color; 
    } 
}

應該給我，像這樣的東西：

.pink #header #nav li a { 
    color: #ec008c; 
} 
.green #header #nav li a { 
    color: #a4d20e; 
}

這似乎像笑的東西在SCSS/SASS中可行，並且在編碼時間和可維護性方面將支付大項目的大量股息。

來源

2011-08-09 Christopher

很明顯，在適當的情況下，編譯後的CSS會比SCSS需要的時間長很多。 – Christopher

我不知道是否有任何方法使用您提出的語法來使SASS工作，但是您可以使用mixins實現類似的效果。這是我會怎麼做：

這將產生以下CSS輸出：

a { 
    color: white; } 
#header #nav { 
    color: white; } 
#header #nav li a { 
    color: white; } 

.pink a { 
    color: #ec008c; } 
.pink #header #nav { 
    color: #ec008c; } 
.pink #header #nav li a { 
    color: #ec008c; } 

.green a { 
    color: #a4d20e; } 
.green #header #nav { 
    color: #a4d20e; } 
.green #header #nav li a { 
    color: #a4d20e; }

基本上，你可以建立一個完整的樣式表作爲一個mixin，然後@include您.pink內混入和.green類。

來源

2011-08-09 10:54:11 nelstrom

似乎'$ base-color'必須傳遞給'@ minin'，就像這樣：'.green {@include headernav（＃a4d20e）; }'etc等，但否則是這個解決方案工作 – Christopher

它正常工作，因爲我已經寫了它（測試與sass版本3.1.7），但你也可以設置mixin接受參數。在這種情況下，它可能看起來更整潔一些，但是如果你的mixin增長了，你可能會得到更多變量，例如'$ bg-color'，'$ highlight-color'，'$ active-color'，'$ dimmed-color'。在這種情況下，我認爲當你包含mixin時，可能會開始混亂地將它們作爲參數傳遞。 – nelstrom

在SASS/SCSS中定義變量覆蓋

回答

相關問題