html5中文学习网

您的位置: 首页?>?网页制作?>?css365可以把体育投注转到娱乐场吗_365体育网址全场高呼_365体育投注开户 ? 正文

动态的样式语言less语法详解之变量与extend_CSS365可以把体育投注转到娱乐场吗_365体育网址全场高呼_365体育投注开户_CSS_网页制作

[ ] 已经帮助:人解决问题
本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。

作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法。这样的设计使得学习 Less 很轻松,而且你可以在任何时候回退到 CSS。less文件是以less作为文件后缀名,HTML引用时可以像css那样引用,如下:DVkHTML5中文学习网 - HTML5先行者学习网

DVkHTML5中文学习网 - HTML5先行者学习网

注意:本文描述的一切都是基于1.4.0版本,除非有特殊标明。DVkHTML5中文学习网 - HTML5先行者学习网

变量:DVkHTML5中文学习网 - HTML5先行者学习网
   变量的作用就是把值定义在一个地方,然后在各处使用,这样能让代码更易维护,如下:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
// VariablesDVkHTML5中文学习网 - HTML5先行者学习网
@link-color: #428bca; // sea blueDVkHTML5中文学习网 - HTML5先行者学习网
// 用法DVkHTML5中文学习网 - HTML5先行者学习网
a:link {DVkHTML5中文学习网 - HTML5先行者学习网
color: @link-color;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.widget {DVkHTML5中文学习网 - HTML5先行者学习网
color: #fff;DVkHTML5中文学习网 - HTML5先行者学习网
background: @link-color;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

上面代码将颜色#428bca赋给一个变量@link-color,然后在color属性中使用变量,对应的css如下:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
a:link {DVkHTML5中文学习网 - HTML5先行者学习网
color: #428bca;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.widget {DVkHTML5中文学习网 - HTML5先行者学习网
color: #fff;DVkHTML5中文学习网 - HTML5先行者学习网
background: #428bca;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

变量不仅可以用在属性值上,也可以用在选择元素名,属性名(1.6.0支持),url和import方法。如下:DVkHTML5中文学习网 - HTML5先行者学习网

选择元素名:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
// VariablesDVkHTML5中文学习网 - HTML5先行者学习网
@mySelector: banner;DVkHTML5中文学习网 - HTML5先行者学习网
// UsageDVkHTML5中文学习网 - HTML5先行者学习网
.@{mySelector} {DVkHTML5中文学习网 - HTML5先行者学习网
font-weight: bold;DVkHTML5中文学习网 - HTML5先行者学习网
line-height: 40px;DVkHTML5中文学习网 - HTML5先行者学习网
margin: 0 auto;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

编译后为DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.banner {DVkHTML5中文学习网 - HTML5先行者学习网
font-weight: bold;DVkHTML5中文学习网 - HTML5先行者学习网
line-height: 40px;DVkHTML5中文学习网 - HTML5先行者学习网
margin: 0 auto;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

url:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
// VariablesDVkHTML5中文学习网 - HTML5先行者学习网
@images: "../img";DVkHTML5中文学习网 - HTML5先行者学习网
// 用法DVkHTML5中文学习网 - HTML5先行者学习网
body {DVkHTML5中文学习网 - HTML5先行者学习网
color: #444;DVkHTML5中文学习网 - HTML5先行者学习网
background: url("@{images}/white-sand.png");DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

编译后DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
body {DVkHTML5中文学习网 - HTML5先行者学习网
color: #444;DVkHTML5中文学习网 - HTML5先行者学习网
background: url("../img/white-sand.png");DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
@import:DVkHTML5中文学习网 - HTML5先行者学习网
// VariablesDVkHTML5中文学习网 - HTML5先行者学习网
@themes: "../../src/themes";DVkHTML5中文学习网 - HTML5先行者学习网
// UsageDVkHTML5中文学习网 - HTML5先行者学习网
@import "@{themes}/tidal-wave.less";DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

编译后DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
@import "../../src/themes/tidal-wave.less";DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

属性名:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
@property: color;DVkHTML5中文学习网 - HTML5先行者学习网
.widget {DVkHTML5中文学习网 - HTML5先行者学习网
@{property}: #0ee;DVkHTML5中文学习网 - HTML5先行者学习网
background-@{property}: #999;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

编译后DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.widget {DVkHTML5中文学习网 - HTML5先行者学习网
color: #0ee;DVkHTML5中文学习网 - HTML5先行者学习网
background-color: #999;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

变量的变量名也可以是变量,如下:DVkHTML5中文学习网 - HTML5先行者学习网

@fnord:? "I am fnord.";DVkHTML5中文学习网 - HTML5先行者学习网
@var:??? "fnord";DVkHTML5中文学习网 - HTML5先行者学习网
content: @@var;DVkHTML5中文学习网 - HTML5先行者学习网

编译后DVkHTML5中文学习网 - HTML5先行者学习网

content: "I am fnord.";DVkHTML5中文学习网 - HTML5先行者学习网

延迟加载:DVkHTML5中文学习网 - HTML5先行者学习网
  变量支持延迟加载,所以你可以在变量定义之前使用。如下:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.lazy-eval {DVkHTML5中文学习网 - HTML5先行者学习网
width: @var;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
@var: @a;DVkHTML5中文学习网 - HTML5先行者学习网
@a: 9%;DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

或者DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.lazy-eval-scope {DVkHTML5中文学习网 - HTML5先行者学习网
width: @var;DVkHTML5中文学习网 - HTML5先行者学习网
@a: 9%;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
@var: @a;DVkHTML5中文学习网 - HTML5先行者学习网
@a: 100%;DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

上面两个都会被编译成如下DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.lazy-eval-scope {DVkHTML5中文学习网 - HTML5先行者学习网
width: 9%;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

问什么第二个也会被编译成上面的css,这是因为当一个变量被定义两次时,最后一次定义的生效。就类似于css中,对同一个元素定义不同的css样式,最后定义的生效。再比如下面这个DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
@var: 0;DVkHTML5中文学习网 - HTML5先行者学习网
.class1 {DVkHTML5中文学习网 - HTML5先行者学习网
@var: 1;DVkHTML5中文学习网 - HTML5先行者学习网
.class {DVkHTML5中文学习网 - HTML5先行者学习网
@var: 2;DVkHTML5中文学习网 - HTML5先行者学习网
three: @var;DVkHTML5中文学习网 - HTML5先行者学习网
@var: 3;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
one: @var;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

编译后DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.class1 .class {DVkHTML5中文学习网 - HTML5先行者学习网
three: 3;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.class {DVkHTML5中文学习网 - HTML5先行者学习网
one: 1;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

Extend: DVkHTML5中文学习网 - HTML5先行者学习网
  扩展选择器是less的伪类选择器,他会复制当前选择器,定义新的样式,而原来的不便DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
nav ul {DVkHTML5中文学习网 - HTML5先行者学习网
&:extend(.inline);DVkHTML5中文学习网 - HTML5先行者学习网
background: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.inline {DVkHTML5中文学习网 - HTML5先行者学习网
color: red;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

编译后DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
nav ul {DVkHTML5中文学习网 - HTML5先行者学习网
background: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.inline,DVkHTML5中文学习网 - HTML5先行者学习网
nav ul {DVkHTML5中文学习网 - HTML5先行者学习网
color: red;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

语法:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.a:extend(.b) {}DVkHTML5中文学习网 - HTML5先行者学习网
也可以这样使用DVkHTML5中文学习网 - HTML5先行者学习网
.a {DVkHTML5中文学习网 - HTML5先行者学习网
&:extend(.b);DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.e:extend(.f) {}DVkHTML5中文学习网 - HTML5先行者学习网
.e:extend(.g) {}DVkHTML5中文学习网 - HTML5先行者学习网
// 上面等价于下面DVkHTML5中文学习网 - HTML5先行者学习网
.e:extend(.f, .g) {}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

嵌套选择器:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.bucket {DVkHTML5中文学习网 - HTML5先行者学习网
tr { DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.some-class:extend(.bucket tr) {}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

编译后DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.bucket tr,DVkHTML5中文学习网 - HTML5先行者学习网
.some-class {DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

精确匹配:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.a.class,DVkHTML5中文学习网 - HTML5先行者学习网
.class.a,DVkHTML5中文学习网 - HTML5先行者学习网
.class > .a {DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.test:extend(.class) {} // 不会匹配任何选择DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

nth:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
:nth-child(1n+3) {DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.child:extend(n+3) {}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

编译后DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
:nth-child(1n+3) {DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

注意:1n+3与n+3在css中是等价的,但是在less中不等价。DVkHTML5中文学习网 - HTML5先行者学习网

属性选择器:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
[title=identifier] {DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
[title='identifier'] {DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
[title="identifier"] {DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.noQuote:extend([title=identifier]) {}DVkHTML5中文学习网 - HTML5先行者学习网
.singleQuote:extend([title='identifier']) {}DVkHTML5中文学习网 - HTML5先行者学习网
.doubleQuote:extend([title="identifier"]) {}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

编译后DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
[title=identifier],DVkHTML5中文学习网 - HTML5先行者学习网
.noQuote,DVkHTML5中文学习网 - HTML5先行者学习网
.singleQuote,DVkHTML5中文学习网 - HTML5先行者学习网
.doubleQuote {DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
[title='identifier'],DVkHTML5中文学习网 - HTML5先行者学习网
.noQuote,DVkHTML5中文学习网 - HTML5先行者学习网
.singleQuote,DVkHTML5中文学习网 - HTML5先行者学习网
.doubleQuote {DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
[title="identifier"],DVkHTML5中文学习网 - HTML5先行者学习网
.noQuote,DVkHTML5中文学习网 - HTML5先行者学习网
.singleQuote,DVkHTML5中文学习网 - HTML5先行者学习网
.doubleQuote {DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

注意:less中不区分单引号双引号DVkHTML5中文学习网 - HTML5先行者学习网

关键字all:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.a.b.test,DVkHTML5中文学习网 - HTML5先行者学习网
.test.c {DVkHTML5中文学习网 - HTML5先行者学习网
color: orange;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.test {DVkHTML5中文学习网 - HTML5先行者学习网
&:hover {DVkHTML5中文学习网 - HTML5先行者学习网
color: green;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
}

.replacement:extend(.test all) {}DVkHTML5中文学习网 - HTML5先行者学习网

DVkHTML5中文学习网 - HTML5先行者学习网

编译后DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.a.b.test,DVkHTML5中文学习网 - HTML5先行者学习网
.test.c,DVkHTML5中文学习网 - HTML5先行者学习网
.a.b.replacement,DVkHTML5中文学习网 - HTML5先行者学习网
.replacement.c {DVkHTML5中文学习网 - HTML5先行者学习网
color: orange;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.test:hover,DVkHTML5中文学习网 - HTML5先行者学习网
.replacement:hover {DVkHTML5中文学习网 - HTML5先行者学习网
color: green;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

变量选择器:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
@variable: .bucket;DVkHTML5中文学习网 - HTML5先行者学习网
@{variable} { // interpolated selectorDVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.some-class:extend(.bucket) {}// 不会匹配任何选择元素DVkHTML5中文学习网 - HTML5先行者学习网
.bucket {DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.some-class:extend(@{variable}) {} // 不会匹配任何元素DVkHTML5中文学习网 - HTML5先行者学习网
@variable: .bucket;DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

注意:extend不匹配变量。DVkHTML5中文学习网 - HTML5先行者学习网

@media:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
@media print {DVkHTML5中文学习网 - HTML5先行者学习网
.screenClass:extend(.selector) {} // extend inside mediaDVkHTML5中文学习网 - HTML5先行者学习网
.selector { DVkHTML5中文学习网 - HTML5先行者学习网
color: black;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.selector { DVkHTML5中文学习网 - HTML5先行者学习网
color: red;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
@media screen {DVkHTML5中文学习网 - HTML5先行者学习网
.selector { DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

编译后DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
@media print {DVkHTML5中文学习网 - HTML5先行者学习网
.selector,DVkHTML5中文学习网 - HTML5先行者学习网
.screenClass { DVkHTML5中文学习网 - HTML5先行者学习网
color: black;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.selector { DVkHTML5中文学习网 - HTML5先行者学习网
color: red;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
@media screen {DVkHTML5中文学习网 - HTML5先行者学习网
.selector { DVkHTML5中文学习网 - HTML5先行者学习网
color: blue;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

注意:extend只能匹配@media中前面定义的,在后面定义的将忽略。DVkHTML5中文学习网 - HTML5先行者学习网

使用extend重写样式:DVkHTML5中文学习网 - HTML5先行者学习网
在开发中我们会定义一些通用样式,然后单独样式在添加class,使用css的后面覆盖前面的原理来实现样式。extend也可以实现这种效果,如下:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.animal {DVkHTML5中文学习网 - HTML5先行者学习网
background-color: black;DVkHTML5中文学习网 - HTML5先行者学习网
color: white;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.bear {DVkHTML5中文学习网 - HTML5先行者学习网
&:extend(.animal);DVkHTML5中文学习网 - HTML5先行者学习网
background-color: brown;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

减少css代码:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.my-inline-block() {DVkHTML5中文学习网 - HTML5先行者学习网
display: inline-block;DVkHTML5中文学习网 - HTML5先行者学习网
font-size: 0;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.thing1 {DVkHTML5中文学习网 - HTML5先行者学习网
.my-inline-block;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.thing2 {DVkHTML5中文学习网 - HTML5先行者学习网
.my-inline-block;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

编译后:DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.thing1 {DVkHTML5中文学习网 - HTML5先行者学习网
display: inline-block;DVkHTML5中文学习网 - HTML5先行者学习网
font-size: 0;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.thing2 {DVkHTML5中文学习网 - HTML5先行者学习网
display: inline-block;DVkHTML5中文学习网 - HTML5先行者学习网
font-size: 0;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

使用extendDVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.my-inline-block {DVkHTML5中文学习网 - HTML5先行者学习网
display: inline-block;DVkHTML5中文学习网 - HTML5先行者学习网
font-size: 0;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.thing1 {DVkHTML5中文学习网 - HTML5先行者学习网
&:extend(.my-inline-block);DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
.thing2 {DVkHTML5中文学习网 - HTML5先行者学习网
&:extend(.my-inline-block);DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
DVkHTML5中文学习网 - HTML5先行者学习网

编译后DVkHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
.my-inline-block,DVkHTML5中文学习网 - HTML5先行者学习网
.thing1,DVkHTML5中文学习网 - HTML5先行者学习网
.thing2 {DVkHTML5中文学习网 - HTML5先行者学习网
display: inline-block;DVkHTML5中文学习网 - HTML5先行者学习网
font-size: 0;DVkHTML5中文学习网 - HTML5先行者学习网
}DVkHTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助