類之間的SASS變量值

Question

我最近開始使用SASS變量來編寫更多動態，可管理的樣式。我想知道是否可以將變量的值從一個類傳遞到另一個類，以防止編寫重複的代碼。

在下面的示例中，我希望所有按鈕的懸停時間都減輕3％。理想的情況下，你應該應該能夠在應用於所有按鈕的「.btn」類上設置它。然後你只需要爲每種類型的按鈕定義「$ btnColor」的值。但是，我發現它沒有按預期工作。 「$ btnColor」變量在亮化功能中未定義。

有沒有辦法實現我正在嘗試的？我是否需要懸停的每個按鈕類的照亮功能？這不是浪費嗎？這裏有一個JSFiddle，你可以在裏面玩耍！預先感謝您的意見。

的標記：

<button class="btn btn-default">Button</button> 
<button class="btn btn-primary">Button</button> 
<button class="btn btn-secondary">Button</button> 

的風格：

.btn { 
    font-size: 12px; 
    font-weight: bold; 
    text-transform: uppercase; 

    &.btn-default { 
     /* Set Button Color */ 
     $btnColor: #192951; 

     background: $btnColor; 
     border: 1px solid $btnColor; 
     color: #fff; 
    } 

    &.btn-primary { 
     /* Set Button Color */ 
     $btnColor: #006da8; 

     background: $btnColor; 
     border: 1px solid $btnColor; 
    } 

    &.btn-secondary { 
     /* Set Button Color */ 
     $btnColor: #5db0d8; 

     background: $btnColor; 
     border: 1px solid $btnColor; 
     color: #fff; 
    } 

    &:hover { 
     background: lighten($btnColor, 3%); 
    } 
} 

Answer 1

的解決方案，我正在經歷可以通過使用一個混合的解決作用域問題。下面是一個例子。

的標記：

<button class="btn btn-default">Default</button> 
<button class="btn btn-primary">Primary</button> 
<button class="btn btn-secondary">Secondary</button> 

的風格：的

@mixin button($color) { 
    background: $color; 
    border: 1px solid $color; 
    font-weight: bold; 
    text-transform: uppercase; 

    &:hover { 
     background: lighten($color, 5%); 
     border: 1px solid $color; 
    } 
} 

.btn-default { 
    @include button(#192951); 
    color: #fff; 

    &:hover { 
     color: #fff; /* Bootstrap override */ 
    } 
} 

.btn-primary { 
    @include button(#006da8); 
} 

.btn-secondary { 
    @include button(#5db0d8); 
    color: #fff; 

    &:hover { 
     color: #fff; /* Bootstrap override */ 
    } 
}