less 使用特性 - extend

1.extend

/* extend */
ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

output:

/* extend */
ul {
  background: blue;
}
.inline,
ul {
  color: red;
}

1.1 Extend Inside Ruleset

pre:hover,
.some-class {
  &:extend(div pre);
}

the same as:

pre:hover:extend(div pre),
.some-class:extend(div pre) {}

1.2 Extending Nested Selectors

.bucket {
  tr { // nested ruleset with target selector
    color: blue;
  }
}
.some-class:extend(.bucket tr) {}

output:

.bucket tr,
.some-class {
  color: blue;
}

1.3 nth Expression

[title=identifier] {
  color: blue;
}
[title='identifier'] {
  color: blue;
}
[title="identifier"] {
  color: blue;
}

.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}

output:

[title=identifier],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

[title='identifier'],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

1.4 Extend "all"

.a.b.test,
.test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}

.replacement:extend(.test all) {}

output:

.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
  color: orange;
}
.test:hover,
.replacement:hover {
  color: green;
}

1.5 Reducing CSS Size

第一种方式：

.my-inline-block() {
    display: inline-block;
  font-size: 0;
}
.thing1 {
  .my-inline-block;
}
.thing2 {
  .my-inline-block;
}

output:

.thing1 {
  display: inline-block;
  font-size: 0;
}
.thing2 {
  display: inline-block;
  font-size: 0;
}

第二种方式：

.my-inline-block {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}
.thing2 {
  &:extend(.my-inline-block);
}

output:

.my-inline-block,
.thing1,
.thing2 {
  display: inline-block;
  font-size: 0;
}