less學習二---變量

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;
}