ブートストラップサス/以下、変数のフレキサビリティ

Question

をオーバーライド私は、ブートストラップ-SASSを使用して、以下を達成したいよ：

$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 Sを使用している考えることができる唯一のオプション：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

変数のスコープのいくつかのレベルが、あなたはSASSで今そこに可能性があるので、次のように試してみてください：

$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"; 
}