引導薩斯/更少，覆蓋變量的flexability

Question

我使用的是引導，青菜，並希望實現以下目標：

$custom-brown: #8B4513; 

$link-color: orange; 
$link-hover-color: darken($link-color, 15%); 
$nav-link-hover-bg: darken($custom-brown, 10%); 

.myCustomClass { 
    $link-color: green; 
    $link-hover-color: darken($link-color, 15%); 
    $nav-link-hover-bg: darken($custom-brown, 10%); 
} 

@import "../bootstrap-sass/assets/stylesheets/bootstrap"; 

的目標是根據父類有不同的顏色外觀。任何人都可以想出一個辦法，我們可以做到嗎？

Answer 1

我能想到的是使用@mixin是唯一的選擇，這樣的：https://jsfiddle.net/2zdj4h8z/1/
 

SCSS

$custom-brown: #8B4513; 
$link-color: orange; 
$custom-link-color: limegreen; 

@mixin colorize($base) { 
    color: $base; 
    &:hover { 
     color: darken($base, 15%); 
     background: darken($custom-brown, 10%); 
    } 
} 

a { 
    @include colorize($link-color); 
    .myCustomClass > & { 
     @include colorize($custom-link-color); 
    } 
} 

Answer 2

由於現在是青菜，你可能變量範圍的一些水平嘗試類似：

$custom-brown: #8B4513; 

$link-color: orange; 
$link-hover-color: darken($link-color, 15%); 
$nav-link-hover-bg: darken($custom-brown, 10%); 
@import "../bootstrap-sass/assets/stylesheets/bootstrap"; 

.myCustomClass { 
    $link-color: green; 
    $link-hover-color: darken($link-color, 15%); 
    $nav-link-hover-bg: darken($custom-brown, 10%); 
    @import "../bootstrap-sass/assets/stylesheets/bootstrap/type"; 
}