Less的简单使用（三）——extend的用法

Less的简单使用（三）——Extend的用法

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

一、Extend的简单使用

.less文件中的代码：

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

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

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

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

二、Extend语法

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

// 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;
}

三、Extend附加到选择器

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

注：1)、是在选择器之后扩展：eg、 .big-division:extend(.f);

2)、选择器和extend之间允许有空格：eg、.big-division :extend(.f);

3)、允许多个扩展，eg、.big-division:extend(.f):extend(.g）;也可以写成： .big-division:extend(.f , .g);

4)、扩展必须是最后一个，eg、.big-division:extend(.f).nth-child(odd)

.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;
}

四、extend内部规则集

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

.less文件中的代码：

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

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

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

五、extend嵌套选择器

extend可以匹配嵌套的选择器

.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;
}

六、精确匹配与extend

默认情况下extend是查找与选择器之间的精确匹配，选择器是否使用"*"并不重要，不管第n个表达式有没有相同的含义，都是需要有相同的形式才能匹配。唯一的例外是属性选择器中的引号，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;
}

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

.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;
}

七、nth表达式

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

.less文件中的代码：

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

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

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

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

.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;
}

八、extend “all”

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

.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;
}

九、带extend的插值选择器

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

.less文件中对应的代码：

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

.css文件中对应的代码：

.bucket,
.mark {
  font: outline;
}

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

.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;
}

十、在@media范围内/extend

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

.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;
}

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

.less文件中的代码：

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

.css文件中的代码：

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

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

.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;
  }
}

十一、重复检测

extend 中不会进行重复检测

.less文件中的代码：

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

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

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

十二、extend 的用例

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

.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;
}

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

不带有扩展的

.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;
}

带有扩展的

.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;
}

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

.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;
}