less 使用特性 - extend

wean 發布于2019-08-29 11:13 / 1588人閱讀

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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