## 混合 ### 什么是混合？ > 將已經定義了的部分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; } ~~~