有什么方法可以像每个例子一样引用父值
.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);
}
}
我想写一个 :hover 选择器,它将获得父级的值。有点像
.btn-blue {
background-color: $light-blue;
}
.btn-green {
background-color: $light-green;
}
.btn-green, .btn-blue {
&:hover {
background-color: rgba($parent_color,.7);
}
}
有什么想法吗?
最佳答案
您可以使用 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); }
关于css - 引用父值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13085003/