CSS 预处理器可以方便前端写样式代码，目前流行的 CSS 有 Less，Sass，PostCss，Stylus，据我观察，众多开源库使用比较多的还是 Sass 和 Less 预处理器，不过我个人还是觉得 Less 比较好用，使用过 Sass 的人才会懂得在大陆安装 node-sass 的痛苦。
本文整理了日常开发比较实用的 Less 实用技巧，希望对前端开发的你有所帮助。
多个&选择器
通过 & 可以选择自身，可以用来提升 CSS 权重，方便扩展元素的 CSS 状态，比如我们现在有一个元素的样式如下
.div {
width: 20px;
height: 20px;
}
如果想要提升 CSS 的权重，可以使用 && ，例如
.div {
width: 20px;
height: 20px;
&& {
width: 100px;
}
}
生成的 CSS 如下
.div {
width: 20px;
height: 20px;
}
.div.div {
width: 100px;
}
还有一种情况就是在同一个类加一些描述 DOM 元素状态，比如 class 为 btn ， btn-primary ， btn-danger 等
<button type="button" className="btn btn-primary"><span>primary</span></button>
使用 Less 写起来非常方便，通过 &- 横岗的写法可以在 .btn 的基础上加入一些“状态”
.btn {
padding: 6px 10px;
&&-primary {
background-color: blue;
}
&&-danger {
background-color: red;
}
}
生成代码如下，非常 nice
.btn {
padding: 6px 10px;
}
.btn.btn-primary {
background-color: blue;
}
.btn.btn-danger {
background-color: red;
}
函数
使用函数可以方便复用 CSS 代码，举个例子想要实现多行代码省略号，定义函数可以通过 . 或者 # 来实现。
.clamp(@line) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @line;
}
这时候可以通过传入的 @line 进行动态配置多行省略号的 CSS 代码
.info {
.clamp(2);
}
生成的代码如下，简直不要太方便
.info {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
样式继承 all
通过 :extend 可以继承其他样式规则，如果要继承样式下的所有规则，可以使用 all，比如以下 less 代码
.grey {
color: #151515;
}
.grey a {
color: #998877;
}
.content:extend(.grey) {
font-size: 100px;
}
上面生成的代码只会继承 .grey 的样式规则，但是 a 的规则不会继承于 .content 样式规则上，可以使用 all
.content:extend(.grey all) {
}
生成的代码如下，多出了代码高亮的 css 代码，可以看出 .content 可以把 .grey 规则也给继承过去了
.grey,
.content {
color: #151515;
}
.grey a,
.content a {
color: #998877;
}
.content {
}
波浪线 ~ 转义
通过 ~ 可以用字符串的形式来书写 css 规则，例如常用的媒体查询，可以这样定义
@mobile: ~"only screen and (max-width: 529px)";
@tablet: ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop: ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl: ~"only screen and (min-width: 1129px)";
通过 @media @mobile 就可以实现下面的媒体查询定义了
@media @desktop, @desktop-xl {
.content {
width: 960px;
}
}
生成的最终 CSS 规则如下
@media only screen and (min-width: 950px) and (max-width: 1128px), only screen and (min-width: 1129px) {
.content {
width: 960px;
}
}
