less 使用特性-變量

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

1. 變量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

output:

#header {
  color: #6c94be;
}

1.1. 選擇器

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

output:

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

1.2. URLs

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

1.3. Import Statements

// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";

1.4 屬性

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

output:

.widget {
  color: #0ee;
  background-color: #999;
}

2. Mixins

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

output:

button:hover {
  border: 1px solid red;
}

3. 作用域

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

云服務(wù)器 GPU云服務(wù)器 html使用less 不使用變量 php 使用數(shù)組變量 js全局變量無法使用

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

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

相關(guān)文章

大話css預(yù)編譯處理（三）：基礎(chǔ)語法篇

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

劉東 2019-08-30 15:55 評(píng)論0 收藏0
學(xué)習(xí)Less-看這篇就夠了

摘要：在網(wǎng)上討論看來，與相比于功能更為豐富，但對(duì)于學(xué)習(xí)成本以及適應(yīng)時(shí)間，稍勝一籌，這也是我選擇的原因。如果你也是的使用者，還需要配合進(jìn)行處理，具體可見我的這篇文章飛行手冊(cè)，里面詳細(xì)說明了的處理方式。原文鏈接前言 CSS的短板 ????作為前端學(xué)習(xí)者的我們或多或少都要學(xué)些 CSS ，它作為前端開發(fā)的三大基石之一，時(shí)刻引領(lǐng)著 Web 的發(fā)展潮向。而 CSS 作為一門標(biāo)記性語言，可能給初...

hiyayiji 2019-08-29 13:59 評(píng)論0 收藏0
css還可以這么寫？

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

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

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

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

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

RaoMeng 2019-08-02 11:22 評(píng)論0 收藏0
關(guān)于sass、scss、less的概念性知識(shí)匯總

摘要：而使用預(yù)處理器，提供缺失的樣式層復(fù)用機(jī)制減少冗余代碼，提高樣式代碼的可維護(hù)性。所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來的額外維護(hù)開銷，預(yù)處理器有沒有解決更大的麻煩。也是成熟的預(yù)處理器之一，而且有一個(gè)穩(wěn)定，強(qiáng)大的團(tuán)隊(duì)在維護(hù)。這篇文章主要解答以下幾個(gè)問題，供前端開發(fā)者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預(yù)處理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 評(píng)論0 收藏0