Less實戰（二）：變量

變量（Variables）

變量常以@作爲名字開頭，後接名字，如：
@width , @height , @kok , @length
演示中不會做太多講解，因爲less比較簡單易用，只需看下代碼演示，即可知道其中的真諦

入門實操演示

example.less文件

@width:100px;
@height:100px;
@color:red;

#container{
    width: @width;
    height: @height;
    background-color: @color;
}

編譯完成後的example.css文件

#container {
  width: 100px;
  height: 100px;
  background-color: red;
}

結果如圖

選擇器

可以將變量設置爲類選擇器

@width:100px;
@height:100px;
@color:red;
@name:oneDiv;

.@{name}{
    width: @width;
    height: @height;
    background-color: @color;
}

---

URLs

可以將變量設置爲url路徑

@width:100px;
@height:100px;
@name:oneDiv;
@images:"../img";


.@{name}{
    width: @width;
    height: @height;
    background:url("@{images}/kok.png");
}

---

Properties

可以將變量設置爲屬性名

@width:100px;
@height:100px;
@name:oneDiv;
@images:"../img";
@imageName:image;


.@{name}{
    width: @width;
    height: @height;
    background-@{imageName}:url("@{images}/kok.png");
}

注意！這裏的@imageName後面填寫的值沒有雙引號 !!!，不要寫引號，不然會編譯報錯

---

變量之變量

在less中，你可以定義用其他變量定義一個變量的名字，有點像C語言中指針的指針

@first: 10px;

.big{
    @width: first;
    .small{
        width: @@width;
    }
}

編譯後

.big .small {
  width: 10px;
}

---

懶定義

變量可以不必在使用前聲明

.big{
    width: @first;
}

@first: 10px;

變量之變量這樣用就不太一樣了

.big{
    width: @first;
    @second:20vw;
}

@first: @second;
@second:0vw;

---

$Prop

你可以很容易的使用像$prop這樣的語法，可以使代碼更輕便

.father{
    color: red;
    background:$color;
}

編譯後

當變量放在最後面的時候

.father{
    color: red;
    background:$color;
    .son{
        background-color:$color;
    }
    color:blue;
}

---

以上就是less的變量知識總結