scss代碼:
/*一般mixin*/
@mixin helloMixin {
display: inline-block;
padding: 20px;
font: {
size: 20px;
weight: 500;
}
color: red;
}
/*嵌套mixin*/
@mixin helloMixin2 {
padding: 10px;
@include helloMixin;
background-color: red;
}
/*參數(shù)mixin*/
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style:dashed;
};
}
.div {
width: 100px;
@include helloMixin2;
}
.div {
@include sexy-border(blue,2px);
}
編譯后得到的css代碼:
@charset "UTF-8";
/*一般mixin*/
/*嵌套mixin*/
/*參數(shù)mixin*/
.div {
width: 100px;
padding: 10px;
display: inline-block;
padding: 20px;
font-size: 20px;
font-weight: 500;
color: red;
background-color: red;
}
.div {
border-color: blue;
border-width: 2px;
border-style: dashed;
}
如果你感覺這篇文章對你有幫助,請點(diǎn)贊收藏
你的支持是我最大的動力
