참조 부모 값

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