less 的简介

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端；
less 官方文档 http://lesscss.org/
less 中文文档 https: /less.bootcss.com/
less 文件后缀为。Less，例如：index.less

less 的安装

$ npm install -g less

less 的编译方法

在 nodejs 环境中使用 less

在命令行中运行 less: lessc styles..less styles..css
编译成生产环境下的 css 文件：lessc-x styles.less styles.css

在浏览器环境中使用 less

<link rel="stylesheet/less"type="text/css"href="styles.less"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

工具编译

考拉 http://koala-app.com/index-zh.html

变量

变量正常用法（variables）

在一个位置控制常用值 .less 文件中

less

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);
// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.css 文件中对应的 css 代码：

css

a,
.link {
  color: #428bca;
}
.widget {
  color: #fff;
  background: #428bca;
}

1
2
3
4
5
6
7
8

变量作为选择器名称使用

语法：变量声明：@变量：值 -------------- 使用：.@{变量} .less 文件中代码：

less

@my-selector: bananer;
// Usage
.@{my-selector} {
    font-weight: bold;
    color: lightblue;
}
// .css 文件中对应的 css 代码：
.bananer {
  font-weight: bold;
  color: lightblue;
}

1
2
3
4
5
6
7
8
9
10
11

变量作为属性名称使用

使用方法与作为选择器名称使用一样： .less 文件中代码：

less

// Properties
@property: color;

.@{property} {
    @{property}: red;
    background-@{property}: green;
}

.css 文件中对应的 css 代码：

.color {
  color: red;
  background-color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

变量作为 URL 使用

语法：@变量：值 ----------- URL 使用：url("@{变量}/ 图片名称")（注：变量即路径）直接在变量中直接写入完整的路径也是可以的 .less 文件中的代码：

less

//URLs
@images: "../img";
body {
    background-image: url("@{images}/white-sand.png");
}

// .css 文件中对应的 css 代码：

body {
  background-image: url("../img/white-sand.png");
}

1
2
3
4
5
6
7
8
9
10
11

变量作为 @import 语句使用

用法跟 URL 一样

less

// Variables
@themes: "../test";
// Usage
@import "@{themes}/test.less";

1
2
3
4

在。css 文件中输出的即为 tess.less 中所对应的 css 代码，而不是 @import 语句

变量作为变量名使用

在。less 文件中，可以使用变量定义另一个变量的名称 .less 文件中的代码：

less

// Variable Variables
@primary: lightblue;
@secondary: lightyellow;

.section {
    @color: primary;

    .element {
        color: @@color;
    }
    p {
        color: @secondary;
    }
}

// .css 文件中对应的 css 代码：

.section .element {
  color: lightblue;
}
.section p {
  color: lightyellow;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

变量的 Lazy Evaluation

变量在使用之前可以不必声明，可以在使用之后声明如果存在局部变量，那么该作用域的属性会引用局部变量，如果不存在局部变量，那么后面声明的变量会覆盖前面声明的变量（如果声明了两个局部变量，同理） .less 文件中的代码：

less

// Lazy Evaluation
.lazy-eval {
    width: @var;
    @a: 100px;
}
@var: @a;
@a: 80px;
@a: 40px;

.css 文件中对应的 css 代码：

.lazy-eval {
  width: 100px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

属性作为变量

使用 $prop 语法将属性当作变量来使用 .less 文件中的代码：

less

//   Properties as Variables
.widget {
    color: #dafafb;
    background-color: $color;
}
.ul {
    height: 20px;
    .li {
        padding: $height;
    }
    height: 40px;
}

// .css 文件中对应的 css 代码：

.widget {
  color: #dafafb;
  background-color: #dafafb;
}
.ul {
  height: 20px;
  height: 40px;
}
.ul .li {
  padding: 40px;
}

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

默认变量

默认变量使得可以通过在后面放置定义来覆盖变量 .less 文件中的代码：

less

// Default Variables
@base-color: green;
@dark-color: darken(@base-color, 20%);  // 深绿色

.footer {
    @base-color: red;
    color: @dark-color;
}

<!-- .css 文件中所对应的 css 代码： -->

.footer {
  color: #990000;  // 深红色
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

由于延迟加载， @base-color 已被覆盖并且 @dark-color 为深红色

less

@color: red;
@size: 14px;
.container{
 background: @color;
 font-size: @size;
}
/* 编译后的css代码 */
.container {
 background: red;
 font-size:14px
}

1
2
3
4
5
6
7
8
9
10
11

嵌套（Nesting）

嵌套类

less

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

1
2
3
4
5
6
7
8
9
10
11
12

Parent Selector 正常用法

使用 & 运算符来引用父选择器。嵌套规则的父选择器由 & 运算符表示，并在将修改类或伪类应用于现有选择器时使用。

less

// .less文件中的代码：

a {
    color: lightblue;
    &:hover {
        color: lightcoral;
    }
    &:visited {
        color: lightseagreen;
    }
    &:focus {
        color: lime;
    }
}

// .css文件中对应的css代码：

a {
  color: lightblue;
}
a:hover {
  color: lightcoral;
}
a:visited {
  color: lightseagreen;
}
a:focus {
  color: lime;
}

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

通过 Parent Selector 产生重复的类名

less

// .less 文件中的代码：

.button {
    &-ok {
        background-image: url("ok.png");
    }
    &-delete {
        background-image: url("delete.png");
    }
    &-add {
        background-image: url("add.png");
    }
}

// .css 文件中对应的 css 代码：

.button-ok {
  background-image: url("ok.png");
}
.button-delete {
  background-image: url("delete.png");
}
.button-add {
  background-image: url("add.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

Multiple &

通过使用 & 运算符，可以重复引用父选择器，而不用使用其名称，直接使用 & 运算符引用即可。

less

// .less 文件中的代码：
// Multiple Parents `在这里插入代码片`
.nav {
    & + & {
        margin: 10px;
    }
    & & {
        padding: 10px;
    }
    && {
        width: 20px;
    }
    &>& {
        border: 1px solid red;
    }
    & , &bar {
        position: relative;
    }
}

// .css 文件中对应的 css 代码：

.nav + .nav {
  margin: 10px;
}
.nav .nav {
  padding: 10px;
}
.nav.nav {
  width: 20px;
}
.nav > .nav {
  border: 1px solid red;
}
.nav,
.navbar {
  position: relative;
}

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

注：& 运算符代表的是所有父选择器，不仅仅是上一级的父选择器，eg:

less

// .less 文件中的代码：
//& 是代表所有父选择器，而不仅仅是指上一级祖先
.grandfather {
    .father {
        & {
            color: lightgoldenrodyellow;
        }
    }
}
// .css 文件中对应的 css 代码：

.grandfather .father {
  color: lightgoldenrodyellow;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

父选择器的顺序

在选择器排序更改时，将选择器预留到继承（父）选择器器很有用，可以把 & 运算符放置在当前选择器之后来完成，eg:

less

// .less 文件中的代码：
// Change Selector Order
.header {
    .menu {
        border-radius: 5px;
        .no-border & {
            background-image: url("border.png");
        }
    }
}

// .css 文件中对应的 css 代码：

.header .menu {
  border-radius: 5px;
}
.no-border .header .menu {
  background-image: url("border.png");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

父选择器之间的组合

& 可以产生列表中的选择器的所有可能的排列，用逗号分隔，eg:

less

// .less 文件中的代码：
// Combinatorial Explosion
p , a , li , span {
    margin-top: 10px;
    & + & {
        padding: 5px;
    }
}

// .css 文件中对应的 css 代码：

p,
a,
li,
span {
  margin-top: 10px;
}
p + p,
p + a,
p + li,
p + span,
a + p,
a + a,
a + li,
a + span,
li + p,
li + a,
li + li,
li + span,
span + p,
span + a,
span + li,
span + span {
  padding: 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

Merge

Merge 将多个属性中的值聚合到单个属性下的逗号或空格分隔的列表中，对于背景和变换等属性很有作用。

用逗号附加属性

在属性后面加上 “+” 来标记，eg:

less

// .less 文件中的代码：

.mixin() {
    box-shadow+: inset 0 0 10px #666;
    font+: 16px, red;
}
.myClass {
    .mixin();
    box-shadow+: 10px 10px 20px 5px black;
    font+: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font+: 600;
}

// .css 文件中对应的 css 代码：

.myClass {
  box-shadow: inset 0 0 10px #666, 10px 10px 20px 5px black;
  font: 16px, red, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, 600;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

用空格附加属性

在属性后面加上 “+_” 来标记，eg: .less 文件中的代码：

.mixin1() { transform+: scale(2); } .start { .mixin1(); transform+: rotate(15deg); }

.css 文件中对应的 css 代码：

.start { transform: scale(2) rotate(15deg); }

extend 的用法

Extend 是一个 Less 伪类，通过：extend 在一个选择器中扩展其他选择器样式，从而与匹配其引用的选择器合并。

Extend 的简单使用

.less 文件中的代码：

less

// Extend
nav ul {
    &:extend(.line);
    background-color: lightgray;
}
.line {
    color: maroon;
}

// .css文件中对应的css代码：

nav ul {
  background-color: lightgray;
}
.line,
nav ul {
  color: maroon;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在上述设定的规则中，只要.line 这个选择器出现，:extend 将会把 nav ul 应用到。line 上

Extend 语法

extend 可以附加到选择器，也可以放置在规则集中

less

// Extend Syntax
.a:extend(.f){}
.b {
    &:extend(.g);
} // 两种语法都可以实现对选择器的 Extend
.c:extend(.f all) {} // 加了关键字 all, 可以匹配所有带有".f"的选择器，eg:".f.x"
.c:extend(.f, .g) {} // 可以包含一个或者多个要扩展的类
.f {
    height: 30px;
}
.g {
    color: green;
}
.f.x {
    padding: 10px;
}

// .css 文件中对应的 css 代码：

.f,
.a,
.c,
.c {
  height: 30px;
}
.g,
.b,
.c {
  color: green;
}
.f.x,
.c.x {
  padding: 10px;
}

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

Extend 附加到选择器

一个选择器可以包含多个 extend 子句，但是所有扩展都必须在选择器的末尾，任何一个选择器都可以具有 extend 关键字：

是在选择器之后扩展：eg、 .big-division:extend(.f);
选择器和 extend 之间允许有空格：eg、.big-division :extend(.f);
允许多个扩展，eg、.big-division:extend(.f):extend(.g）; 也可以写成： .big-division:extend(.f , .g);
扩展必须是最后一个，eg、.big-division:extend(.f).nth-child(odd)

less

// .less 文件中的代码：
// Extend Attached to Selector
.big-division ,
.big-bag:extend(.f),
.big-bucket:extend(.g) {
    float: left;
}
.f {
    height: 30px;
}
.g {
    color: green;
}

// .css 文件中对应的 css 代码：

.f,
.big-bag {
  height: 30px;
}
.g,
.big-bucket {
  color: green;
}
.big-division,
.big-bag,
.big-bucket {
  float: left;
}

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

extend 内部规则集

可以使用 &:extend 语法将 extend 放置在规则集的主体中，与每个选择器之后添加扩展名是一样的 .less 文件中的代码：

less

// Extend Inside Ruleset
.pre:hover, // 在内部使用 extend
.some-class {
    &:extend(#pre);
}

#pre{
    margin: auto;
}

.css 文件中对应的 css 代码：

#pre,
.pre:hover,
.some-class {
  margin: auto;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

extend 嵌套选择器

extend 可以匹配嵌套的选择器 .less 文件中的代码：

less

// Extending Nested Selectors
.buck {
    tr {
        color: orange;
    }
}
.some-class:extend(.buck tr) {}
.some-one {
    &:extend(.buck tr);
}

.css 文件中对应的 css 代码：

.buck tr,
.some-class,
.some-one {
  color: orange;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

精确匹配与 extend

默认情况下 extend 是查找与选择器之间的精确匹配，选择器是否使用"*"并不重要，不管第 n 个表达式有没有相同的含义，都是需要有相同的形式才能匹配。唯一的例外是属性选择器中的引号，less 知道它们具有相同的含义并与之匹配。 .less 文件中的代码：

less

/* Exact Matching with Extend  即完全匹配 */
.class.a,
.a.class,
.a>.class,
.class>.a {
    margin: 0 auto;
}

.test:extend(.class){}  // 这两个 extend 不会与任何选择器匹配
.test1:extend(*.class){}
 .match:extend(.class.a){}

// .css 文件中对应的 css 代码：

.class.a,
.a.class,
.a > .class,
.class > .a,
.match {
  margin: 0 auto;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

伪类的顺序会影响选择器的精确匹配，eg、选择器 .a:hover:visited 与 .a:visited:hover 匹配相同的元素集，但 extend 将它们视为不同的元素：

less

// .less 文件中的代码：
.a:hover:visited {
    text-decoration: palegoldenrod;
}
.selector:extend(.a:visited:hover){}
.selector1:extend(.a:hover:visited){}

// .css 文件中对应的 css 代码：

.a:hover:visited,
.selector1 {
  text-decoration: palegoldenrod;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

nth 表达式

nth 表达式是比较重要的。表达式 1n+3 和 n+3 是等效的，但是 extend 与它们不匹配

less

// .less 文件中的代码：
:nth(1n+5) {
    padding: 30px;
}
.child:extend(:nth(n+5)) {}
.child1:extend(:nth(1n+5)){}

// .css 文件中对应的 css 代码：

:nth(1n+5),
.child1 {
  padding: 30px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

属性选择器中的引用类型不区分，以下所有都是等效的

less

// .less 文件中的代码：
// 属性选择器中的引用类型没有区别，以下所有都是等效的
[title=identifier] {
    color: red;
}
[title='identifier'] {
    color: green;
}
[title="identifier"] {
    color: blue;
}
.single {
    &:extend([title="identifier"]);
}

// .css 文件中对应的 css 代码：

[title=identifier],
.single {
  color: red;
}
[title='identifier'],
.single {
  color: green;
}
[title="identifier"],
.single {
  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

extend “all”

当在使用 extend 时指定了"all" 关键字，它将会与该选择器作为另一个选择器的一部分进行匹配。选择器将会被复制，并且只有选择器的匹配部分将被替换为 extend, 从而生成一个新选择器

less

// .less 文件中的代码：

// Extend "all"
.test.a .b,
.test.c {
    border: 1px solid lightgray;
    &:hover {
        stroke-width: initial;
    }
}
.test {
    &:visited {
        color: bisque;
    }
}
.replacement:extend(.test all){}

// .css 文件中对应的 css 代码：

.test.a .b,
.test.c,
.replacement.a .b,
.replacement.c {
  border: 1px solid lightgray;
}
.test.a .b:hover,
.test.c:hover,
.replacement.a .b:hover,
.replacement.c:hover {
  stroke-width: initial;
}
.test:visited,
.replacement:visited {
  color: bisque;
}

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

带 extend 的插值选择器

extend 无法将选择器与变量进行匹配。如果选择器包含变量，extend 将会忽略，不可以将 extend 附加到插值选择器中（注：官网说可以将 extend 附加到插值选择器中，经检测是不可以的）

less

// .less 文件中对应的代码：
// Selector Interpolation with Extend
@base: .bucket;
@{base} {
    font: outline;
}
.mark:extend(.bucket) {}
.mark1:extend(@{base}) {}   // 使用带有变量的 extend，该选择器将不匹配

// .css 文件中对应的代码：

.bucket,
.mark {
  font: outline;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

不可以将：extend 附加到插值选择器中

less

// .less 文件中的代码：

.ground {
    box-sizing: initial;
}
@{form}:extend(.ground){}
@form: #ground;
// 把：extend 附加到插值选择器不可以实现
.visit {
    color: red;
}
@{font}:extend(.visit) {}
@font: .meta;

.before {
    color: blue;
  }
  @{variable}:extend(.before) {}
  @variable: .selector;

// .css 文件中对应的 css 代码：

.ground {
  box-sizing: initial;
}
.visit {
  color: red;
}
.before {
  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

在 @media 范围内 /extend

声明：extend 内的 @media 只与同一媒体声明中的选择器进行匹配

less

// .less 文件中的代码：
// Scoping / Extend Inside @media
// 在媒体声明内编写的扩展只与同一媒体声明内的选择器匹配
@media print {
    .screenClass:extend(.second) {}
    .second {
        border-radius: unset;
    }
}
.second {
    columns: 3;
}

// .css 文件中的 css 代码：

@media print {
  .second,
  .screenClass {
    border-radius: unset;
  }
}
.second {
  columns: 3;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

extend 与嵌套 @media 中的选择器不匹配

less

// .less 文件中的代码：
// 在媒体声明中编写的 extend 与嵌套声明中的选择器不匹配
@media screen {
    .one:extend(.two) {}
    @media (min-width: 768px) {
        .two {
            color: bisque;
        }
    }
}

// .css 文件中的代码：

@media screen and (min-width: 768px) {
  .two {
    color: bisque;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

顶级 extend 将匹配所有内容，包括嵌套 @media 中的选择器

less

.less 文件中的代码：

// 顶级扩展匹配所有内容，包括嵌套媒体中的选择器
@media screen {
    .start {
        bottom: unset;
    }
    @media (max-width: 1024px) {
        .stop {
            left: 12px;
        }
    }
}
.end:extend(.start, .stop) {}

// .css 文件中对应的 css 代码：

@media screen {
  .start,
  .end {
    bottom: unset;
  }
}
@media screen and (max-width: 1024px) {
  .stop,
  .end {
    left: 12px;
  }
}

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

重复检测

extend 中不会进行重复检测

less

// .less 文件中的代码：

.alert-info,
.widget {
  display: block;
}
.alert:extend(.alert-info, .widget) {}

// .css 文件中对应的 css 代码：

.alert-info,
.widget,
.alert,
.alert {
  display: block;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

extend 的用例

经典用例：该用例是为了避免基类，eg、想要一个动物的子类型来替代背景，那么直接引用".bear"这个类就好了

less

// .less 文件中的代码：

.animal {
    background-color: black;
    color: white;
  }
  .bear {
    &:extend(.animal);
    background-color: brown;
  }

.css 文件中对应的代码：

.animal,
.bear {
  background-color: black;
  color: white;
}
.bear {
  background-color: brown;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

减少 css 大小：mixins 将所有的属性复制到选择器中，这可能导致不必要的重复。因此，可以使用 extend 来将选择器上移到要使用的属性，这可以减少 css 的次数不带有扩展的

less

// .less 文件中的代码：
//Reducing CSS Size
  // 使用扩展来将选择器上移到要使用的属性，从而减少生成的 CSS
  .my-inline-block() {
      display: inline-block;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
  .thing1 {
      .my-inline-block;
  }
  .thing2 {
      .my-inline-block;
  }

// .css 文件中的所对应的 css 代码：

.thing1 {
  display: inline-block;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.thing2 {
  display: inline-block;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

带有扩展的

less

// .less 文件中的代码：

.my-inline-block {
      display: inline-block;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
.thing3 {
    &:extend(.my-inline-block);
}
.thing4 {
    &:extend(.my-inline-block);
}

// .css 文件中对应的 css 代码：

.my-inline-block,
.thing3,
.thing4 {
  display: inline-block;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

组合样式 / 更高级的 mixin: 如果有两个不同的 html 模块，但需要对两者应用相同的样式，则可以使用 extend 来关联两个区域

less

// .less 文件中的代码：

// 如果有两个不同的 html 块，但需要对两者应用相同的样式，则可以使用扩展来关联两个区域
li.list > a {
    top: 12px;
  }
  button.list-style {
    &:extend(li.list > a); // use the same list styles
  }

// .css 文件中对应的 css 代码：

li.list > a,
button.list-style {
  top: 12px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Mixins 的用法

Mixins 类似于编程语言中的函数。Mixins 是一组 css 属性，可以将一个类的属性用于另一个类，并且包含类名作为其属性。在 less 中，可以使用类选择器或者 id 选择器以与 css 样式相同的方式声明 mixin.mixin 可以存储多个值，并且可以在必要的时候在代码中重复使用

在 mixin 中使用类选择器和 id 选择器

less

// .less文件中的代码：

.a, #b {
    color: red;
}
.mixin-a {
    .a();//括号是可选的
}
.mixin-b {
    #b(); //括号是可选的
}

// .css文件中对应的css代码：

.a,
#b {
  color: red;
}
.mixin-a {
  color: red;
}
.mixin-b {
  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

不在 css 中输出 mixin

当你要创建一个 mixin, 但是你又不希望 mixin 出现在 css 文件中，可以在 mixin 后面加个括号

less

// .less 文件中的代码：

// 不输出 mixin
.mixin-one {
    font-size: 15px;
}
.mixin-two() {
    font-weight: 700;
}

#one-two {

    .mixin-one();
    .mixin-two();
}

// .css 文件中对应的 css 代码：

.mixin-one {
  font-size: 15px;
}

#one-two {

  font-size: 15px;
  font-weight: 700;
}

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

mixin 中的选择器

mixin 中不仅可以包含属性，还可以包含选择器

less

// .less 文件中的代码：
// mixin 中的选择器
.mixin-three() {
    &:hover {
        border: 1px solid red;
    }
}

#button {
    .mixin-three();
}

// .css 文件中对应的 css 代码：

#button:hover {
  border: 1px solid red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

mixin 命名空间

命名空间用于在通用名称下对 mixin 进行分组。使用命名空间可以避免名称冲突，并从外部封装 mixin

less

// .less 文件中的代码
// 命名空间
#mixin-four() {
    .mixin-four-one() {
        color: lightsalmon;
    }
}

#light {
  #mixin-four > .mixin-four-one;// 命名空间不可以带有括号
    // #mixin-four .mixin-four-one;
    // #mixin-four.mixin-four-one;
}

// 注：引用时两个 mixin 之间的空格和 ">"都是可选的，看个人习惯写法
// .css 文件中对应的 css 代码：

#light {
  color: lightsalmon;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

受保护的命名空间

当 guard 应用于命名空间时，只有在 guard 条件返回 true 时才使用由命名空间定义的 mixin, 受保护的命名空间的评估方式与 mixin 的 guard 方式完全相同

less

// .less 文件中的代码：
// 受保护的命名空间

#namespace() when (@color=green) {

    margin: 10px;
}

#namespace-one {

    .mixin-namespace when (@color=green){
        padding: 10px;;
    }
}
@color: green;

// .css 文件中的代码：

#namespace {

  margin: 10px;
}

#namespace-one .mixin-namespace {

  padding: 10px;
}

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

!important 关键字

!important 关键字用于覆盖特定属性，当它在 mixin 调用之后放置时，它会将所有继承的属性标记为！important .less 文件中的代码：

less

// !important 关键字
.mixin-five() {
    color: lightseagreen;
    margin: auto;
}

#unimportant {
    .mixin-five();
}

#important {
    .mixin-five()!important;
}

// .css 文件中对应的 css 代码：

#unimportant {
  color: lightseagreen;
  margin: auto;
}

#important {
  color: lightseagreen !important;
  margin: auto !important;
}

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

mixin 参数

mixin 可以接受参数，参数是 mixin 传递到选择器的变量。mixin 可以使用一个或者多个参数，通过参数和属性来扩展 less 的功能，以便在调用 mixin 时自定义 mixin 的输出

less

// mixin 中的参数
// .less 文件中的代码
.mixin-six(@color) {
    border-color: @color;
}
.mixin-six-one(@font-weight: 700){ //mixin 可以具有参数的默认值
  font-weight: @font-weight;
}

#six {
  .mixin-six(skyblue);
  .mixin-six-one();
}

// .css 文件中的 css 代码：

#six {
  border-color: skyblue;
  font-weight: 700;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

具有多个参数的 mixins

参数可以使用逗号或者分号分隔。使用逗号符号，可以将其解释为 mixin 参数分隔或者 css 列表分隔符。如果在 mixin 中使用了分号，那么分号则是参数分隔符，逗号则是 css 列表分隔符。注：当你使用了逗号作为 mixin 的分隔符时，则不可能创建以逗号分隔的列表作为参数，同时，如果在 mixin 调用或者声明中看到至少一个分号，则参数使用分号分隔，所有逗号都属于 css 列表 1）、两个参数：每一个包含逗号分隔的列表：.name(1,2,3;str1,str2); 2)、三个参数，并且每个包含一个数字：.name(1,2,3); 3)、使用分号创建 mixin 调用一个包含逗号分隔的 css 列表参数：.name(1,2,3;); 4)、逗号分隔的默认值：.name(@param1:red, blue;);

less

.less 文件中的代码：

// 多个参数的 mixin
.mixin-seven(@padding, @font) {
    padding: @padding;
    font: @font;
}

#mixin-seven-one {

    .mixin-seven(10px, 20px);// 使用逗号作为 mixin 参数的分隔符
}

#mixin-seven-two {

    .mixin-seven(10px,20px; 10px,green);// 使用分号作为 mixin 参数的分隔符
}

// .css 文件中的代码：

#mixin-seven-one {

  padding: 10px;
  font: 20px;
}

#mixin-seven-two {

  padding: 10px, 20px;
  font: 10px, green;
}

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

可以定义具有相同名称和数量参数的 mixin，如果使用相同的 mixin 与一个相同参数，那么这个参数的属性将会传入到所有 mixin 中

less

// .less 文件中的代码：

.mixin-eight(@color) {
    color-1: @color;
}
.mixin-eight (@color; @padding:2px) {
    color-2: @color;
    padding-2: @padding;
}
.mixin-eight (@color; @padding; @float:left) {
    color-3: @color;
    padding-3: @padding;
    float: @float;
}

#mixin-eight {

    .mixin-eight(green); //mixin 名字和参数相同，则会被传入到相同的 mixin 中
}

#mixin-eight-one {

    .mixin-eight(red; 10px);
}

// .css 文件中对应的 css 代码：

#mixin-eight {

  color-1: green;
  color-2: green;
  padding-2: 2px;
}

#mixin-eight-one {

  color-2: red;
  padding-2: 10px;
  color-3: red;
  padding-3: 10px;
  float: left;
}

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

命名参数

mixin 可以通过使用它们的名称提供参数而不是位置。参数没有放置值的任何顺序，它们可以通过名称引用，并切可以不必采用任何特殊顺序

less

// .less 文件中的代码：
// 命名参数
.mixin-nine (@color; @border; @margin) {
    border-color: @color;
    border: @border;
    margin: @margin;
}

#mixin-nine-one {
  .mixin-nine(@color:red; @margin: 10px; @border: 1px );
}

#mixin-nine-two {
  .mixin-nine(#645574, @border: 2px, 20px);
}

// .css 文件中对应的 css 代码：

#mixin-nine-one {

  border-color: red;
  border: 1px;
  margin: 10px;
}

#mixin-nine-two {
  border-color: #645574;
  border: 2px;
  margin: 20px;
}

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

@arguments variable

@arguments 在 mixin 内部有特殊含义，当调用 mixin 时，@arguments 包括所有传递的参数。当不想使用单个参数时，@argument 参数将很有用

less

// .less 文件中的代码：
// @arguments 变量
.mixin-ten (@x; @y; @size; @color) {
    box-shadow: @arguments;
}

#mixin-ten {

    .mixin-ten(5px, 5px, 2px, red);
}

// .css 文件中对应的 css 代码：

#mixin-ten {
  box-shadow: 5px 5px 2px red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

十一、高级参数和 @rest variable mixin 通过使用…提供可变数量的参数，可以通过在变量名称后面放置…为变量赋值参数

less

// .less 文件中的代码：
// 高级参数和 @rest 变量
.mixin-eleven (@color; @rest...) {
    color: @color;
    margin: @rest;
    padding: @rest;
}

#mixin-eleven {
    .mixin-eleven(red;10px;20px);
}

// .css 文件中的代码：
#mixin-eleven {
  color: red;
  margin: 10px 20px;
  padding: 10px 20px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

模式匹配

可以通过向其传递参数来更改 mixin 的行为

less

// .less 文件中的代码：

// 模式匹配
.mixin-twelve (dark; @color: red) {
    color: @color;
}
.mixin-twelve(light, @color: lightpink) {
    color: @color;
}
.mixin-twelve(@_) {
    display: inline;
}

#mixin-twelve {

    .mixin-twelve(@select);
}
@select: light;

// .css 文件中的代码：

#mixin-twelve {

  color: lightpink;
  display: inline;
}

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

如果 @select 的值为 dark, 则它会以 red 这个颜色显示结果，因为 mixin 定义与 dark 作为第一个参数匹配

第一个 mixin 定义不匹配，因为它应 dark 作为第一个参数。第二个 mixin 定义匹配，因为它符合预期 light。第三个 mixin 定义匹配，因为它期望任何值。

使用 mixin 作为函数

mixin 和函数的工作方式非常相似。类似于函数，mixins 可以嵌套，可以接受参数和返回值

less

// .less 文件中的代码：
//mixin 函数
  .mixin-function(@x, @y) {
    @average: (@x+@y)/2;
  }

#mixin-function {
      margin: .mixin-function(48, 12)[@average];
      //.mixin-function(48, 12)[@average] 是一个返回值，要赋给对应的属性
  }

// .css 文件中对应的 css 代码：

#mixin-function {
  margin: 30;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

覆盖混合值：如果有多个匹配的 mixin，则将评估所有 mixin，并返回带有该标识符的最后一个匹配值，这类似于 css 中的层叠，它允许“覆盖”mixin 值

less

// .less 文件中的代码：
//   覆盖 mixin 值
.cover() {
    .my() {
        prop: left;
    }
}
.cover() {
    .my() {
        prop: right;
    }
}

#cover {
    float: .cover.my()[prop];
}

// .css 文件中的 css 代码：

#cover {
  float: right;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

未命名的查询：如果在调用 mixin 时没有指定查找的 [@lookup]，而是直接在 mixin 或规则集调用之后写入 [], 则所有值将级联，最后一个声明的值将被选择

less

// .less 文件中的代码：

// 未命名的查询
.mixin-lookup(@x; @y) {
    @add: @x + @y;
    @multiply: @x * @y;
}
@lookup : {  // 对于 mixin 调用规则集或者变量中，同样适用
    @num1: 10px;
    @num2: 20px;
}

#mixin-lookup {
  margin: .mixin-lookup(5px; 10px)[]; // 不指定变量名，则匹配最后一个变量
  padding: @lookup[];
}

// .css 文件中的 css 代码：

#mixin-lookup {
  margin: 50px;
  padding: 20px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

将 mixin 和变量解锁到调用者作用域中：由变量和 mixin 组成的 mixin 可以在调用者的作用域中使用，并且是可见的。但是有一个例外，如果调用者包含具有相同名称的变量，那么该变量不会复制到调用者的作用域中。只有调用者范围内的变量被保护，并且继承的变量将被覆盖

less

// .less 文件中的代码：
// 在调用者作用域中直接定义的变量不能被覆盖。但是，在调用者父作用域中定义的变量不受保护，将被覆盖
.mixin() {
    @size: in-mixin;
    @definedOnlyInMixin: in-mixin;
  }
  .class {
    @definedOnlyInMixin: globaly-defined-value;
    margin: @size @definedOnlyInMixin; //@definedOnlyInMixin 被保护，继承的变量将会被覆盖
    .mixin();
  }
  @size: globaly-defined-value;

.css 文件中的代码：

.class {
  margin: in-mixin globaly-defined-value;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

每当一个 mixin 定义在另一个 mixin 中时，它也可以用作返回值

less

// .less 文件中的代码：
// 在 mixin 中定义的 mixin 充当返回值
.mixin-nine(@val) {
    .mixin-nine1() {
        declaration: @val;
    }
}

#nine {
    .mixin-nine(5);
    .mixin-nine1();
}

// .css 文件中的 css 代码：

#nine {
  declaration: 5;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

递归 mixins

在 less 中，mixin 可以与 Guard 表达式和模式匹配结合使用，可用于创建各种迭代或者循环结构

less

// .less 文件中的代码：
.for(@count) when (@count>0) {
    .for(@count - 1);
    height: @count * 10px;

}

#height {
    .for(3);
}

// .css 文件中的 css 代码：

#height {

  height: 10px;
  height: 20px;
  height: 30px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

使用递归循环生成 css 网格类：

less

.less 文件中的代码：

.grid(@n, @i:1) when (@i <= @n) {

# column-@{i} {
        height: @i * 100% / @n;
 }
    .grid(@n, @i+1);
}
.grid(5);

// .css 文件中的代码：

#column-1 {

  height: 20%;
}

#column-2 {

  height: 40%;
}

#column-3 {

  height: 60%;
}

#column-4 {

  height: 80%;
}

#column-5 {

  height: 100%;
}

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

Mixin Guards

如果你想在表达式上匹配简单的值或者参数数量，可以使用 Guards。它与 mixin 声明相关联，并包括附加到 mixin 的条件。每个 mixin 将有一个或多个由逗号分隔的防护，并且 guard 必须包含在括号中。Less 使用 Guard 的 mixins 而不是 if/else 语句，并执行计算以指定匹配的 mixin，这与 @media 查询功能规范类似

less

// .less 文件中的代码：
// mixins 守卫
.mixin-ten(@z) when (lightness(@z)>50%) {
    background-color: black;
}
.mixin-ten(@z) when (lightness(@z)<50%) {
    background-color: white;
}
.mixin-ten(@z) when (@z=@z) {
    color: @z;
}
.myClass-one {
    .mixin-ten(red);
}
.myClass-two {
    .mixin-ten(skyblue);
}

.css 文件中的 css 代码：

.myClass-one {
  color: red;
}
.myClass-two {
  background-color: black;
  color: skyblue;
}

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

Guard 比较运算符：less 包含五个 guard 比较运算符：< , > , <= , >= 和 =。可以使用比较运算符（=) 来比较数字，字符串，标识符等，而剩余的运算符只能与数字一起使用

less

// .less 文件中的代码：

.max(@num1, @num2) when (@num1 > @num2) {
    height: @num1;
}
.max(@num1, @num2) when (@num1 <@num2) {
    height: @num2;
}

#max {
    .max(5px, 10px);
}

// .css 文件中的 css 代码：

#max {

  height: 10px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Guard 逻辑运算符：可以使用关键字来解决 Guard 逻辑运算符。可以使用和关键字组合使用保护条件，并且可以使用 not 关键字取消条件

less

// .less 文件中的代码：
//Guard 逻辑运算符
.logic(@value) when (isnumber(@value)) and (@value>10) { // 使用 and 来组合 Guard
    padding: @value;
}

#logic {
    .logic(11px);
}
.logic-one(@value1) when (@value1<5) , (@value1>10) { // 逗号模仿 or 运算符
    padding: @value1;
}

#logic-one {
    .logic-one(-5px);
}
.logic-two(@value2) when not (@value2>0) {  //not 关键字否定条件
    padding: @value2;
}

#logic-two {
    .logic-two(-10px);
}

// .css 文件中的 css 代码：

#logic {

  padding: 11px;
}

#logic-one {

  padding: -5px;
}

#logic-two {

  padding: -10px;
}

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

类型检查函数：可以使用类型检查内置函数来确定匹配 mixins 的值类型。可以使用 is 函数，包括以下功能： iscolor isnumber isstring iskeyword isurl 如果要检查是否为数字并且是否使用特定单位，可以使用以下方法： ispixel ispercentage isem isunit

less

// .less 文件中的代码：
// 类型检查函数
.cheat(@number; @color) when (isnumber(@number)) {
    font-size: @number;
    color: @color;
}

#cheat {

    .cheat(13px, green);
}

.css 文件中的 css 代码：

#cheat {

  font-size: 13px;
  color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Aliasing Mixins

将 mixin 调用分配给变量，即称为变量调用，也可以将其用于映射查找

less

.less 文件中的代码：

//Aliasing Mixins 将 mixinx 分配给变量称为变量调用

#large.dark.light {

    .colors(dark) {
        primary: skyblue;
        secondary: lightgray;
    }
    .colors(light) {
        primary: purple;
        secondary: pink;
    }
}

#large {

    @color1: #large.dark.light.colors(light);
    @color2: #large.dark.light.colors(dark);
    color: @color1[secondary];
    background-color: @color2[primary];
}

// .css 文件中的 css 代码：

#large {

  color: pink;
  background-color: skyblue;
}

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

Variable calls: 整个 mixin 可以被赋予别名，然后作为变量调用 .less 文件中的代码：

//Variable calls 整个 mixins 可以被赋予别名并作为变量调用

less

#call {

    .mixin() {
        font-size: 15px;
    }
}

#alias {

    @alias: #call.mixin();
    @alias();
}

// .css 文件中的 css 代码：

#alias {
  font-size: 15px;
}

mixin 赋予别名并作为选择器调用
// .less 文件中的代码：
```less

# alias-one {

    @alias-one: #call.mixin;
    @{alias-one} {
        float: left;
    }
}

// .css 文件中的 css 代码：

# alias-one #call.mixin {

  float: left;
}

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

Detached Rulesets的用法

Detached Rulesets包含一个普通的规则集，例如属性、嵌套规则集、变量声明、媒体声明、mixins等。它存储在一个变量中，并包含在其他结构中，其中规则集的所有属性都将被复制到该结构。可以用作mixin参数，将其作为变量进行传递

Detached Rulesets的正常用法

.less文件中的代码：

less


//Detached Ruleset  将规则集分配给变量
@detached: {
    border: 1px solid green;
    @color: red;
};

# detached {

    @detached(); // 必须带有括号，@detached 无效
    color: @detached[@color]; // 后面带有查找值时，可以不需要括号
}
// Detached Rulesets 调用时的括号是强制性的（除非后面带有查找值），直接使用 @detached；是无效的
// .css 文件中的 css 代码：

# detached {

  border: 1px solid green;
  color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在@media查询中封装代码

当想要定义一个mixin时，它可以在媒体查询或者非支持的浏览器类名中封装一段代码。规则集可以传递给mixin，以便mixin可以包装内容

less


.desktop-and-old-ie(@rules) {
    @media screen and (min-width: 1200px) {
      @rules();
    }
    html.lt-ie9 & {
      @rules();
    }
  }   //.desktop-and-old-ie 定义了媒体查询和根类

# header {

    background-color: blue;
    .desktop-and-old-ie({
      background-color: red;
    });
  }

// .css 文件中的 css 代码：

# header {

  background-color: blue;
}
@media screen and (min-width: 1200px) {

# header {

    background-color: red;
  }
}
html.lt-ie9 #header {
  background-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

将规则集分配给变量或传递给mixin

less


.less 文件中的代码：

// 将规则集传递给 mixin
@my-ruleset: {
  // 加了括号则不会在 css 文件中出现，没有加括号将会在 css 文件中出现，和 mixin 规则一样
  .my-selector() {
    background-color: black;
  }
  @color: skyblue;// 将规则集分配给变量
};

# my-ruleset {

  @my-ruleset();
  .my-selector();
  color: @my-ruleset[@color];
}

// .css 文件中的 css 代码：

# my-ruleset {

  background-color: black;
  color: skyblue;
}

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

@media查询冒泡

less


// .less 文件中的代码：

// 使用媒体查询起泡
@float: {
    .float-l {
        @media x {
            @media z {
                float: left;
            }
        }
    }
}
@media y {
    @float();
}

// .css 文件中的 css 代码：

@media y and x and z {
  .float-l {
    float: left;
  }
}

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

私有变量，不可以直接调用

less


.less 文件中的代码：

// 私有变量，是访问不到 @color 这个变量的
@private1: {
  @color: skyblue;
}

# private1 {

  // @private();
  // color: @color;  直接调用规则集中的变量无效
  color: @private1[@color];
}

.css 文件中的 css 代码：

# private1 {

  color: skyblue;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Scoping

一个分离的规则集可以使用变量和mixin，在定义和调用方作用域都可以访问。否则，定义和调用方作用域对它都是可用的。如果两个作用域包含相同的变量或mixin函数，则声明范围值优先声明范围：声明范围是定义分离的规则集主体的范围。将分离的规则集从一个变量复制到另一个变量不能修改其作用域。规则集不能仅仅通过在那里被引用而获得对新作用域的访问权，分离的规则集可以通过被解锁(导入)到范围中来获得对范围的访问权注：不赞成通过调用mixin将变量解锁到作用域中，应该使用属性或者变量访问器

less


// 分离的规则可以看到调用方的变量和 mixin
@private: {
  color: @color;
  .my-mixin();
};

# private {

  @private();
  @color: red;
  .my-mixin() {
    font-family: monospace;
  }
}

// .css 文件中的 css 代码：

# private {

  color: red;
  font-family: monospace;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

调用方中的可访问的变量和mixin将会覆盖在定义中的（官方文档有误）

less


// 调用方中的变量会覆盖在定义中可访问的变量和 mixin
// 官方文档错误
@value: left;
@excel: {
  float: @value;
}

# excel {

  @excel();
  @value: right;
}

// .css 文件中的 css 代码：

# excel {

  float: right;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

引用将会修改分离的规则集范围

通过给出引用，规则集是会访问到新的范围（官方文档有误） .less文件中的代码：

less


// 规则集可以在其中引用而获得对新作用域的访问
@detached-1: { scope-detached: @one @two; };
.one {
  @one: bottom;
  .two {
    @detached-2: @detached-1; // copying/renaming ruleset
    @two: top; // ruleset can not see this variable
  }
}
.use-place {
  // .one > .two();
  // .one();
  // .two();
  .one .two();
  @detached-2();
}

.css 文件中的 css 代码：

.use-place {
  scope-detached: bottom top;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.less 文件中的代码：

less


.cheat {
  .exam {
    @cheat: {
      position: @rela;
    };
  }
}

# cheat {

  @rela: relative;
  .cheat .exam;
  @cheat();
}

.css 文件中的 css 代码：

# cheat {

  position: relative;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

解锁将修改分离的规则集范围（个人觉得其实引用可以修改范围的话，这个可以不看）

less


// 解锁将修改分离的规则集范围

# space {

  .importer-1() {
    @detached: { scope-detached: @variable1; }; // define detached ruleset
  }
}

.importer-2() {
  @variable1: 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();
}

// .css 文件钟的 css 代码：

.use-place {
  scope-detached: value;
}

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

属性 / 变量访问器

可以使用属性 / 变量访问器（查找）从变量（分离的）规则集中选择一个值 .less 文件中的代码：

less


// 属性 / 变量访问器
// 可以使用属性或者变量访问器来从分离的规则集中选择一个值
@config: {
  bool1: true;
  bool2: false;
}
.mixin-one() when (@config[bool1] = true) {
  padding: 10px;
}

# mixin-one {

  .mixin-one();
}

// .css 文件中的 css 代码：

# mixin-one {

  padding: 10px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如果从查找返回的是另一个分离的规则集，则可以使用第二个查找来获取该值

less


.less 文件中的代码：
// 如果返回的是另一个分离的规则集，可以使用两个查找来获取该值
@config1: {
  @colors: {
    primary: blue;
  }
}
.box {
  color: @config1[@colors](primary);
}

// .css 文件中的代码：

.box {
  color: blue;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

查找变量中的变量

返回的查找值本身是可变的 .less 文件中的代码：

// 返回的查找值本身是可以变化的，可以通过定义一个变量来控制返回的查找值

less


@config2: {
  @dark: {
    color: red;
  }
  @light: {
    color: green;
  }
}

# light {

  @look: light;
  color: @config2[@@look](color);
}
// .css 文件钟的 css 代码：

# light {

  color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

less 的简介 #

less 的安装 #

less 的编译方法 #

在 nodejs 环境中使用 less #

在浏览器环境中使用 less #

工具编译 #

变量 #

变量正常用法（variables） #

变量作为选择器名称使用 #

变量作为属性名称使用 #

变量作为 URL 使用 #

变量作为 @import 语句使用 #

变量作为变量名使用 #

变量的 Lazy Evaluation #

属性作为变量 #

默认变量 #

嵌套（Nesting） #

嵌套类 #

Parent Selector 正常用法 #

通过 Parent Selector 产生重复的类名 #

Multiple & #

父选择器的顺序 #

父选择器之间的组合 #

Merge #

用逗号附加属性 #

用空格附加属性 #

extend 的用法 #

Extend 的简单使用 #

Extend 语法 #

Extend 附加到选择器 #

extend 内部规则集 #

extend 嵌套选择器 #

精确匹配与 extend #

nth 表达式 #

extend “all” #

带 extend 的插值选择器 #

在 @media 范围内 /extend #

重复检测 #

extend 的用例 #

Mixins 的用法 #

在 mixin 中使用类选择器和 id 选择器 #

不在 css 中输出 mixin #

mixin 中的选择器 #

mixin 命名空间 #

受保护的命名空间 #

!important 关键字 #

mixin 参数 #

具有多个参数的 mixins #

命名参数 #

@arguments variable #

模式匹配 #

使用 mixin 作为函数 #

递归 mixins #

Mixin Guards #

Aliasing Mixins #

Detached Rulesets的用法 #

Detached Rulesets的正常用法 #

在@media查询中封装代码 #

将规则集分配给变量或传递给mixin #

@media查询冒泡 #

Scoping #

引用将会修改分离的规则集范围 #

解锁将修改分离的规则集范围 （个人觉得其实引用可以修改范围的话，这个可以不看） #

属性 / 变量访问器 #

查找变量中的变量 #

less 的简介

less 的安装

less 的编译方法

在 nodejs 环境中使用 less

在浏览器环境中使用 less

工具编译

变量

变量正常用法（variables）

变量作为选择器名称使用

变量作为属性名称使用

变量作为 URL 使用

变量作为 @import 语句使用

变量作为变量名使用

变量的 Lazy Evaluation

属性作为变量

默认变量

嵌套（Nesting）

嵌套类

Parent Selector 正常用法

通过 Parent Selector 产生重复的类名

Multiple &

父选择器的顺序

父选择器之间的组合

Merge

用逗号附加属性

用空格附加属性

extend 的用法

Extend 的简单使用

Extend 语法

Extend 附加到选择器

extend 内部规则集

extend 嵌套选择器

精确匹配与 extend

nth 表达式

extend “all”

带 extend 的插值选择器

在 @media 范围内 /extend

重复检测

extend 的用例

Mixins 的用法

在 mixin 中使用类选择器和 id 选择器

不在 css 中输出 mixin

mixin 中的选择器

mixin 命名空间

受保护的命名空间

!important 关键字

mixin 参数

具有多个参数的 mixins

命名参数

@arguments variable

模式匹配

使用 mixin 作为函数

递归 mixins

Mixin Guards

Aliasing Mixins

Detached Rulesets的用法

Detached Rulesets的正常用法

在@media查询中封装代码

将规则集分配给变量或传递给mixin

@media查询冒泡

Scoping

引用将会修改分离的规则集范围

解锁将修改分离的规则集范围（个人觉得其实引用可以修改范围的话，这个可以不看）

属性 / 变量访问器

查找变量中的变量