写在前面
CSS的短板
在语法更新时，每当新属性提出，浏览器的兼容问题就会成为一大烦恼。
Less的诞生
Less属于预编译脚本，一起被熟知的还有与Sass、Stylus。
Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
直接开干
变量
值变量
|
TypeScript /* Less */ @color: #000; #wrap { color: @color; }
/* 生成后的 CSS */ #wrap { color: #000; } |
说明
以 @ 开头 定义变量，使用时 直接 键入 @名称。
在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。
选择器变量
|
TypeScript /* Less */ @mySelector: #wrap; @Wrap: wrap; @{mySelector} { // 变量名 必须使用大括号包裹 color: #999; width: 50%; } #@{Wrap} { color:#666; }
/* 生成的 CSS */ #wrap { color: #999; width: 50%; } #wrap { color:#666; } |
属性变量
|
TypeScript /* Less */ @borderStyle: border-style; @Soild: solid; #wrap { @{borderStyle}: @Soild; }
/* 生成的 CSS */ #wrap { border-style: solid; } |
url 变量
|
TypeScript /* Less */ @images: "xxx/xxx/img"; // 需加引号 body { background: url("@{images}/dog.png"); }
/* 生成的 CSS */ body { background: url("../img/dog.png"); } |
声明变量
|
TypeScript /* 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; } |
说明
将可复用的样式最小单元化、模块化，减少代码量。
变量运算
|
TypeScript /* Less */ @width: 300px; @color: #222; #wrap{ width: @width-20; height: @width-20 * 5; color: @color * 2;
}
/* 生成的 CSS */ #wrap{ width: 280px; height: 200px; color: #444;
} |
说明
- 加减法时，以第一个变量为基准；
- 乘除法时，单位要统一。
变量作用域
|
TypeScript /* Less */ @var: @a; @a: 100%; #wrap { width: @var; @a: 9%; }
/* 生成的 CSS */ #wrap { width: 9%; } |
说明
由于less的就近原则，@a 被新的覆盖了。
用变量去定义变量
|
TypeScript /* Less */ @text: "I am fnord."; @var: "text"; #wrap::after{ content: @@var; } /* 生成的 CSS */ #wrap::after{ content: "I am fnord."; } |
说明
由于 @var 的变量值与 @text重名，@var 等同于 @text
嵌套
&符
|
TypeScript /* Less */ #header { font-weight: bold; &_content { margin: 20px; } } /* 生成的 CSS */ #header { font-weight: bold; } #header_content { margin: 20px; } |
设置默认参数
|
TypeScript /* 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 指代的是 全部参数。
传的参数中 必须带着单位。
方法的匹配模式
|
TypeScript /* 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 要会找到方法中匹配程度最高的，如果匹配程度相同，将全部选择，并存在着样式覆盖替换。
运算符
|
TypeScript /* 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; } |
|
TypeScript /* 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！
|
TypeScript /* Less */ .border { border: solid 1px red; } #main { .border() !important; } /* 生成后的 CSS */ #main { border: solid 1px red !important; } |
循环方法
|
TypeScript /* 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%; } |
|
TypeScript @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的方法还有很多，属性拼接、继承等等，可以带来很便捷的样式交互开发，时间有限，暂举例这么多，一起探索吧