1-使用說明1-1-將使用的色彩先以變數記下
將色票的色彩值以變數 @ 與變數命名的方式記下，在後面可以讓 Mixin 取得變數的內容。
1-2-使用 LESS 的 Mixin，像是 JavaScript 的 function 取得變數內容後大量產出樣式
Mixin 的使用概念可視為 JavaScript 的 function，寫法可以先幫 Mixin 用 ClassName 的方法取名，後方接上 (參數, 值) 傳陂到 Mixin 內使用，最後給取用的對像呼叫與重覆使用。
1 2 3 4 5 6 | .labelClassNameFunc(@className, @colorValue){ &.@{className} { background-color: @colorValue; color: #fff; } } |
比較 JavaScript 的函式使用方式，只是在 less 裡要像使用 ClassName 一樣，前面給一個 . 後，在ClassName 後方接個 (參數一, 參數二) 的方式使用，參數可以使用變數傳入，也在執行函式的 () 帶入不同的變數，達到傳入參數的功能在函式裡使用運作。
函式裡面 & 等同於 Less 繼承 Class 的結構，如果後方沒有空白字元的話就會是在同層，如果有的話就是 Class 的子層。
– .labelClassNameFunc()
函式裡 @{className} 的 className 是執行函式所傳進來變數的一個參數代名。
– @{className}
@ 後方所包的 {} 是將傳入的參數，參數如果是字串的話在， {} 會以替換選擇器的方式轉成 ClassName。
可參考 http://www.lessc.cn/features/index.htm#variables-feature-variable-interpolation
轉化成 ClassName 後其實也是字串的原理，此時也可以結合 JavaScript 組字串的方式來將 ClassName 組成，同時也可以接成二個的方式，例如： @{變數一}@{變數二} 組成不同的樣式名稱。
2-完整範例與程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <p> 自定 labels： <br> <span class="label label_StrongRed">label_StrongRed</span> <span class="label label_VeryDarkGrayishRed57">label_VeryDarkGrayishRed57</span> <br> <span class="label label_Brightorange">label_Brightorange</span> <span class="label label_VividOrange">label_VividOrange</span> <span class="label label_StrongGreen">label_StrongGreen</span> <span class="label label_DarkYellowOliveTone">label_DarkYellowOliveTone</span> <span class="label label_PureOrMostlyPureBlue">label_PureOrMostlyPureBlue</span> <span class="label label_DarkBlue">label_DarkBlue</span> <span class="label label_VividPink">label_VividPink</span> <span class="label label_PureOrMostlyPurePink">label_PureOrMostlyPurePink</span> <span class="label label_ModerateViolet">label_ModerateViolet</span> <span class="label label_StrongViolet">label_StrongViolet</span> <span class="label label_DarkGray">label_DarkGray</span> <span class="label label_VeryDarkGray72">label_VeryDarkGray72</span> <span class="label label_PaleRedPinkTone">label_PaleRedPinkTone</span> <span class="label label_VeryLightRed">label_VeryLightRed</span> <span class="label label_SlightlyGreen">label_SlightlyGreen</span> <span class="label label_StrongCyanLimeGreen">label_StrongCyanLimeGreen</span> </p> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | // 其他共用 body{ padding: 15px; } .label { border-radius: .8em; margin: 0.2rem; display: inline-block; font-size: 85%; padding: .2rem .5rem; } // /其他共用 // 使用色票 @StrongRed:#C30D23; @VeryDarkGrayishRed57: #595757; @BrightorangeValue: #f7b52c; @VividOrangeValue: #DD8910; @StrongGreenValue: #8dc21f; @DarkYellowOliveToneValue: #789900; @PureOrMostlyPureBlueValue: #0090f2; @DarkBlueValue: #006FA0; @VividPinkValue: #ff0683; @PureOrMostlyPurePinkValue: #E2007C; @ModerateVioletValue: #AF6AD8; @StrongVioletValue: #8124d1; @DarkGrayValue: #888888; @VeryDarkGray72Value: #727272; @PaleRedPinkToneValue: #FFA6A4; @VeryLightRedValue: #FF7D7D; @SlightlyGreenValue: #76CEB3; @StrongCyanLimeGreenValue: #00B771; // /使用色票 // function .labelClassNameFunc(@className, @colorValue){ &.@{className} { background-color: @colorValue; color: #fff; } } // /function // output .label{ .labelClassNameFunc(label_StrongRed, @StrongRed); .labelClassNameFunc(label_VeryDarkGrayishRed57, @VeryDarkGrayishRed57); .labelClassNameFunc(label_Brightorange, @BrightorangeValue); .labelClassNameFunc(label_VividOrange, @VividOrangeValue); .labelClassNameFunc(label_StrongGreen, @StrongGreenValue); .labelClassNameFunc(label_DarkYellowOliveTone, @DarkYellowOliveToneValue); .labelClassNameFunc(label_PureOrMostlyPureBlue, @PureOrMostlyPureBlueValue); .labelClassNameFunc(label_DarkBlue, @DarkBlueValue); .labelClassNameFunc(label_VividPink, @VividPinkValue); .labelClassNameFunc(label_PureOrMostlyPurePink, @PureOrMostlyPurePinkValue); .labelClassNameFunc(label_ModerateViolet, @ModerateVioletValue); .labelClassNameFunc(label_StrongViolet, @StrongVioletValue); .labelClassNameFunc(label_DarkGray, @DarkGrayValue); .labelClassNameFunc(label_VeryDarkGray72, @VeryDarkGray72Value); .labelClassNameFunc(label_PaleRedPinkTone, @PaleRedPinkToneValue); .labelClassNameFunc(label_VeryLightRed, @VeryLightRedValue); .labelClassNameFunc(label_SlightlyGreen, @SlightlyGreenValue); .labelClassNameFunc(label_StrongCyanLimeGreen, @StrongCyanLimeGreenValue); } // /output |
See the Pen Less-使用函式與變數產生共用設定與樣式名稱 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
See the Pen Bootstrap3 – Less 自定 Label 函式與產生樣式名與色彩 by Jimmy_Wu (@Jimmy_Wu) on CodePen.