Less中的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 上开源。

Less中的Extend相关推荐

python观察日志(part20)--列表中加号,extend,append之间的区别
学习笔记,仅供参考,有错必纠列表中"+"加号,extend,append之间的区别 extend extend函数用于在列表末尾一次性追加另一个序列中的多个值. append a ...
php继承exten,es6,extends_react中通过extend继承，父组件为什么能访问子组件的属性，es6,extends,react.js - phpStudy...
react中通过extend继承,父组件为什么能访问子组件的属性代码如下,在父类的componentWillMount方法中输出 this,打印的却是子类 item 通过webpack的编译后文件中 ...
V-Charts中使用extend属性定制词云图
[本文出自天外归云的博客园] 简介在Vue中使用E-Charts可以用V-Charts,词云图在V-Charts官网中介绍比较简单,如果想更多定制的话,官网上说要在extend属性中进行扩展. V- ...
js中的extend的用法及其JS中substring与substr的区别
1. JS中substring与substr的区别之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的. ...
Office编程中得到extend对象
在AddIn中: 如果你要得到对应的extend对象从native 对象中,使用GetVstoObject方法比如: Microsoft.Office.Interop.Word.Document c ...
jQuery中的$.extend()方法使用
$.extend()函数用于将一个或多个对象的内容合并到目标对象用法1:只有一个参数,表示将该参数添加到全局对象jQuery中,可以用 $. 来获取值. 测试1-1:$.extend({test:1 ...
python中的extend功能及用法
源于: 执行类代码 --parallel_str_search.py – 函数combine_result extend() 函数的功能: 用于在列表末尾一次性追加另一个序列中的多个值(用新列表扩展原 ...
java泛型extend使用_java泛型中的? extend E 和 ? super E
public class TestType { public static void main(String[] args) { //? extend B,在定义泛型时,只能接受B或B的子类 List ...
python – 如何将两个列表的元素添加到一个列表中？extend
例如,我有一个这样的列表: list1 = [good, bad, tall, big] list2 = [boy, girl, guy, man] 我想做一个这样的列表: list3 = [good ...

Less中的Extend

Less中的Extend相关推荐

最新文章

热门文章