為了有效的維護(hù)和開發(fā)項(xiàng)目，代碼的重復(fù)利用就顯得尤為重要溢豆。在 SASS中蜒简，除了 @import 和 @extend 可以使代碼重用性更強(qiáng)，還有一些指令也同樣能提高代碼的重復(fù)使用率并簡化代碼漩仙，如 @mixin搓茬，%犹赖，@function 等。
1. @mixin
@mixin指令是一種簡化代碼的方法卷仑，它可以包含任意內(nèi)容且可以傳遞參數(shù)峻村。將共用屬性聲明成 @mixin，并給它一個(gè)名字锡凝，然后用 @include 引入到需要使用的代碼中即可粘昨。
- 常規(guī)寫法
html
<div class="box smallBox"></div>
<div class="box BigBox"></div>
scss
.box{
box-shadow: 0 0 5px black;
margin: 10px;
&.smallBox{
width: 100px;
height: 100px;
}
&.bigBox{
width: 300px;
height: 300px;
}
}
- @mixin 寫法
html
<div class="smallBox"></div>
<div class="BigBox"></div>
scss
@mixin box{
box-shadow: 0 0 5px black;
margin: 10px;
}
.smallBox{
width: 100px;
height: 100px;
@include box;
}
.bigBox{
width: 300px;
height: 300px;
@include box;
}
- @mixin 更高級寫法：設(shè)置參數(shù)
@mixin box($width: 100px, $height:100px){
box-shadow: 0 0 5px black;
margin: 10px;
width: $width;
height: $height;
}
.smallBox{
@include box(); // 默認(rèn)寬高:100px
}
.bigBox{
@include box(300px, 300px);
}
2. %placeholder （占位符選擇器）
- %placeholder 寫法
%box{
box-shadow: 0 0 5px black;
margin: 10px;
}
.smallBox{
width: 300px;
height: 300px;
@extend %box;
}
.bigBox{
width: 100px;
height: 100px;
@extend %box;
}
- % 與 @mixin 的區(qū)別：
-
@mixin支持參數(shù)，%不支持參數(shù) - 生成的 css 代碼：
@include會(huì)將@mixin的共用代碼（屬性）復(fù)制過去窜锯，%placeholder是將選擇器復(fù)制到共用代碼之前张肾。盡可能多的使用%placeholder，可以使代碼更少锚扎。
3. @function
@function 可以自定義一個(gè)函數(shù)吞瞪，使屬性值的計(jì)算邏輯變的可復(fù)用。
%box{
box-shadow: 0 0 5px black;
margin: 10px;
}
@function px($value){
@return $value/2 + px;
}
.smallBox{
width: px(200);
height: px(200);
@extend %box;
}
.bigBox{
width: px(600);
height: px(600);
@extend %box;
}
