Less

变量

变量是自解释的:

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

#header {
  color: @light-blue;
}

Outputs:

#header {
  color: #6c94be;
}

Mixins

Mixins("mixing in")是某个规则集合中直接包含另外的规则集合。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

当我们想重用这个规则集合的时候，仅仅只需要直接用。

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

嵌套规则

Less让你能够使用嵌套代替逗号或者级联。有如下的css：

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

使用Less，我们可以这么写：

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

当然，伪类选择器也可以这么用，下面是经典的清除浮动hack:

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

Media query 冒泡和嵌套Media queries

Media queries 能和选择器一样的方式嵌套:

.screencolor{
  @media screen {
    color: green;
    @media (min-width:768px) {
    color: red;
    }
    }
  @media tv {
    color: black;
  }
}

outputs:

@media screen {
  .screencolor {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screencolor {
    color: red;
  }
}
@media tv {
  .screencolor {
    color: black;
  }
}

操作

任务数字，颜色或者变量都是可操作的.

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

如果有单位参加运算:

@var: 1px + 5;

Less 会把单位最后带出来输出在结果中.

Functions

Less 提供很多内置的function,使用很简单直观:

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

Namespaces

我们使用命名空间来处理选择器重名的问题。

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}

然后这样使用：

#header a {
  color: orange;
  #bundle > .button;
}

Scope

这个比较简单，不解释。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

下面这个和上面同样的结果：

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

注释

常规的注释语法:

/* One hell of a block
style comment! */
@var: red;

// Get in line!
@var: white;

导入

你可以导入.less,当然也可以导入css

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

翻译 from: github