用LESS 寫CSS ( Mixin、Extend ) - OXXO.STUDIO

上一篇介紹了LESS 的基本用法、import 和變數，這一篇要來玩一點比較進階的：mixin 和extend，當我們可以熟練mixin 和extend 的用法，相信對於整個CSS 可以有大幅加速 ... ARCHIVE ABOUT CONTACT Designthinkingiseverywhere 用LESS寫CSS(Mixin、Extend) 上一篇介紹了LESS的基本用法、import和變數，這一篇要來玩一點比較進階的：mixin和extend，當我們可以熟練mixin和extend的用法，相信對於整個CSS可以有大幅加速的功能。

mixin 有別於SASS的寫法，LESS的mixin長相跟class一模一樣，就是用一個「.」開頭，裡面放入變數重複使用，雖然跟class一樣，但如果是帶有小括號，轉出來的CSS是不會出現的。

LESS .fn1(@v){ border-width:@v; } .box1{ .fn1(10px); } CSS .box1{ border-width:10px; } mixin就是混合，不過其實也就是剛剛上面介紹函式的延伸，只要有「()」的基本上都會被判斷為函式，轉出的CSS裡面就不會有它出現，以下面的例子來說，.m2()轉成CSS就消失了，只剩下他裡面的樣式而已。

LESS .m1{ font-size:20px; } .m2(){ font-size:30px; } #m1{ .m1; } #m2{ .m2(); } #m3{ .m1!important; .m2()!important; } CSS .m1{ font-size:20px; } #m1{ font-size:20px; } #m2{ font-size:30px; } #m3{ font-size:20px!important; font-size:30px!important; } mixin的計算 我們可以針對要mixin的變數做加減乘除的計算，不過要記得「前後加空格」(其實跟calc很像)，不用在意單位的問題，你的變數如果帶的是px單位，轉出來就會是px為單位。

LESS .fn2(@v){ border-width:@v-5; } .box2{ .fn2(10px); } CSS .box2{ border-width:5px; } 把mixin當作樣式class使用 剛剛提到長相跟class很像，其實我們在某些情形下可以當作「整包」class來使用，以下面的例子，在#b-mixin.b-mixin-1裡面我們直接寫入#b.b-1，轉出來的CSS就會把#b.b-1的內容整包帶入#b-mixin.b-mixin-1裡頭，因此如果有定義樣式表，或是有要定義重複性高的樣式，就可以用這種方法來實作。

LESS #b{ .b-1{ margin:20px; padding:20px; border:5pxsolid#000; } .b-2{ margin:10px; padding:10px; border:none; } } #b-mixin.b-mixin-1{ #b.b-1; } #b-mixin.b-mixin-2{ #b.b-2; } CSS #b.b-1{ margin:20px; padding:20px; border:5pxsolid#000; } #b.b-2{ margin:10px; padding:10px; border:none; } #b-mixin.b-mixin-1{ margin:20px; padding:20px; border:5pxsolid#000; } #b-mixin.b-mixin-2{ margin:10px; padding:10px; border:none; } 帶有參數的mixin 我們可以在mixin裡面加入參數重複使用，而這些參數我們也可以定義預設值，當帶有預設值的參數遇到自訂的數值，就會以自訂的數值為主，不過如果自訂的數值沒有到參數的數量呢？這時候就可以使用「@arguments」這個特別的參數，「@arguments」就表示在沒有自定義數值的狀態下，自動採用我們的預設值。

這邊其實非常好用，特別是針對許多CSS3帶有前綴字的屬性(像是-webkit-、-moz-之類的)，基本上只需要定義一次，後面重複使用即可。

LESS .mx(@mx1:red;@mx2:green;@mx3:blue){ color:@mx1; background-color:@mx2; border-color:@mx3; } .mxx{ .mx(@mx1:yellow); } .box-shadow(@x:0;@y:0;@blur:1px;@color:#000){ -webkit-box-shadow:@arguments; -moz-box-shadow:@arguments; box-shadow:@arguments; } .big-block1{ .box-shadow(2px;2px;2px); } .big-block2{ .box-shadow(2px;); } .average(@x,@y){ @average:((@x+@y)/2); } .div-a{ .average(16px,50px); padding:@average; } CSS .mxx{ color:yellow; background-color:green; border-color:blue; } .big-block1{ -webkit-box-shadow:2px2px2px#000000; -moz-box-shadow:2px2px2px#000000; box-shadow:2px2px2px#000000; } .big-block2{ -webkit-box-shadow:2px01px#000000; -moz-box-shadow:2px01px#000000; box-shadow:2px01px#000000; } .div-a{ padding:33px; } +與+_ +與+_也是負責合併使用，有使用+或+_的會和前一個使用的合併在一起，以下面的例子來說，陰影就會合併在同一個樣式裡，不會變成兩個，+轉換出來會有逗號，+_則是沒有逗號，用空白呈現。

LESS .x1(){ box-shadow+:inset0010px#555; } .y1{ .x1(); box-shadow+:0020pxblack; } .x2(){ box-shadow+_:inset0010px#555; } .y2{ .x2(); box-shadow+_:0020pxblack; } CSS .y1{ box-shadow:inset0010px#555,0020pxblack; } .y2{ box-shadow:inset0010px#5550020pxblack; } extend extend顧名思義就是「延伸、延展」，如果我們要重複引用的class裡面又有子元素該怎麼辦呢？這裏就可以使用:extend，它會把重複的樣式獨立出來，如果要進一步跟子元素有關聯，就可以使用all，就會聯同子元素的樣式一起轉換進去。

LESS .a1:extend(.b){ color:#f00; } .a2:extend(.ball){ } .b{ border:1pxsolid; font-size:20px; } .b.c{ text-align:20px; } CSS .a1{ color:#f00; } .b,.a1,.a2{ border:1pxsolid; font-size:20px; } .b.c,.a2.c{ text-align:20px; } BackHome ArticleList ShareonFacebook ShareonGoogle+ ShareonTwitter BacktoTop 有興趣瞧瞧其他新文章嗎？ 前一篇文章： 下一篇文章： 您可以閱讀其他相關文章，或瀏覽所有文章 Copyright2019|AllRightsReserved.DesignedbyOXXO.STUDIO