less

发表于 更新于

一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

1
2
3
4
npm install -g less
lessc styles.less
lessc styles.less styles.css
lessc --clean-css styles.less styles.min.css

用法

代码用法

1
2
3
4
5
6
7
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, output) {
  console.log(output.css);
});
// .class {
//   width: 2;
// }

配置

1
2
3
4
5
6
7
8
9
var less = require('less');

less.render('.class { width: (1 + 1) }', {
  paths: ['.', './lib'],  // Specify search paths for @import directives
  filename: 'style.less', // Specify a filename, for better error messages
  compress: true          // Minify CSS output
}, function (e, output) {
  console.log(output.css);
});

浏览器端用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 确保 .less 在 less.js 前 -->
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<!-- 选项，确保在 less.js 前 -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js" type="text/javascript"></script>

或者

1
2
<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

cdn 

1
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

规则

1
2
3
4
5
6
7
8
9
10
11
12
13
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

=>

1
2
3
4
5
6
7
8
.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);
#header {
  color: @light-blue;
}
a {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
@my-selector: banner;
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
@images: "../img";
body {
  background: url("@{images}/white-sand.png");
}

=>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#header {
  color: #6c94be;
}
a {
  color: #428bca;
}
a:hover{
  color: #3071a9;
}
.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
body{
  background: url("../img/white-sand.png")
}

属性

1
2
3
4
5
6
7
8
@property: color;
.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}
@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;

=>

1
2
3
4
5
.widget {
  color: #0ee;
  background-color: #999;
}
content: "I am fnord.";

懒加载

1
2
3
4
5
.lazy-eval {
  width: @var;
}
@var: @a;
@a: 9%;

=>

1
2
3
.lazy-eval-scope {
  width: 9%;
}

默认变量

1
2
3
4
5
6
// library
@base-color: green;
@dark-color: darken(@base-color, 10%);
// use of library
@import "library.less";
@base-color: red;

层叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
.clearfix {
  display: block;
  zoom: 1;
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}
#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2 2 2 2;
}

=>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
.clearfix {
  display: block;
  zoom: 1;
}
.clearfix:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}
#a {
  color: blue;
}
@font-face {
  src: made-up-url;
}
#a {
  padding: 2 2 2 2;
}

操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

@base: 2cm * 3mm; // result is 6cm

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

转义

1
2
3
.weird-element {
  content: ~"^//* some horrible but needed css hack";
}

=>

1
2
3
.weird-element {
  content: ^//* some horrible but needed css hack;
}

函数

1
2
3
4
5
6
7
@base: #f04615;
@width: 0.5;
.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

命名空间和访问器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}
#header a {
  color: orange;
  #bundle > .button;
}

作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
@var: red;
#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

注释

1
2
3
4
5
6
/* One hell of a block
style comment! */
@var: red;

// Get in line!
@var: white;

Importing

1
2
3
4
@import "library"; // library.less
@import "typo.css";
@themes: "../../src/themes";
@import "@{themes}/tidal-wave.less";

扩展

1
2
3
4
5
6
7
nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

=>

1
2
3
4
5
6
7
nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.a:extend(.b) {}
// the above block does the same thing as the below block
.a {
  &:extend(.b);
}
.c:extend(.d all) {
  // extends all instances of ".d" e.g. ".x.d" or ".d.x"
}
.c:extend(.d) {
  // extends only instances where the selector will be output as just ".d"
}
.e:extend(.f) {}
.e:extend(.g) {}
// the above an the below do the same thing
.e:extend(.f, .g) {}
.big-division,
.big-bag:extend(.bag),
.big-bucket:extend(.bucket) {
  // body
}
pre:hover,
.some-class {
  &:extend(div pre);
}
pre:hover:extend(div pre),
.some-class:extend(div pre) {}

扩展层叠

1
2
3
4
5
6
.bucket {
  tr { // nested ruleset with target selector
    color: blue;
  }
}
.some-class:extend(.bucket tr) {} // nested ruleset is recognized

=>

1
2
3
4
.bucket tr,
.some-class {
  color: blue;
}
1
2
3
4
5
6
.bucket {
  tr & { // nested ruleset with target selector
    color: blue;
  }
}
.some-class:extend(tr .bucket) {} // nested ruleset is recognized

=>

1
2
3
4
tr .bucket,
.some-class {
  color: blue;
}
1
2
3
4
5
6
7
8
*.class {
  color: blue;
}
.noStar:extend(.class) {}
link:hover:visited {
  color: blue;
}
.selector:extend(link:visited:hover) {}

=>

1
2
3
4
5
6
*.class {
  color: blue;
}
link:hover:visited {
  color: blue;
}

nth表单式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
:nth-child(1n+3) {
  color: blue;
}
.child:extend(:nth-child(n+3)) {}
[title=identifier] {
  color: blue;
}
[title='identifier'] {
  color: blue;
}
[title="identifier"] {
  color: blue;
}
.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}

=>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
:nth-child(1n+3) {
  color: blue;
}
[title=identifier],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}
[title='identifier'],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}
[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

扩展全部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.a.b.test,
.test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}
.replacement:extend(.test all) {}
@variable: .bucket;
@{variable} { // interpolated selector
  color: blue;
}
.some-class:extend(.bucket) {} // does nothing, no match is found

=>

1
2
3
4
5
6
7
8
9
10
11
12
13
.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
  color: orange;
}
.test:hover,
.replacement:hover {
  color: green;
}
.bucket {
  color: blue;
}

@media

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media print {
  .screenClass:extend(.selector) {} // extend inside media
  .selector { // this will be matched - it is in the same media
    color: black;
  }
}
.selector { // ruleset on top of style sheet - extend ignores it
  color: red;
}
@media screen {
  .selector {  // ruleset inside another media - extend ignores it
    color: blue;
  }
}

=>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media print {
  .selector,
  .screenClass { /*  ruleset inside the same media was extended */
    color: black;
  }
}
.selector { /* ruleset on top of style sheet was ignored */
  color: red;
}
@media screen {
  .selector { /* ruleset inside another media was ignored */
    color: blue;
  }
}
1
2
3
4
5
6
7
8
@media screen {
  .screenClass:extend(.selector) {} // extend inside media
  @media (min-width: 1023px) {
    .selector {  // ruleset inside nested media - extend ignores it
      color: blue;
    }
  }
}

=>

1
2
3
4
5
@media screen and (min-width: 1023px) {
  .selector { /* ruleset inside another nested media was ignored */
    color: blue;
  }
}
1
2
3
4
5
6
7
8
9
10
11
@media screen {
  .selector {  /* ruleset inside nested media - top level extend works */
    color: blue;
  }
  @media (min-width: 1023px) {
    .selector {  /* ruleset inside nested media - top level extend works */
      color: blue;
    }
  }
}
.topLevel:extend(.selector) {} /* top level extend matches everything */

=>

1
2
3
4
5
6
7
8
9
10
11
12
@media screen {
  .selector,
  .topLevel { /* ruleset inside media was extended */
    color: blue;
  }
}
@media screen and (min-width: 1023px) {
  .selector,
  .topLevel { /* ruleset inside nested media was extended */
    color: blue;
  }
}

重复检测

1
2
3
4
5
.alert-info,
.widget {
  /* declarations */
}
.alert:extend(.alert-info, .widget) {}

=>

1
2
3
4
5
6
.alert-info,
.widget,
.alert,
.alert {
  /* declarations */
}

混合 Mixins

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}
.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}
.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}
.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}
.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

=>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}
.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}
button:hover {
  border: 1px solid red;
}
.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}
.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}
.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

混合函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.mixin() {
  @width:  100%;
  @height: 200px;
}
.caller {
  .mixin();
  width:  @width;
  height: @height;
}
.average(@x, @y) {
  @average: ((@x + @y) / 2);
}
div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}
.mixin() {
  @size: in-mixin;
  @definedOnlyInMixin: in-mixin;
}
.class {
  margin: @size @definedOnlyInMixin;
  .mixin();
}
@size: globaly-defined-value; // callers parent scope - no protection
.unlock(@value) { // outer mixin
  .doSomething() { // nested mixin
    declaration: @value;
  }
}
#namespace {
  .unlock(5); // unlock doSomething mixin
  .doSomething(); //nested mixin was copied here and is usable
}

=>

1
2
3
4
5
6
7
8
9
10
11
12
13
.caller {
  width:  100%;
  height: 200px;
}
div {
  padding: 33px;
}
.class {
  margin: in-mixin in-mixin;
}
#namespace {
  declaration: 5;
}

将规则集传递到混合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// declare detached ruleset
@detached-ruleset: { background: red; };
// use detached ruleset
.top {
    @detached-ruleset(); 
}
.desktop-and-old-ie(@rules) {
  @media screen and (min-width: 1200) { @rules(); }
  html.lt-ie9 &                       { @rules(); }
}
header {
  background-color: blue;
  .desktop-and-old-ie({
    background-color: red;
  });
}
@my-ruleset: {
  .my-selector {
    @media tv {
      background-color: black;
    }
  }
};
@media (orientation:portrait) {
    @my-ruleset();
}
// detached ruleset with a mixin
@detached-ruleset: { 
    .mixin() {
        color:blue;
    }
};
// call detached ruleset
.caller {
    @detached-ruleset(); 
    .mixin();
}

=>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.top {
  background: red;
}
header {
  background-color: blue;
}
@media screen and (min-width: 1200) {
  header {
    background-color: red;
  }
}
html.lt-ie9 header {
  background-color: red;
}
@media (orientation: portrait) and tv {
  .my-selector {
    background-color: black;
  }
}
.caller {
  color: blue;
}

局部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@detached-ruleset: {
  caller-variable: @caller-variable; // variable is undefined here
  .caller-mixin(); // mixin is undefined here
};
selector {
  // use detached ruleset
  @detached-ruleset(); 
  // define variable and mixin needed inside the detached ruleset
  @caller-variable: value;
  .caller-mixin() {
    variable: declaration;
  }
}
@variable: global;
@detached-ruleset: {
  // will use global variable, because it is accessible
  // from detached-ruleset definition
  variable: @variable; 
};
selector {
  @detached-ruleset();
  @variable: value; // variable defined in caller - will be ignored
}
#space {
  .importer-1() {
    @detached: { scope-detached: @variable; }; // define detached ruleset
  }
}
.importer-2() {
  @variable: value; // unlocked detached ruleset CAN see this variable
  #space > .importer-1(); // unlock/import detached ruleset
}
.use-place {
  .importer-2(); // unlock/import detached ruleset second time
   @detached();
}

=>

1
2
3
4
5
6
7
8
9
10
selector {
  caller-variable: value;
  variable: declaration;
}
selector {
  variable: global;
}
.use-place {
  scope-detached: value;
}

导入指令

1
2
3
4
5
6
7
8
.foo {
  background: #900;
}
@import "this-is-valid.less";
@import "foo";      // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php";  // foo.php imported as a less file
@import "foo.css";  // statement left in place, as-is

导入选项

  • reference: use a Less file but do not output it
  • inline: include the source file in the output but do not process it
  • less: treat the file as a Less file, no matter what the file extension
  • css: treat the file as a CSS file, no matter what the file extension
  • once: only include the file once (this is default behavior)
  • multiple: include the file multiple times
  • optional: continue compiling when file is not found

混入守卫

1
2
3
4
5
6
7
8
9
10
11
.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

=>

1
2
3
4
5
6
7
8
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

CSS守卫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.my-optional-style() when (@my-option = true) {
  button {
    color: white;
  }
}
.my-optional-style();
button when (@my-option = true) {
  color: white;
}
& when (@my-option = true) {
  button {
    color: white;
  }
  a {
    color: blue;
  }
}

循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}
div {
  .loop(5); // launch the loop
}
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

=>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

合并

1
2
3
4
5
6
7
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

=>

1
2
3
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

空间

1
2
3
4
5
6
7
.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

=>

1
2
3
.myclass {
  transform: scale(2) rotate(15deg);
}

父选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a {
  color: blue;
  &:hover {
    color: green;
  }
}
.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }
  &-custom {
    background-image: url("custom.png");
  }
}

=>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a {
  color: blue;
}
a:hover {
  color: green;
}
.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

&

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.link {
  & + & {
    color: red;
  }
  & & {
    color: green;
  }
  && {
    color: blue;
  }
  &, &ish {
    color: cyan;
  }
}
.grand {
  .parent {
    & > & {
      color: red;
    }
    & & {
      color: green;
    }
    && {
      color: blue;
    }
    &, &ish {
      color: cyan;
    }
  }
}
.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}
p, a, ul, li {
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}

=>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}
.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}
.header .menu {
  border-radius: 5px;
}
.no-borderradius .header .menu {
  background-image: url('images/button-background.png');
}
p,
a,
ul,
li {
  border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
  border-top: 0;
}

函数手册

http://lesscss.org/functions/

杂项函数

  • color
  • image-size
  • image-width
  • image-height
  • convert
  • data-uri
  • default
  • unit
  • get-unit
  • svg-gradient

字符串函数

  • escape
  • e
  • % format
  • replace

列表函数

  • length
  • extract

数学函数

  • ceil
  • floor
  • percentage
  • round
  • sqrt
  • abs
  • sin
  • asin
  • cos
  • acos
  • tan
  • atan
  • pi
  • pow
  • mod
  • min
  • max

类型函数

  • isnumber
  • isstring
  • iscolor
  • iskeyword
  • isurl
  • ispixel
  • isem
  • ispercentage
  • isunit
  • isruleset

颜色定义函数

  • rgb
  • rgba
  • argb
  • hsl
  • hsla
  • hsv
  • hsva

颜色通道函数

  • hue
  • saturation
  • lightness
  • hsvhue
  • hsvsaturation
  • hsvvalue
  • red
  • green
  • blue
  • alpha
  • luma
  • luminance

颜色操作函数

  • saturate
  • desaturate
  • lighten
  • darken
  • fadein
  • fadeout
  • fade
  • spin
  • mix
  • tint
  • shade
  • greyscale
  • contrast

颜色混合函数

  • multiply
  • screen
  • overlay
  • softlight
  • hardlight
  • difference
  • exclusion
  • average
  • negation