Less的Extend_Less继承
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) {}
Less的Extend_Less继承的更多相关文章
- javaScript的原型继承与多态性
1.prototype 我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接,只不过这种链接是不可见,给人们的感觉 ...
- JavaScript的继承实现方式
1.使用call或apply方法,将父对象的构造函数绑定在子对象上 function A(){ this.name = 'json'; } function B(){ A.call(this); } ...
- javascript中的继承与深度拷贝
前言 本篇适合前端新人,下面开始...... 对于前端新手来说(比如博主),每当对js的对象做操作时,都是一种痛苦,原因就是在于对象的赋值是引用的传递,并非值的传递,虽然看上去后者赋值给了前者,他们就 ...
- 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- JS继承类相关试题
题目一: //有关于原型继承的代码如下:function Person(name) { this.name = name;}Person.prototype = { getName : f ...
- JS继承之寄生类继承
原型式继承 其原理就是借助原型,可以基于已有的对象创建新对象.节省了创建自定义类型这一步(虽然觉得这样没什么意义). 模型 function object(o){ function W(){ } W. ...
- JS继承之借用构造函数继承和组合继承
根据少一点套路,多一点真诚这个原则,继续学习. 借用构造函数继承 在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术( ...
- JS继承之原型继承
许多OO语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支 ...
- 深入浅出JavaScript之原型链&继承
Javascript语言的继承机制,它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instanc ...
随机推荐
- ubuntu下codeblocks安装与中文化
什么是Code::Blocks Code::Blocks是一个免费.开源.跨平台的集成开发环境,使用C++开发,并且使用wxWidgets做为GUI库.Code::Blocks使用了插件架构,其功能可 ...
- 开发人员的福音:微软、谷歌、Mozilla将他们所有的web API文档放在同一个地方
Tips 原文作者:Liam Tung 原文地址:Developers rejoice: Microsoft, Google, Mozilla are putting all their web A ...
- JMeter性能测试,完整入门篇
1. Jmeter简介 Apache JMeter是一款纯java编写负载功能测试和性能测试开源工具软件.相比Loadrunner而言,JMeter小巧轻便且免费,也越来越流行成为了主流的性能测试工具 ...
- 相对定位的div没有出现纵向滚动条
在一个相对定位的div中绝对定位很多html元素,纵向没有滚动条出现.原因:我们期望作为原点的点在窗口原点的下方,但是滚动条以窗口原点作为原点,所以没有出现滚动条.解决:在div外面再套一个div,o ...
- 爬取朋友圈,Get年度关键词
人生苦短,我用Python && C#. 1.引言 最近初学Python,写爬虫上瘾.爬了豆瓣练手,又爬了公司的论坛生成词云分析年度关键词.最近琢磨着2017又仅剩两月了,我的年度关键 ...
- TCP协议解析
本文摘抄自:http://www.kuqin.com/shuoit/20141018/342719.html 本文描述了TCP协议,首先简单介绍了TCP完成了一些什么功能:介绍了TCP报文格式,以及典 ...
- poj3270Cow Sorting(置换+贪心)
Cow Sorting Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 7587 Accepted: 2982 Descr ...
- T9
T9 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission ...
- Problem X
Problem Description Recently, iSea went to an ancient country. For such a long time, it was the most ...
- A计划(双层bfs)
A计划 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissio ...