国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

less學習二---變量

Cruise_Chan / 3487人閱讀

摘要:中聲明的變量可以存儲屬性值,還可以存儲選擇器,屬性名,以及等變量聲明及賦值格式屬性值變量編譯成選擇器或者編譯后都是一定要把定義的選擇器變量名放在里面,并在花括號的前面加編譯后在定義變量時,注意將路徑用引號擴起來屬性名編譯后在中可以用一個

less中聲明的變量可以存儲css屬性值,還可以存儲選擇器,屬性名,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; }

一定要把定義的選擇器變量名放在{}里面,并在花括號的前面加@

//url

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

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

在定義url變量時,注意將路徑用引號擴起來;

//屬性名

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

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

在less中可以用一個變量來定義另一個變量

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

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

less 中的懶加載

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

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

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

當我們重復定義多個變量時,以當前作用域中最后定義的為準,若當前作用域沒有定義,則逐級向上尋找;

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

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

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

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

?

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

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/1900.html

相關文章

  • less學習筆記

    摘要:方便了的編寫和維護。本文記錄了開發中最常用的幾種語法。這里的單位可以省略,但是兩者必須有一個帶單位嵌套嵌套是中非常有用高效的語法。學習學習學習在中如果我們需要對這一結構的樣式進行渲染,就會使用等選擇器。 一、什么是less less是一種動態樣式語言,屬于css預處理語言的一種,它使用類似css的語法,為css賦予了動態語言的特性,如變量、運算、函數等。方便了css的編寫和維護。 le...

    MkkHou 評論0 收藏0
  • less學習筆記

    摘要:方便了的編寫和維護。本文記錄了開發中最常用的幾種語法。這里的單位可以省略,但是兩者必須有一個帶單位嵌套嵌套是中非常有用高效的語法。學習學習學習在中如果我們需要對這一結構的樣式進行渲染,就會使用等選擇器。 一、什么是less less是一種動態樣式語言,屬于css預處理語言的一種,它使用類似css的語法,為css賦予了動態語言的特性,如變量、運算、函數等。方便了css的編寫和維護。 le...

    codercao 評論0 收藏0
  • css還可以這么寫?

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

    kidsamong 評論0 收藏0
  • css還可以這么寫?

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

    zhiwei 評論0 收藏0
  • css還可以這么寫?

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

    RaoMeng 評論0 收藏0

發表評論

0條評論

Cruise_Chan

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<