Less的Extend_Less继承

Extend就至关于Java的继承,它容许一个选择器继承另外一个选择器的样式。Extend有两种语法格式。html

一种是:less

  1. <selector>:extend(<parentSelector>) { }

另外一种是:spa

  1. <selector> {
  2. &:extend(<parentSelector>);
  3. }

假设有一个 .inline 的类:code

  1. .inline {
  2.     color: red;
  3. }

如今但愿 nav ul 选择器可以让继承 .inline类的 color 属性,就能够使用如下两种方式的任意一种来实现:htm

  1. nav ul:extend(.inline) {
  2. }

或者继承

  1. nav ul {
  2.     &:extend(.inline);
  3. }

这两种方式获得的结果彻底相同,编译后的CSS代码为:get

  1. .inline,
  2. nav ul {
  3.   color: red;
  4. }

一个选择器还能够继承多个选择器的属性,只需写多个 :extend 语句就能够了。如,.e 同时继承了 .f 和 .g 的属性:编译

  1. .e:extend(.f) {}
  2. .e:extend(.g) {}

为了方便,Less容许仅使用一个 :extend 语句,只需在括号中提供用逗号隔开的选择器列表便可。什么两个 :extend 语句的等价写法为:class

  1. .e:extend(.f, .g) {}
相关文章
相关标签/搜索