SASS混入

@mixin

@mixin 定义一个可以在整个样式表中重复使用的样式

@include

@include 将混入（mixin）引入到文档中

---

一、定义混入

1.1语法

@mixin 混入名 {

  样式

}

1.2示例

//定义公共样式

@mixinimportant-text{

color:#fff;

font-size:24px;

font-weight:1000;

border:2pxsolid#f00;

}

二、引用混入

2.1语法

.box {

  @include 混入名;

}

2.2示例

.box{

//引入公共样式

@includeimportant-text;

background-color:#f00;

}

三、混入引用混入

3.1语法

@mixin 混入名{

  @include 混入名1;

  @include 混入名2;

}

3.2实例

//定义整体样式1

@mixinimportant-text{

font-size:24px;

color:#f00;

};

//定义整体样式2

@mixinspecial-border{

border:2pxsolid#ff0;

};

//混入引入混入

@mixinspecial-text{

@includeimportant-text;

@includespecial-border;

}

//box引入

.box{

@includespecial-text;

}

四、混入传入变量

//定义混入

@mixinnormal-border($width,$color) {

border:$widthsolid$color;

};

//引入混入

.box1{

@includenormal-border(2px,#f00);

};

.box2{

@includenormal-border(10px,#00f);

};