Sass @mixin 与 @include

Sass @mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入到文档中。

 

?

1 2 3 4 5 6

@mixin important-text {   color: red;   font-size: 25px;   font-weight: bold;   border: 1px solid blue; }

　　

?

1 2 3 4

.danger {   @include important-text;   background-color: green; }

　　

向混入传递变量

 

?

1 2 3 4 5 6 7 8 9 10 11 12

/* 混入接收两个参数 */ @mixin bordered($color, $width) {   border: $width solid $color; }   .myArticle {   @include bordered(blue, 1px);  // 调用混入，并传递两个参数 }   .myNotes {   @include bordered(red, 2px); // 调用混入，并传递两个参数 }