<fieldset id="skecw"></fieldset>

<ul id="skecw"></ul>

less 使用特性 - extend

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

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

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云服務(wù)器云服務(wù)器 html使用less less less2 linux密令less

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111505.html

相關(guān)文章

css還可以這么寫？

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

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

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

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

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

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

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

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

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

劉東 2019-08-30 15:55 評(píng)論0 收藏0