目录

提示

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 中。 举个栗子：

  • 不带参数 设置混合块
// 设置文字不可选中
.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

Less 使用指南 (opens new window)