引导萨斯/更少，覆盖变量的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"; 
}