混合 // RocketTurtle

什么是混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

普通混合

.font_family {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h1 {
  font-size: 28px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h2 {
  font-size: 24px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

编译输出后的结果

.font_family {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h1 {
  font-size: 28px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h2 {
  font-size: 24px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

不带输出的混合

如果逆向创建一个混合集，但是却不想让它输出到你的样式中
在不想输出的混合集名字后面加上一个括号，就可以实现

.font_family(){
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h1{
  font-size: 28px;
  .font_family;
}
h2{
  font-size: 24px;
  .font_family;
}

编译输出后的结果

h1 {
  font-size: 28px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h2 {
  font-size: 24px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

带选择器的混合

.border{
  &:hover{
    border: 1px solid red;
  }
}
h1{
  font-size: 28px;
  .border();
}
h2{
  font-size: 24px;
}

编译后的结果

.border:hover {
  border: 1px solid red;
}
h1 {
  font-size: 28px;
}
h1:hover {
  border: 1px solid red;
}
h2 {
  font-size: 24px;
}

带参数的混合

.border(@color){
  border: 1px solid @color;
}
h1{
  font-size: 28px;
  &:hover{
    .border(green);
  }
}
h2{
  font-size: 24px;
}

编译后的结果

h1 {
  font-size: 28px;
}
h1:hover {
  border: 1px solid green;
}
h2 {
  font-size: 24px;
}

带参数并且有默认值的混合

.border(@color:green){
  border: 1px solid @color;
}
h1{
  font-size: 28px;
  &:hover{
    .border();
  }
}
h2{
  font-size: 24px;
}

编译后

h1 {
  font-size: 28px;
}
h1:hover {
  border: 1px solid green;
}
h2 {
  font-size: 24px;
}

带多个参数的混合

一个组合可以带多个参数，参数之间可以用分号或者逗号分隔。（这里推荐使用分号分隔）

.mixins(@color;@padding:5px;@margin:5px){
  color: @color;
  padding: @padding;
  margin: @margin;
}

.container{
  .mixins(red;10px;);
}

编译后

.container {
  color: red;
  padding: 10px;
  margin: 5px;
}

如果传参的括号里面全都是以",“分隔，那么会依次传给各个参数
如果传参的括号里面既有”,"，又有";"，那么会把分号前面以逗号分隔的列表看作一个整体，传给一个参数值

定义多个具有相同名称和参数的混合

.mixin(@color){
  color-1: @color;
}
.mixin(@color;@padding:2px){
  color-2: @color;
  padding: @padding;
}
.mixin(@color;@padding:2px;@margin:2px){
  color-3: @color;
  padding: @padding;
  margin: @margin;
}
.container{
  .mixin(red;);
}

编译后

.container {
  color-1: red;
  color-2: red;
  color-3: red;
  padding: 2px;
  margin: 2px;
}

命名参数

.mixin(@color;@padding:2px;@margin:2px){
  color: @color;
  padding: @padding;
  margin: @margin;
}
.container{
  .mixin(red;@margin:5px;);
}

编译后

.container {
  color: red;
  padding: 2px;
  margin: 5px;
}

@arguments变量

@arguments变量代表所有可变参数，参数的先后顺序就是括号中参数的先后顺序
值的位置和个数也是一一对应的，只有一个值，把值赋值给第一个；有两个值，把值赋值给第二个；以此类推。

.mixins(@x:solid;@color:red;){
  border: 2px @arguments;
}
.container{
  .mixins();
}

编译后

.container {
  border: 2px solid red;
}

匹配模式

传值的时候定义一个字符，在使用的时候使用那个字符，就调用那条规则

.border(all,@border:5px){
  border-radius: @border;
}
.border(t-l,@border:5px){
  border-top-left-radius: @border;
}
.container{
  .border(t-l, @border:10px)
}

编译后

.container {
  border-top-left-radius: 10px;
}

得到混合中变量的返回值

.add(@x;@y){
  @average: ((@x+@y)/2);
}
.container{
  .add(20px;30px);
  font-size: @average;
}

编译后

.container {
  font-size: 25px;
}