scss 有和没有@extend函数
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 有和没有@extend函数相关的知识,希望对你有一定的参考价值。
.btn-hot:link {
padding: 10px;
display: inline-block;
text-align:center;
border-radius: 100px;
text-decoration: none;
text-transform: uppercase;
width: $width-button;
color:$color-text-light;
}
.btn-main {
&:link {
background-color:$color-2;
}
&:hover {
background-color:darken($color-2, 5%);
}
}
.btn-hot {
&:link {
background-color:$color-3;
}
&:hover {
background-color:darken($color-3, 5%);
}
}
// to avoid dont repeat your self way use @extend function see the example below
// only use @extend function if the elemen are ralted to each other
%btn-placeholder {
padding: 10px;
display: inline-block;
text-align:center;
border-radius: 100px;
text-decoration: none;
text-transform: uppercase;
width: $width-button;
color:$color-text-light;
}
.btn-main {
&:link {
@extend %btn-placeholder;
background-color:$color-2;
}
&:hover {
@extend %btn-placeholder;
background-color:darken($color-2, 5%);
}
}
以上是关于scss 有和没有@extend函数的主要内容,如果未能解决你的问题,请参考以下文章