Less简明教程
2.14 Extend
阅读(

Less 基础

Less 特性

变量

Mixin

嵌套规则

运算和函数

转义字符

注释

命名空间

@import指令

!important关键字

模式匹配

条件表达式

循环

合并

Extend

Extend就相当于Java的继承,它允许一个选择器继承另一个选择器的样式。Extend有两种语法格式。

一种是:

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

另一种是:

<selector> {
  &:extend(<parentSelector>);
}

假设有一个 .inline 的类:

.inline {
    color: red;
}

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

nav ul:extend(.inline) {
}

或者

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

这两种方式得到的结果完全相同,编译后的CSS代码为:

.inline,
nav ul {
  color: red;
}

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

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

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

.e:extend(.f, .g) {}

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验