用好less这三招，对面的靓仔都要看过来了

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

用好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中。

举个栗子：

• 不带参数

  设置混合块

  ```less
  // 设置文字不可选中
  .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