参考父值

时间:2012-10-26 10:17:09

标签: css sass

有没有办法可以引用父值,例如

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

有什么想法吗?

1 个答案:

答案 0 :(得分:6)

您可以使用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); }