less學(xué)習(xí)二---變量

Cruise_Chan 發(fā)布于2019-04-23 13:27 / 3501人閱讀

摘要：中聲明的變量可以存儲(chǔ)屬性值，還可以存儲(chǔ)選擇器，屬性名，以及等變量聲明及賦值格式屬性值變量編譯成選擇器或者編譯后都是一定要把定義的選擇器變量名放在里面，并在花括號(hào)的前面加編譯后在定義變量時(shí)，注意將路徑用引號(hào)擴(kuò)起來屬性名編譯后在中可以用一個(gè)

less中聲明的變量可以存儲(chǔ)css屬性值，還可以存儲(chǔ)選擇器，屬性名，url以及@imporant等

變量聲明及賦值格式：@variableName : varableValue ;

//屬性值

//less
//變量
@pink:pink;
.content{
    color:@pink;
}

編譯成

.content{
    color:#ffc0cb;//pink
}

//選擇器

@selector:content;
.@{selector}{
    color:pink;
}
//或者
@sector:.content;
@{selector}{
　　color:pink;
}

//編譯后都是
.content{
    color:pink;
}

一定要把定義的選擇器變量名放在{}里面，并在花括號(hào)的前面加@

//url

@img:"../img/";
.content{
    backgrond:url("@{img}/sea.jpg");
}

//編譯后
.content{
    background:url("../img/sea.jpg");
}

在定義url變量時(shí)，注意將路徑用引號(hào)擴(kuò)起來；

／／屬性名

@property:color;
.content{
    background-@{property}:green;
    a{
        @{property}:white;
    }
}

//編譯后
.content{
    background-color:#00ff00;
}
.content a{
    color:white;
}

在less中可以用一個(gè)變量來定義另一個(gè)變量

@primary:red;
.content{
    @color:primary;
    background-color:@@color;
}
//或者
.content{
    @color:@primary;
    background-color:@color;
}

//編譯后都是
.content{
    background-color:red;
}

less 中的懶加載

即我們可以不需要在使用變量之前使用這個(gè)變量

@h:300px;
.content{
    width:@var;
    height:@h;
}
@var:9%;

//編譯后
.content{
  width:9%;
  height:300px;
}

當(dāng)我們重復(fù)定義多個(gè)變量時(shí)，以當(dāng)前作用域中最后定義的為準(zhǔn)，若當(dāng)前作用域沒有定義，則逐級(jí)向上尋找；

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

//編譯后
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

在3.0版本中最新的利用$propertyName來獲取屬性值，有時(shí)候利用好了可以使代碼看起來更簡便

.widget {
  color: #efefef;
  background-color: $color;
}
//編譯后
.widget {
  color: #efefef;
  background-color: #efefef;
}

云服務(wù)器 GPU云服務(wù)器深度學(xué)習(xí)二 less less2 html使用less

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

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

相關(guān)文章

less學(xué)習(xí)筆記

摘要：方便了的編寫和維護(hù)。本文記錄了開發(fā)中最常用的幾種語法。這里的單位可以省略，但是兩者必須有一個(gè)帶單位嵌套嵌套是中非常有用高效的語法。學(xué)習(xí)學(xué)習(xí)學(xué)習(xí)在中如果我們需要對(duì)這一結(jié)構(gòu)的樣式進(jìn)行渲染，就會(huì)使用等選擇器。一、什么是less less是一種動(dòng)態(tài)樣式語言，屬于css預(yù)處理語言的一種，它使用類似css的語法，為css賦予了動(dòng)態(tài)語言的特性，如變量、運(yùn)算、函數(shù)等。方便了css的編寫和維護(hù)。 le...

codercao 2019-08-29 13:53 評(píng)論0 收藏0
less學(xué)習(xí)筆記

摘要：方便了的編寫和維護(hù)。本文記錄了開發(fā)中最常用的幾種語法。這里的單位可以省略，但是兩者必須有一個(gè)帶單位嵌套嵌套是中非常有用高效的語法。學(xué)習(xí)學(xué)習(xí)學(xué)習(xí)在中如果我們需要對(duì)這一結(jié)構(gòu)的樣式進(jìn)行渲染，就會(huì)使用等選擇器。一、什么是less less是一種動(dòng)態(tài)樣式語言，屬于css預(yù)處理語言的一種，它使用類似css的語法，為css賦予了動(dòng)態(tài)語言的特性，如變量、運(yùn)算、函數(shù)等。方便了css的編寫和維護(hù)。 le...

MkkHou 2019-08-02 15:58 評(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