开发者学堂课程【移动 Web 前端开发：less-mixin 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8485
less-mixin
内容介绍
一、样式类名 mixin
二、函数 mixin
三、圆角方法
一、 样式类名 mixin
在 bootstrap.com 的全局 CSS 样式中，查看排版与链接可以更好的理解变量。
使用 @fanily-base @font-size-base和 @line-height-base a变量作为排版的基本参数。@font-size-base可能是定义一个字符大小。
演示：在 variables.less 中
@mainColor:#e92322;
@fontsize:14px;
a:hover{
color:@mainColor;
}
body{
background:@mainColor;
font-size: @fontsize;
}
div{
border:1px solid @mainColor;
}
在 variables.css 中：
@charset“utf-8";
a:hover
color：#e92322;
}
Body{
background:#e92322;
font-size:14px;
div{
border:1px solid #e92322;
}
以上是使用了全局定义的字符大小，在 bootstrap 中以@开头的都为变量。
查看 mixin 的用法，less mixin 和变量。
除了用于快速布局的预定义栅格类，Bootstrap 还包含了一组 Less 变量和 mixin 用于生成简单、语义化的布局。
变量：通过变量来定义列数、槽(gutter)宽、媒体查询阈值(用于确定合适让列浮动)。使用这些变量生成预定义的栅格类，如下所示的定制 mixin。
@grid-columns：12；
@grid-gutter-width: 30px；
@grid-float-breakpoint: 768px
Mixin
Mixin 可以理解为自定义函数。Mixin 分为两种，第一种为样式类名 mixin ，样式类名是具体的 a ,div 或者 .a 等，第二种为函数 mixin 。
样式类名 mixin
//组合样式 左浮动 右浮动 宽度50% 左右边框，下边框
.f_left{
float: left;//定义左浮动
}
.f_right{
Float: right; //定义右浮动，这两个语法在 css 中也能使用，说明在 less 中也支持 css 语法。
}
.b_left{
border-left:1px solid #ccc;//定义左边框
}
.b_right{
border-right:1px solid #ccc;//定义右边框
}
//定义一个样式：
需要左浮动加左边框。按照以前的写法是把两个类名写在 div 中。以上已经编写好类名，直接调用即可。但是这里要运用 mixin 的语法。
FLBL{//再定义一个类名左浮动
.f_left();//使用组合样式
.b_left();
}
通过左浮动，左边框两个样式混入到 FLBL 中，达到组合样式的效果。这个过程称为 mixin。 mixin 也称为混入。但是这样的写法会造成代码冗余，应该书写 css 不能识别的语法，这样 css 就不会编译进去。
注意：每句代码之后必须写分号。
二、 函数 mixin
js 中定义函数方法，声明是定义函数，js var a=function（name）{} 也可以直接声明：function a（name）{}，可以对其传参。
less 中定义函数 mixin 方法：类名之后加括号。
代码演示：
.f_left() {//定义了一个样式，样式后加括号为方法。这个代码不会编译进 css 中，只有经过解析才能编译进去。
float:left;// 定义一个 float：left，生成一段属性。
}
.f_right() {//定义右边的浮动方法。
float:right;
.b_left(){
border-left:1px solid #ccc;
}
.b_right(){
border-right:1px solid #ccc;
}
定义完以上方法后，这些方法不会编译进 css 中。
.FLBL{//定义一个左浮动左边框方法
.f_left ();
.b_left ();
}
如果是方法则会调用方法，是样式则会调用样式，调用样式类名也是通过这种方法。这里的混入是函数混入，因为上面声明的是函数。函数不会被编译进去，不会造成代码冗余。
当调用函数时，把代码放入 FLBL 中，这个过程就是函数的混入。这是函数最基本的定义。
通过更改函数名也可以调用右边框的样式。
例如：
.FLBL{
.f_right ();
.b_left ();
}
如果要定义一个下边框或者上边框，需要再定义两个方法，这样会导致在 less 中代码过多。可以采用与 js 中类似的一种方法把它们组合在一起，可以进行传参。
比如需要三个不同宽度的盒子，可以定义三个方法，也可以同时传入一个宽度进去。
定义一个可以传参的方法：
.border(@direction:left) {
border-right:1px solid #ccc;
}
//通过传入参数决定需要哪个边框，在 js 中传参 var a=function（name）{}，name 是一个变量，在 less 中声明变量通过 @ direction 声明，在 js 中 var a=function（name）{}，name 可传可不传，如果不传，在调用 name 时会报错。
在 less 中无论是否调用，都应该定义变量，再赋予它一个默认的值。@direction 可以定义参数，但是必须有默认变量值，如果没有默认变量值就会报错。@direction:left 相当于定义变量，传 direction ，left 是默认的值，如果直接使用它，
例如：
.border(@direction:left) {
float:@ direction
.FLBL{
.border ();
}
Float 运用到了 direction ，并且默认是 left，默认是 left 也可以进行传参。
.border(@direction:left) {
border-right:1px solid #ccc;
}
.FLBL{
.f_right()
.border ();
}
@direction 可以直接使用，但是不可以和某一个字符作拼接，
使用变量时，直接使用变量名称即可，拼接变量的写法 @{direction},例如:
.border(@direction:left) {
border-@{direction}:1px solid #ccc
如果出错是编译器本身造成的，需要回退一下。
.border(@direction:left) {
border-@{direction}:1px solid #ccc
}
.FLBL{
.f_right();
.border ();
}
当上面定义好之后，只需要在.border ();中传参就可以定义边框。
例如：需要一个右边框，传入 right
.border(@direction:left) {
border-@{direction}:1px solid #ccc
}
.FLBL{
.f_right();
.border (right);
}
在 css 中编译完成
.FLBL{
Float：right;
border -right：1px solid #ccc；
}
注意：@directionccc 这种后面拼接的写法是错误的，这种书写会默认为 @directionccc 是一个变量，应使用正确的拼接方法。
三、圆角方法
在写边框时可能需要编写 .borderRadius，borderRadius 需要做兼容器的属性，如果要求 borderRadius 有更多的浏览器兼容，一般需要加私有前缀，但是如果每次定义边框圆角都需要加私有前缀，过于麻烦。
通过定义圆角方法可以自动加上私有前缀，动态生成 px 大小的圆角，并且生成的代码已经做好兼容性。
.borderRadius(@width:10px) {//定义 width 默认是 10px 的方法
border-radius: 10px;
-webkit-border-radius: 10px;//增加私有前缀
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
可以用width代替10px
.borderRadius(@width:10px) {
border-radius:; @width
-webkit-border-radius: @width;
-moz-border-radius: @width;
-ms-border-radius: @width;
-o-border-radius: @width;
}
.FLBL
.f_right()
.border(bottom)
.BorderRadius(200px);//传一个200 px 大小的圆角样式。
就会生成健壮的属性，五个兼容器的代码都已经被处理好。生成结果如下：
.FLBL{
Float：right;
border -bottom：1px solid #ccc；
}
border-radius:;200px
-webkit-border-radius:200px;
-moz-border-radius:200px;
-ms-border-radius:200px;
-o-border-radius:200px;
}
总结：
上述内容第一个是传参，根据参数定义不一样的边框，第二个传参，根据传参定义不一样的圆角，并且做了兼容器处理。运用以上知识为 css 赋予了完整的逻辑。
Mixin，如果是混入样式的，则直接调用类名，如果是混入方法的，则调用方法名，可以直接定义方法，也可以通过传参定义。传参需要注意的是，在写变量时需要赋予它默认值。使用时，一般是直接调用变量，如果是拼接使用需要按照 @{变量} 的方法使用。
