## 混合 ### 什么是混合？ > 将已经定义了的部分css片段混合到其他样式定义里! ### 如何使用? 1.直接通过选择器定义混合内容 ~~~ .a { color:black; } #b { color: red; } .mixin-class { .a(); } .mixin-id { #b(); } ~~~ 等同于css ~~~ .a{ color:black; } #b { color: red; } .mixin-class { color: red; } .mixin-id { color: red; } ~~~ 如果我们不想输出.a #b两个选择器的样式 可以将上面的代码改写为 ~~~ .a(){ color:black; } #b(){ color:red; } .mixin-class { .a(); } .mixin-id { #b(); } ~~~ 等同于css ~~~ .mixin-class { color: red; } .mixin-id { color: red; } ~~~ 大家发现没有，.a 和#b定义的样式就不会再输出了 2.混合内容带选择器 ~~~ .my-hover-mixin() { &:hover { border: 1px solid red; } } button { .my-hover-mixin(); } ~~~ 等同于css ~~~ button:hover { border: 1px solid red; } ~~~ 3.带命名空间的混合内容 ~~~ #outer() { .inner { color: red; } } .c { // 下面三种方法效果一样 #outer > .inner(); // #outer .inner(); // #outer.inner(); } ~~~ 等同于css ~~~ .c{ color:red; } ~~~ 在这里 #outer就相当于混合内容的命名空间，.inner就是具体的混合内容。可以通过命名空间“>”或者“.”或者“空格”的方式来混入。 4.带条件的命名空间混合内容 只有当条件condition=true符合的时候，才能返回混入内容 ~~~ @condition:true; #namspace{ .mixin (@a) when(@a= true) { color:red } } } #box { #namespace.mixin(@condition); } ~~~ 等同于css ~~~ #box{ color:red; } ~~~ 5.带参数的混入 ~~~ .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } #header { .border-radius(4px); } .button { .border-radius(6px); } ~~~ 等同于css ~~~ #header { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .button { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } ~~~ 6.参数可以有默认值 ~~~ .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } #header { .border-radius(); } ~~~ 等同于css ~~~ #header{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } ~~~ 7.带important的混入 ~~~ .foo (@bg: #f5f5f5, @color: #900) { background: @bg; color: @color; } .unimportant { .foo(); } .important { .foo() !important; } ~~~ 等同于css ~~~ .unimportant { background: #f5f5f5; color: #900; } .important { background: #f5f5f5 !important; color: #900 !important; } ~~~ 8.arguments 变量混入多参数混合器 ~~~ .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } .big-block { .box-shadow(2px; 5px); } ~~~ 等同于css ~~~ .big-block { -webkit-box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; box-shadow: 2px 5px 1px #000; } ~~~ 9.多模式混入 ~~~ .mixin(dark; @color) { color: darken(@color, 10%); } .mixin(light; @color) { color: lighten(@color, 10%); } .mixin(@_; @color) { display: block; } @switch: light; .class { .mixin(@switch; #888); } ~~~ 等同于css ~~~ .class { color: #a2a2a2; display: block; } ~~~ 10.递归混合 ~~~ .generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); } ~~~ 等同于css ~~~ .column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; } ~~~ 11.带条件的混合器 ~~~ .mixin(@a) when (lightness(@a) >= 50%) { background-color: black; } .mixin(@a) when (lightness(@a) < 50%) { background-color: white; } .mixin(@a) { color: @a; } .class1 { .mixin(#ddd) } .class2 { .mixin(#555) } ~~~ 等同于css ~~~ .class1 { background-color: black; color: #ddd; } .class2 { background-color: white; color: #555; } ~~~ ### 课后习题 1.用less语法改写下面的css ~~~ .a{ width:100px; height:200px; border:solid 1px red; color:red; } .b { width:200px; height:200px; border:solid 1px red; color:red; } ~~~ 2.请写出下面的less样式解析成的css样式 ~~~ .mixin(@color) { color:@color; border:solid 1px @color; background-color:@color; } .a{ .mixin(red); } ~~~ 3.通过less递归的方式来实现定义1-20px范围内偶数像素的margin-left值的class 要求写出的less能够生成如下的css： ~~~ .ml-2 { margin-left:2px } .ml-4{ margin-left:4px; } .ml-6{...} .ml-8{...} . . .ml-20{ margin-left:20px; } ~~~