写在前面
CSS的短板
在语法更新时，每当新属性提出，浏览器的兼容问题就会成为一大烦恼。
Less的诞生
Less属于预编译脚本，一起被熟知的还有与Sass、Stylus。
Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
直接开干
变量
- 值变量
/* Less */
@color: #000;
#wrap {
color: @color;
}
/* 生成后的 CSS */
#wrap {
color: #000;
}
说明：
以 @ 开头 定义变量，使用时 直接 键入 @名称。
在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。
- 选择器变量
/* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector} { // 变量名 必须使用大括号包裹
color: #999;
width: 50%;
}
#@{Wrap} {
color: #666;
}
/* 生成的 CSS */
#wrap {
color: #999;
width: 50%;
}
#wrap {
color: #666;
}
- 属性变量
/* Less */
@borderStyle: border-style;
@Soild: solid;
#wrap {
@{borderStyle}: @Soild;
}
/* 生成的 CSS */
#wrap {
border-style: solid;
}
- url变量
/* Less */
@images: "xxx/xxx/img"; // 需加引号
body {
background: url("@{images}/dog.png");
}
/* 生成的 CSS */
body {
background: url("../img/dog.png");
}
- 声明变量
/* Less */
@background: {
background: red;
};
@Rules: {
width: 200px;
height: 200px;
border: solid 1px red;
};
#main {
@Rules();
@background();
}
/* 生成的 CSS */
#main {
width: 200px;
height: 200px;
border: solid 1px red;
background: red;
}
说明：
将可复用的样式最小单元化、模块化，减少代码量。
- 变量运算
/* Less */
@width: 300px;
@color: #222;
#wrap {
width: @width-20;
height: @width-20 * 5;
color: @color * 2;
}
/* 生成的 CSS */
#wrap {
width: 280px;
height: 200px;
color: #444;
}
说明：
加减法时，以第一个变量为基准；
乘除法时，单位要统一。
- 变量作用域
/* Less */
@var: @a;
@a: 100%;
#wrap {
width: @var;
@a: 9%;
}
/* 生成的 CSS */
#wrap {
width: 9%;
}
说明：
由于less的就近原则，@a 被新的覆盖了。
- 用变量去定义变量
/* Less */
@text: "I am fnord.";
@var: "text";
#wrap {
&:after {
content: @@var;
}
/* 生成的 CSS */
#wrap::after {
content: "I am fnord.";
}
说明：
由于 @var 的变量值与 @text重名，@var 等同于 @text
嵌套
- &符
/* Less */
#header {
font-weight: bold;
&_content {
margin: 20px;
}
}
/* 生成的 CSS */
#header {
font-weight: bold;
}
#header_content {
margin: 20px;
}
- 设置默认参数
/* Less */
.border(@a: 10px, @b: 50px, @c: 30px, @color: #000) {
border: solid 1px @color;
box-shadow: @arguments; // 指代的是 全部参数
}
#main {
.border(0px, 5px, 30px, red);
}
#content {
.border; // 等价于 .border()
}
/* 生成的 CSS */
#main {
border: solid 1px red;
box-shadow: 0px,5px,30px,red;
}
#wrap {
border: solid 1px #000;
box-shadow: 0px 50px 30px #000;
}
#content {
border: solid 1px #000;
box-shadow: 10px 50px 30px #000;
}
说明：
- Less 可以使用默认参数，如果 没有传参数，那么将使用默认参数；
- @arguments 犹如 JS 中的 arguments 指代的是 全部参数；
- 传的参数中 必须带着单位。
方法的匹配模式
/* Less */
.borderStyle(left, @width: 20px, @color: #000) {
border-color: transparent transparent transparent @color;
}
.borderStyle(@_, @width: 20px, @color: #000) {
border-style: solid;
border-width: @width;
}
#main {
.borderStyle(left, 50px, #999);
}
/* 生成的 CSS */
#main {
border-color: transparent transparent transparent #999;
border-style: solid;
border-width: 50px;
}
说明：
与面向对象中的多态很相似；
第一个参数 left 要会找到方法中匹配程度最高的，如果匹配程度相同，将全部选择，并存在着样式覆盖替换。
运算符
/* Less */
#card {
/* and 运算符 ，相当于 &&，必须条件全部符合才会执行 */
.border(@width, @color, @style) when (@width > 100px) and(@color = #999) {
border: @style @color @width;
}
/* not 运算符，相当于 非运算 !，条件为 不符合才会执行 */
.background(@color) when not (@color >= #222) {
background: @color;
}
/* , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行 */
.font(@size: 20px) when (@size > 50px), (@size < 100px) {
font-size: @size;
}
}
#main {
#card > .border(200px, #999, solid);
#card .background(#111);
#card > .font(40px);
}
/* 生成后的 CSS */
#main {
border: solid #999 200px;
background: #111;
font-size: 40px;
}
/* Less */
.boxShadow(...) {
box-shadow: @arguments;
}
.textShadow(@a, ...) {
text-shadow: @arguments;
}
#main {
.boxShadow(1px, 4px, 30px, red);
.textShadow(1px, 4px, 30px, red);
}
/* 生成后的 CSS */
#main {
box-shadow: 1px 4px 30px red;
text-shadow: 1px 4px 30px red;
}
说明：
对于数量不定的参数：
如果希望方法接受数量不定的参数，可以使用... ，犹如 ES6 的扩展运算符。
方法使用important！
/* Less */
.border {
border: solid 1px red;
}
#main {
.border() !important;
}
/* 生成后的 CSS */
#main {
border: solid 1px red !important;
}
循环方法
/* Less */
.style-columns(2);
.style-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.style-columns(@n, (@i + 1));
}
/* 生成后的 CSS */
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
@color: {
activity: #ed7f8b;
seminars: @theme-color;
course: #ffa757;
};
/** 遍历变量 @color */
each(@color, {
.@{key} {
.tag-wrap {
color: @value;
}
.content-wrap {
&:before {
/** @{key} 需加花括号 */
background: url('@assets/image/teaching-calendar/card-bg-@{key}@2x.png');
}
}
}
});
说明：
对于循环，也可以用 each 去遍历，使用@key、@value时，记得有时需要加花括号。
写在结尾
less的方法还有很多，属性拼接、继承等等，可以带来很便捷的样式交互开发，时间有限，暂举例这么多，一起探索吧。
