less 使用特性 - extend

wean 发布于2019-08-29 11:13 / 1573人阅读

摘要：第一种方式第二种方式

1.extend

/* extend */
ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

output:

/* extend */
ul {
  background: blue;
}
.inline,
ul {
  color: red;
}

1.1 Extend Inside Ruleset

pre:hover,
.some-class {
  &:extend(div pre);
}

the same as:

pre:hover:extend(div pre),
.some-class:extend(div pre) {}

1.2 Extending Nested Selectors

.bucket {
  tr { // nested ruleset with target selector
    color: blue;
  }
}
.some-class:extend(.bucket tr) {}

output:

.bucket tr,
.some-class {
  color: blue;
}

1.3 nth Expression

[title=identifier] {
  color: blue;
}
[title="identifier"] {
  color: blue;
}
[title="identifier"] {
  color: blue;
}

.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title="identifier"]) {}
.doubleQuote:extend([title="identifier"]) {}

output:

[title=identifier],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

1.4 Extend "all"

.a.b.test,
.test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}

.replacement:extend(.test all) {}

output:

.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
  color: orange;
}
.test:hover,
.replacement:hover {
  color: green;
}

1.5 Reducing CSS Size

第一种方式：

.my-inline-block() {
    display: inline-block;
  font-size: 0;
}
.thing1 {
  .my-inline-block;
}
.thing2 {
  .my-inline-block;
}

output:

.thing1 {
  display: inline-block;
  font-size: 0;
}
.thing2 {
  display: inline-block;
  font-size: 0;
}

第二种方式：

.my-inline-block {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}
.thing2 {
  &:extend(.my-inline-block);
}

output:

.my-inline-block,
.thing1,
.thing2 {
  display: inline-block;
  font-size: 0;
}

云服务器 GPU云服务器 html使用less less less2 linux密令less

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111505.html

css还可以这么写？

摘要：如果我们使用的话，就可以这么写我们要修改主色，只需要将修改为即可。二让我们可以用伪类的写法去合并一些类。比如会编译成可以看到，生成的中并没有任何的变化，那这个做了什么呢其实在通过引用的对象内发生了变化。作为一个前端，毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言，没有编程语言的诸多特性，比如变量定义，复用，嵌套等，所以相应的开发效率也受到限制。在追求效率和自动化的当下...

kidsamong 2019-08-29 16:35 评论0 收藏0
css还可以这么写？

摘要：如果我们使用的话，就可以这么写我们要修改主色，只需要将修改为即可。二让我们可以用伪类的写法去合并一些类。比如会编译成可以看到，生成的中并没有任何的变化，那这个做了什么呢其实在通过引用的对象内发生了变化。作为一个前端，毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言，没有编程语言的诸多特性，比如变量定义，复用，嵌套等，所以相应的开发效率也受到限制。在追求效率和自动化的当下...

zhiwei 2019-08-23 11:36 评论0 收藏0
css还可以这么写？

摘要：如果我们使用的话，就可以这么写我们要修改主色，只需要将修改为即可。二让我们可以用伪类的写法去合并一些类。比如会编译成可以看到，生成的中并没有任何的变化，那这个做了什么呢其实在通过引用的对象内发生了变化。作为一个前端，毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言，没有编程语言的诸多特性，比如变量定义，复用，嵌套等，所以相应的开发效率也受到限制。在追求效率和自动化的当下...

RaoMeng 2019-08-02 11:22 评论0 收藏0
#Less# less相关知识点总结

摘要：是一门预处理语言，它扩展了语言，增加了变量函数等特性，使更易维护和扩展。所以在生产环境中，我们需要事前把文件编译为正常的后，在相应文件中引入，以后用户访问的都是编译好的，为不是拿现编译的。代码编译为的结果 Less和CSS的区别 HTML和CSS不属于编程语言而是属于标记语言,很难像JS一样定义变量、编写方法、实现模块化开发等。LESS是一门CSS预处理语言，它扩展了CSS语言，增加了...

meteor199 2019-08-30 15:43 评论0 收藏0
大话css预编译处理（三）：基础语法篇

摘要：值得庆幸的是，这三款预处理器语言的语法和语法都差不多。在这一节中，我们依次来对比一下这三款预处理器语言各种特性的异同之处，以及使用方法。预处理器语言支持任何变量例如颜色数值文本。一、Sass、LESS和Stylus的语法每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预...

刘东 2019-08-30 15:55 评论0 收藏0