1. 程式人生 > >Less學習筆記6:運算

Less學習筆記6:運算

運算
Less中的運算

任何數字,顏色或者變數都可以參與運算,運算應該被包裹在括號中
例如:+ - * /

例如:
新建一個變數

@test_01:300px;

在HTML 中,

<div class="box_01"></div>
.box_01{
    width:@test_01;
}

此時這個div的寬度就為:300px;

這個時候使用運算,使這個div的寬度為320px

即:

.box_01{
    width:@test_01 + 20;
}

這裡的 增加的數值沒有強制性的要求去增加單位。

此時這裡完全按照四則運算規則

顏色也可以進行運算

例如:

.box_01{
    width:@test_01 + 20;
    color:#ccc - 10;
}

這個時候,編譯出來的CSS樣式中的顏色就為:

.box_01{
    width:320px;
    color:#c2c2c2;
}

注意:在工作或做專案中,顏色的運算一般不常用,用哪個顏色直接寫某個顏色就好了