Less基本用法

变量

@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;

#header {
  background-color: @nice-blue;
  color: @light-blue;
}

结果为：

#header {
  background-color: #5b83ad;
  color: #6c94be;
}

Mixins

使用类选择器，ID选择器混入

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

结果为：

.a,
#b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

不输出Mixins

如果要创建一个mixin，但又不想输出该mixin，则可以在其后加上括号。例如my-other-mixin

.my-mixin {
  color: black;
}
.my-other-mixin() { /** 带有括号，css中不会单独生成此代码**/
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

结果为

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

!important

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

结果为：

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

继承

.public {
  width: 100px;
  height: 100px;
}
nav ul {
  &:extend(.public);
  list-style: none;
}

结果为：

.public,
nav ul {
  width: 100px;
  height: 100px;
}
nav ul {
  list-style: none;
}

采用继承和Mixins带有括号的形式，都可以减少最终生成的css代码

循环

.generate-level(1);

.generate-level(@i) when(@i <= 5) {
  .level-@{i} {
    margin-left: (@i * 10+10px);
  }
  .generate-level(@i+1);
}

.level-1 {
  margin-left: 20px;
}
.level-2 {
  margin-left: 30px;
}
.level-3 {
  margin-left: 40px;
}
.level-4 {
  margin-left: 50px;
}
.level-5 {
  margin-left: 60px;
}

父选择器 &

.message {
  &-success {
    color: green;
  }
  &-failure {
    color: red;
  }
  &-notice {
    color: yellow;
  }
}

a {
  color: #ff6a00;
  &:hover {
    color: darken(#ff6a00, 10%);
  }
}

结果为：

.message-success {
  color: green;
}
.message-failure {
  color: red;
}
.message-notice {
  color: yellow;
}

a {
  color: #ff6a00;
}
a:hover {
  color: #cc5500;
}

合并

/** 合并 以逗号分隔 **/
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}
/** 合并 以空格分隔 **/
.mixin1() {
  transform+_: scale(2);
}
.myclass1 {
  .mixin1();
  transform+_: rotate(15deg);
}

/** 合并 以逗号分隔 **/
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
/** 合并 以空格分隔 **/
.myclass1 {
  transform: scale(2) rotate(15deg);
}