less 使用特性 - extend

wean 發(fā)布于2019-08-29 11:13 / 1636人閱讀

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

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;
}

云服務(wù)器 GPU云服務(wù)器 html使用less less less2 linux密令less

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/111505.html

相關(guān)文章

css還可以這么寫？

摘要：如果我們使用的話，就可以這么寫我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會編譯成可以看到，生成的中并沒有任何的變化，那這個做了什么呢其實在通過引用的對象內(nèi)發(fā)生了變化。作為一個前端，毫無疑問css肯定是最基礎(chǔ)的一項技能之一。css是一個標(biāo)記語言，沒有編程語言的諸多特性，比如變量定義，復(fù)用，嵌套等，所以相應(yīng)的開發(fā)效率也受到限制。在追求效率和自動化的當(dāng)下...

kidsamong 2019-08-29 16:35 評論0 收藏0
css還可以這么寫？

摘要：如果我們使用的話，就可以這么寫我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會編譯成可以看到，生成的中并沒有任何的變化，那這個做了什么呢其實在通過引用的對象內(nèi)發(fā)生了變化。作為一個前端，毫無疑問css肯定是最基礎(chǔ)的一項技能之一。css是一個標(biāo)記語言，沒有編程語言的諸多特性，比如變量定義，復(fù)用，嵌套等，所以相應(yīng)的開發(fā)效率也受到限制。在追求效率和自動化的當(dāng)下...

zhiwei 2019-08-23 11:36 評論0 收藏0
css還可以這么寫？

摘要：如果我們使用的話，就可以這么寫我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會編譯成可以看到，生成的中并沒有任何的變化，那這個做了什么呢其實在通過引用的對象內(nèi)發(fā)生了變化。作為一個前端，毫無疑問css肯定是最基礎(chǔ)的一項技能之一。css是一個標(biāo)記語言，沒有編程語言的諸多特性，比如變量定義，復(fù)用，嵌套等，所以相應(yīng)的開發(fā)效率也受到限制。在追求效率和自動化的當(dāng)下...

RaoMeng 2019-08-02 11:22 評論0 收藏0
#Less# less相關(guān)知識點總結(jié)

摘要：是一門預(yù)處理語言，它擴展了語言，增加了變量函數(shù)等特性，使更易維護和擴展。所以在生產(chǎn)環(huán)境中，我們需要事前把文件編譯為正常的后，在相應(yīng)文件中引入，以后用戶訪問的都是編譯好的，為不是拿現(xiàn)編譯的。代碼編譯為的結(jié)果 Less和CSS的區(qū)別 HTML和CSS不屬于編程語言而是屬于標(biāo)記語言,很難像JS一樣定義變量、編寫方法、實現(xiàn)模塊化開發(fā)等。LESS是一門CSS預(yù)處理語言，它擴展了CSS語言，增加了...

meteor199 2019-08-30 15:43 評論0 收藏0
大話css預(yù)編譯處理（三）：基礎(chǔ)語法篇

摘要：值得慶幸的是，這三款預(yù)處理器語言的語法和語法都差不多。在這一節(jié)中，我們依次來對比一下這三款預(yù)處理器語言各種特性的異同之處，以及使用方法。預(yù)處理器語言支持任何變量例如顏色數(shù)值文本。一、Sass、LESS和Stylus的語法每一種語言都有自己一定的語法規(guī)則，CSS預(yù)處理器語言也不例外，在真正使用CSS預(yù)處器語言之前還有一個不可缺少的知識點，就是對語法的理解。值得慶幸的是，這三款CSS預(yù)...

劉東 2019-08-30 15:55 評論0 收藏0