参考父值

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); }