Less 基础

嵌套

和 Scss 一样 Less 也可以嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

/* 编译后 */
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

变量

也支持变量，只不过使用@符号来声明

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

/* 编译后 */
#header {
  width: 10px;
  height: 20px;
}

函数

• each

@selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    color: @value;
  }
});

/* 编译后 */
.sel-blue {
  color: blue;
}
.sel-green {
  color: green;
}
.sel-red {
  color: red;
}

• range

利用 range 和 each 可以实现循环遍历的效果

@list1: range(4);
@list2: range(10, 40, 10);
each(@list1, {
  .border-width-@{value} {
    width: @value + px;
  }
});
each(@list2, {
  .width-@{value} {
    width: @value + px;
  }
});

.border-width-1 {
  width: 1 px;
}
.border-width-2 {
  width: 2 px;
}
.border-width-3 {
  width: 3 px;
}
.border-width-4 {
  width: 4 px;
}
.width-10 {
  width: 10 px;
}
.width-20 {
  width: 20 px;
}
.width-30 {
  width: 30 px;
}
.width-40 {
  width: 40 px;
}

混合

在 less 中使用混合只需要将已有的选择器像逻辑语言中作为方法调用一样引用就行。

less 中的混合相当于 scss 中的继承。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

导入

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

@import "library"; // library.less
@import "typo.css";

学习资料

Less 中文文档 (opens new window)