參考父值

Question

有沒有什麼辦法可以參考父值，如每例如

.btn-blue { 
    background-color: $light-blue; 
    &:hover { 
     background-color: rgba($light-blue,.7); 
    } 
} 
.btn-green { 
    background-color: $light-green; 
    &:hover { 
     background-color: rgba($light-green,.7); 
    } 
} 

我想自己寫一個：懸停選擇器會得到父母的價值。類似於

.btn-blue { 
    background-color: $light-blue; 
} 
.btn-green { 
    background-color: $light-green; 
} 
.btn-green, .btn-blue { 
    &:hover { 
      background-color: rgba($parent_color,.7); 
    } 
} 

任何想法？

Answer 1

您可以使用mxins並通過顏色：

@mixin btn-color($selColor) 
{ 
    background-color: $selColor; 
     &:hover { background-color: rgba($selColor,.7); 
     } 
} 

並使用它像這樣：

.btn-green { @include btn-color($light-green); } 
.btn-blue { @include btn-color($light-blue); }