Less ( 逻辑、循环、函数 )
这篇教学会介绍 Less 进阶的功能，例如逻辑、循环和一些特殊函数，这些功能主要针对大型或复杂的 CSS 架构，在简单的小型专案通常派不上用场，但如果熟悉相关用法，就能大幅简化或加速开发流程。
快速导览：
Less 逻辑判断式 ( when )
Less 的逻辑判断式主要有“when”和“if”两种，when 判断式撰写在“选择器后方”，写法为 when(判斷條件)，当判断条件结果为 True 时就会转换这组样式，下方范例会判断变数 @a 是否大于 0，如果大于 0 才会转换这组样式。
/********** Less 寫法 **********/
@a: 1;
.apple when(@a>0){
color: red;
}
.oxxo when(@a<0){
color: red; /* 不會轉換這組樣式，因為 @a 為 1 */
}
/********** 轉換成 CSS **********/
.apple {color: red;}
Less 逻辑判断式也适用具有“参数”的 Mixins 混合效果，下方范例会判断变数 @a 是否大于 0，如果大于 0 才会混合并转换这组样式。
更多参考：Less Mixins 混合
/********** Less 寫法 **********/
.apple(@a) when(@a>0){
color: red;
font-size: 20px;
background: pink;
}
.oxxo {
@a: 1;
.apple(@a);
}
.banana {
@a: 2;
.apple(@a);
}
.coconut {
@a: 0;
.apple(@a);
}
/********** 轉換成 CSS **********/
.oxxo {
color: red;
font-size: 20px;
background: pink;
}
.banana {
color: red;
font-size: 20px;
background: pink;
}
Less 逻辑判断式 ( if )
Less 的 if 逻辑判断式为 Less 的“函数”，撰写在“样式中”，写法为 if(條件判斷, True 行為, False 行為)，当判断条件结果为 True 时就会转换这组样式，下方范例会判断变数 @a 是否大于 0，如果大于 0 就会使用红色，不然就使用蓝色。
/********** Less 寫法 **********/
@a: 1;
.oxxo {
color: if(@a>0, red, blue);
}
.apple {
color: if(@a<0, red, blue);
}
/********** 轉換成 CSS **********/
.oxxo {color: red;}
.apple {color: blue;}
Less 循环 ( 递回混合 )
Less 本身并没有“循环”的机制，但在混合时可以透过“递回”的做法 ( 混合的对象中混合了自己本身 )，产生类似循环的效果，下方范例会透过递回的方式，产生五个 width 样式属性。
/********** Less 寫法 **********/
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // 再次呼叫自己
width: (10px * @counter); // 根據變數產生對應屬性值
}
div {
.loop(5);
}
/********** 轉換成 CSS **********/
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
上述的写法并没有意义，因为在同一个选择器中并不会撰写一堆相同的样式，所以 Less 递回常见于将“类似名称的选择器”产生“对应内容”，下方范例会重复执行 .oxxo 四次，每次产生一个 column-* 的选择器，并根据算式产生样式内容。
/********** Less 寫法 **********/
.oxxo(4);
.oxxo(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.oxxo(@n, (@i + 1));
}
/********** 轉換成 CSS **********/
.column-1 {width: 25%;}
.column-2 {width: 50%;}
.column-3 {width: 75%;}
.column-4 {width: 100%;}
Less 循环 ( each + range )
延续上方的范例，如果不想要透过计算的方式进行循环，也可以使用 Less 的 each 和 range 函数，做出更类似程序的循环语法，快速产生具有规律的系列数字，range 函数的写法如下：
range(起始值, 結束值, 間距)range(結束值, 間距)，起始值为 0。range(結束值)，起始值为 0，间距为 1。
下方范例会展示这三种不同写法产生的结果。
/********** Less 寫法 **********/
@a: range(10);
@b: range(5, 10);
@c: range(1, 10, 2);
.oxxo::before {
content: "@{a}";
}
.apple::before {
content: "@{b}";
}
.banana::before {
content: "@{c}";
}
/********** 轉換成 CSS **********/
.oxxo::before {
content: "1 2 3 4 5 6 7 8 9 10"; /* range(10) */
}
.apple::before {
content: "5 6 7 8 9 10"; /* range(5, 10) */
}
.banana::before {
content: "1 3 5 7 9"; /* range(1, 10, 2) */
}
通常使用 range 会搭配 each 一同使用，each 表示分别执行每次的内容，每次执行的结果都会放入一个名为 value 的变数里，使用 Less 变数读取的方式就能操作，下方会呈现两种不同的 each 写法，一种放在选择器里就能重复产生样式，另一种放在选择器外层会重复产生选择器。
/********** Less 寫法 **********/
.apple::before {
each(range(4), {
content: @value; /* 數字 */
});
}
.apple::after {
each(range(4), {
content: "@{value}"; /* 字串，有引號 */
});
}
each(range(4), {
.oxxo-@{value}::before {
content: @value; /* 數字 */
}
.oxxo-@{value}::after {
content: "@{value}"; /* 字串，有引號 */
}
});
/********** 轉換成 CSS **********/
.apple::before {
content: 1;
content: 2;
content: 3;
content: 4;
}
.apple::after {
content: "1";
content: "2";
content: "3";
content: "4";
}
.oxxo-1::before {content: 1;}
.oxxo-1::after {content: "1";}
.oxxo-2::before { content: 2;}
.oxxo-2::after {content: "2";}
.oxxo-3::before {content: 3;}
.oxxo-3::after {content: "3";}
.oxxo-4::before {content: 4;}
.oxxo-4::after {content: "4";}
Less 常用函数
Less 除了基本的巢状结构、变数、Extend 或 Mixins 混合等功能，还额外提供了许多好用的函数，下方会列出一些常用的函数，完整函数可以参考 Less 官方网站“Less Functions”。
获取图片尺寸
image-width、image-height和image-size这三个函数可取得图片的长宽尺寸，转换成实际的数值。/********** Less 寫法 **********/ .img { width: image-width("../img/less-logo.png"); height: image-height("../img/less-logo.png"); margin: image-size("../img/less-logo.png"); } /********** 轉換成 CSS **********/ .img { width: 199px; height: 81px; margin: 199px 81px; }
单位转换
convert函数可以转换各种单位，例如长度单位 m、cm、mm、in、pt、pc，时间单位 s、ms，角度单位 rad、deg、grad 和 turn。/********** Less 寫法 **********/ .img { width:convert(9s, "ms"); height:convert(14cm, mm); margin:convert(8, mm); } /********** 轉換成 CSS **********/ .img { width: 9000ms; height: 140mm; margin: 8; }
数组
extract函数可以读取数组的项目，当 Less 变数里是数组项目时，可以透过extract读取，注意读取时数组的第一个项目序号为 1 不是常用的 0。/********** Less 寫法 **********/ @list: red, blue, green, yellow; .list{ color: extract(@list, 1); border-color: extract(@list, 2); background-color: extract(@list, 3); } /********** 轉換成 CSS **********/ .list { color: red; border-color: blue; background-color: green; }
数学计算
Less 提供多种数学计算函数，例如 sqrt、abs、sin、pow、max、min 等等，可以快速产生想要的数值。
/********** Less 寫法 **********/ .math{ width:sqrt(25cm); width:abs(-18.6%); width:sin(1deg); width:pow(25, -2); width:max(5, 10); width:min(5, 10); width:percentage(0.5); width:round(1.67); width:round(1.67, 1); } /********** 轉換成 CSS **********/ .math { width: 5cm; width: 18.6%; width: 0.01745241; width: 0.0016; width: 10; width: 5; width: 50%; width: 2; width: 1.7; }色彩转换
Less 提供多种色彩计算函数，可以从某一组特定的颜色，去产生各种对应的颜色，当遇到要修改颜色时，只需要修改一次即可。
/********** Less 寫法 **********/ @color: #cc8888; /* 色彩轉換 */ .color { color: rgb(90, 23, 148); } /* 顏色調整-飽和度 */ .color-saturate { color: saturate(@color, 10%); color: saturate(@color, -10%); } /* 顏色調整-不飽和度 */ .color-desaturate { color: desaturate(@color, 10%); color: desaturate(@color, -10%); } /* 顏色調整-變亮 */ .color-lighten { color: lighten(@color, 10%); color: lighten(@color, -10%); } /* 顏色調整-變暗 */ .color-darken { color: darken(@color, 10%); color: darken(@color, -10%); } /* 顏色調整-灰階 */ .color-darken { color: greyscale(@color); } /* 顏色混合 */ .color-mix { color: mix(@color, #00f, 50%); color: mix(@color, #00f, 20%); color: mix(@color, #00f, 80%); } /********** 轉換成 CSS **********/ /* 色彩轉換 */ .color { color: #5a1794; } /* 顏色調整-飽和度 */ .color-saturate { color: #d58080; color: #c49191; } /* 顏色調整-不飽和度 */ .color-desaturate { color: #c49191; color: #d58080; } /* 顏色調整-變亮 */ .color-lighten { color: #dbacac; color: #bd6464; } /* 顏色調整-變暗 */ .color-darken { color: #bd6464; color: #dbacac; } /* 顏色調整-灰階 */ .color-darken { color: #aaaaaa; } /* 顏色混合 */ .color-mix { color: #6644c4; color: #291be7; color: #a36da0; }
小结
这篇教学所介绍的 Less 逻辑判断、循环和常用函数，都是在大型专案中会看见的技巧和用法，如果运用得当，就能开发得更为快速，也更容易管理相关的样式文件。
微信扫码关注
抖音扫码关注