阅读(24)

动态的样式语言less语法详解之变量与extend

最后一次修改 2017年09月01日
本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。

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

<link rel="stylesheet/less" type="text/css" href="styles.less">DVkHTML5中文学习网 - HTML5先行者学习网

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

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


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

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

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

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

选择元素名:

代码如下:
DVkHTML5中文学习网 - HTML5先行者学习网
// Variables
@mySelector: banner;
// Usage
<a href="mailto:.@{mySelector">.@{mySelector</a>} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;

编译后为

代码如下:
.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
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先行者学习网
 <a href="mailto:background-@{property">background-@{property</a>}: #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先行者学习网
}</p><p>.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先行者学习网