less几个关键技巧

less 中比较实在的功能点:

一、变量

声明变量

@img: "~@src/img"; // 作为url，可以配合路径别名一起使用，这里可以把图片路径进行声明，减少后期使用时的路径冗余
@link-color: #428bca; // 作为属性值
@i: 1; // 作为选择器
@ml: margin-left; // 作为属性名

在less中使用的变量有两种形式：

作为属性值

a.link {
    color: @link-color;
}

作为选择器、属性名、url时，插入变量与普通作为属性值的形式有所区别，需要使用,@val 转变为 @{val}

// 作为选择器
.mt-@{i} {
    margin-top: @i * 1rem;
}
// 作为url
.content {
    .bg-img("@{img}/common/popup1.png");
}
// 作为属性名
a {
    @{ml}: 10rem;
}

二、混入
这一块内容比较常用，很多常用代码块都能通过函数的形式封装，不使用时，不会编译到css中。

举个栗子：

不带参数

设置混合块

// 设置文字不可选中
.unselect() {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

使用

.class1 {
    .unselect();
}
.class2 {
    .unselect();
}

带参数

// 设置背景图
.bg-img(@u) {
    background-image: url(@u);
}
// 这两个可以一起使用（使用时，取决于传参数量）
.bg-img(@u1, @u2) {
    background-image: url(@u1);
    &:hover {
        background-image: url(@u2);
    }
}

使用时（调用的混合块取决于传参数量）

.bg-img("~@src/img/first_item.png");
.bg-img("~@src/img/first_item.png", "~@src/img/first_item_hover.png");

实际开发中，可以封装不同类型功能代码块，减少重复样式代码量。
比如单行省略号：

// 单行显示，超出省略号
.ellipsis() {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

再比如多行显示省略号：

.ellipsis-mult (@l: 3) {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @l;
    word-break: break-all;
}

循环

很多像：margin、padding、width、height这种常用的，并且值是和数字方面相关的。就可以使用循环一次性遍历出来啦！

.size-factory(@n, @i: 1) when (@i =< @n) {
    .mt-@{i} {
        margin-top: @i * 1rem;
    }
    .mr-@{i} {
        margin-right: @i * 1rem;
    }
    .mb-@{i} {
        margin-bottom: @i * 1rem;
    }
    .ml-@{i} {
        margin-left: @i * 1rem;
    }
    .size-factory(@n, (@i + 1)); // 进入下一次循环
}
.size-factory(30);

通过这样的遍历我们就可以得到如下结果啦：

.mt-1 {
  margin-top: 1rem;
}
.mr-1 {
  margin-right: 1rem;
}
.mb-1 {
  margin-bottom: 1rem;
}
.ml-1 {
  margin-left: 1rem;
}
....
​
.mt-30 {
  margin-top: 30rem;
}
.mr-30 {
  margin-right: 30rem;
}
.mb-30 {
  margin-bottom: 30rem;
}
.ml-30 {
  margin-left: 30rem;
}

编译less文件

再送一个小tips，不知道写出来的结果时，可以使用以下命令进行输出编译后的结果：

lessc .\common.less .\common.css

如果提示没有这个指令的话，可以全局安装一下

npm install less -g