關於Less的用法

想了解更多關於Less的用法和相關內容，請檢視官方文件：Less中文文件

在less中兩種註釋的區別

@charset "utf-8";

// 第一種註釋方式 "//" 不會被編譯,即不會被編譯到css檔案中

.box {
    width: 10px;
}

/* 第二種註釋方式 "/ *  * /" 會被編譯, 即會被編譯到css檔案中 */

.box {
    height: 20px;
}

上面程式碼等價於

@charset "utf-8";

.box {
    width: 10px;
}

/* 第二種註釋方式 "/ *  * /" 會被編譯, 即會被編譯到css檔案中 */

.box {
    height: 20px;
}
 

在less中宣告變數

@charset "utf-8";

// less中宣告變數一定要用 @ 符號開頭
// 例如：@變數名: 值;
// @test_width: 200px;

// 宣告變數
@test_width: 200px;

// 使用變數

.box {
    width: @test_width;
}

上面的less程式碼等價於

@charset "utf-8";

.box {
    width: 200px;
}

Less中的混合模式

1.普通混合模式

@charset "utf-8";

// 混合模式

@test_width: 200px;

.box {
    width: @test_width;
    height: @test_width;
    .border;
}

.border {
    border: 1px solid red;
}

.box_02 {
    .box;
    margin-left: 20px;
}
 

 等價於

@charset "utf-8";

.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

.box_02 {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    margin-left: 20px;
}

2.帶參混合模式

@charset "utf-8";

// 混合模式 可帶引數

.width(@test_width) {
    width: @test_width;
}
.border(@test_color) {
    border: 1px solid @test_color;
}

.box {
    .width(200px);
    .border(red);
}
 

等價於

@charset "utf-8";

.box {
    width: 200px;
    border: 1px solid red;
}

3.帶參混合模式設定預設引數

@charset "utf-8";

// 混合模式 可帶引數  設定預設值

.width(@test_width: 200px) {
    width: @test_width;
}
.border(@test_color: red) {
    border: 1px solid @test_color;
}

.box {
    .width();
    .border();
}
.box_02 {
    .width(400px);
    .border(pink);
}

// 混合模式的例子
.border_radius(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.box_03 {
    .border_radius();
}

等價於

@charset "utf-8";

.box {
    width: 200px;
    border: 1px solid red;
}
.box_02 {
    width: 400px;
    border: 1px solid pink;
}
.box_03 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Less中匹配模式

@charset "utf-8";

// 匹配模式

// 箭頭向上
.triangle(top, @w: 5px, @c: #ccc) {
    width: @w;
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}
// 箭頭向下
.triangle(bottom, @w: 5px, @c: #ccc) {
    width: @w;
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
// 箭頭向左
.triangle(left, @w: 5px, @c: #ccc) {
    width: @w;
    border-width: @w;
    border-color: transparent @c transparent transparent;
    border-style: dashed solid dashed dashed;
}
// 箭頭向右
.triangle(right, @w: 5px, @c: #ccc) {
    width: @w;
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}
// 不傳引數，預設匹配
// @_ 固定寫法，代表預設匹配，即如果triangle的第一個引數匹配不到上面的"left","right","top","bottom",就預設匹配下面的程式碼樣式
.triangle(@_, @w: 5px, @c: #ccc) {
    height: 0;
    overflow: hidden;
}
/* 箭頭向上 */
.box {
    .triangle(top);
}
/* 箭頭向右 */
.box_02 {
    .triangle(right);
}
/* 箭頭向下 */
.box_03 {
    .triangle(bottom);
}
/* 箭頭向左 */
.box_04 {
    .triangle(left);
}
/* 不傳引數 */
.box_05 {
    .triangle();
}

等價於

@charset "utf-8";

/* 箭頭向上 */
.box {
    width: 5px;
    border-width: 5px;
    border-color: transparent transparent #ccc transparent;
    border-style: dashed dashed solid dashed;
}
/* 箭頭向右 */
.box_02 {
    width: 5px;
    border-width: 5px;
    border-color: #ccc transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
/* 箭頭向下 */
.box_03 {
    width: 5px;
    border-width: 5px;
    border-color: transparent #ccc transparent transparent;
    border-style: dashed solid dashed dashed;
}
/* 箭頭向左 */
.box_04 {
    width: 5px;
    border-width: 5px;
    border-color: transparent transparent transparent #ccc;
    border-style: dashed dashed dashed solid;
}
/* 不傳引數 */
.box_05 {
    height: 0;
    overflow: hidden;
}

Less中的運算

@charset "utf-8";

// +,-,*,/, 運算

@test_width: 200px;

.box {
    width: @test_width + 20;
}

.box_02 {
    width: @test_width -20;
}

.box_03 {
    width: @test_width * 2;
}

.box_04 {
    width: @test_width / 5;
}

.box_05 {
    width: (@test_width - 100) * 3;
}

/* 顏色也可以計算 */
/* 顏色的計算方式是把十二進位制 #ccc 轉換成 255 的形式, 然後進行運算, 最後再把結果轉換為十二進位制的形式 */
.box_06 {
    color: #ccc - 10;
}

等價於

@charset "utf-8";

.box {
    width: 220px;
}

.box_02 {
    width: 180px;
}

.box_03 {
    width: 400px;
}

.box_04 {
    width: 40px;
}

.box_05 {
    width: 300px;
}

/* 顏色也可以計算 */
/* 顏色的計算方式是把十二進位制 #ccc 轉換成 255 的形式, 然後進行運算, 最後再把結果轉換為十二進位制的形式 */

.box_06 {
    color: #c2c2c2;
}

Less中的巢狀

@charset "utf-8";

// 巢狀

.box {
    width: 300px;
    height: 300px;

    .box_02 {
        width: 100px;
        height: 100px;
        
        // & 代表上一層選擇器,即代表 .box_02
        &:hover {
            color: red;
        }
        .box_03 {
            width: 50px;
            height: 50px;
        }
    }
}

等價於

@charset "utf-8";

.box {
    width: 300px;
    height: 300px;
}

.box .box_02 {
    width: 100px;
    height: 100px; 
}

.box .box_02:hover {
    color: red;
}

.box .box_02 .box_03 {
    width: 50px;
    height: 50px;
}

Less中的@arguments變數

@charset "utf-8";

// @arguments 包含了所有傳遞進來的引數，等同於JavaScript中的引數列表

.border_test(@w: 3px, @xx: solid, @c: #ccc) {
    border: @arguments;
}

.box {
    .border_test();
}

.box_02 {
    .border_test(20px);
}

.box_03 {
    .border_test(5px, dashed, red);
}

等價於

@charset "utf-8";

.box {
    border: 3px solid #ccc;
}

.box_02 {
    border: 20px solid #ccc;
}

.box_03 {
    border: 5px dashed #ff0000;
}

Less中避免編譯的方式

@charset "utf-8";

.box {
    width: calc(300px - 30px);
}
// 避免編譯
// 避免編譯使用 ~ 符號加上 '' (單引號) 或者 "" (雙引號), 引號內的內容就不會被編譯

.box_02 {
    width: ~'calc(300px - 30px)';
}

.box_03 {
    width: ~"calc(300px - 30px)";
}

 等價於

@charset "utf-8";

.box {
    width: calc(270px);
}

.box_02 {
    width: calc(300px - 30px);
}

.box_03 {
    width: calc(300px - 30px);
}

Less中important的用法

@charset "utf-8";

.width_test {
    width: 200px;
}

.border_test {
    border-top: 1px solid red;
    border-bottom: 1px solid blue;
    border-right: 1px solid #ccc;
}

.width_test_02(@w: 100px) {
    width: @w;
}

.border_test_02(@c: red) {
    border-top: 1px solid @c;
    border-bottom: 1px solid @c;
    border-right: 1px solid @c;
}
.box {
    .width_test !important;
    .border_test !important;
}

.box_02 {
    .width_test_02() !important;
    .border_test_02() !important;
}

等價於

@charset "utf-8";

.box {
    width: 300px !important;
    border-top: 1px solid red !important;
    border-bottom: 1px solid blue !important;
    border-right: 1px solid #ccc !important;
}

.box_02 {
    width: 100px !important;
    border-top: 1px solid #ff0000 !important;
    border-bottom: 1px solid #ff0000 !important;
    border-right: 1px solid #ff0000 !important;
}

舉個栗子：

@charset "utf-8";

.title {
    @w: 100%;
    @h: 34px;
    @border_color: #eaeaea;
    height: @h;
    line-height: @h;
    border: 1px solid @border_color;
    margin-top: 20px;
    
    h3 {
        font-size: 20px;
        color: #52ccba;
        font-family: "微軟雅黑";
        font-weight: normal;
    }
}

編譯後：

@charset "utf-8";

.title {
    height: 34px;
    line-height: 34px;
    border: 1px solid #eaeaea;
    margin-top: 20px; 
}

.title h3 {
    font-size: 20px;
    color: #52ccba;
    font-family: "微軟雅黑";
    font-weight: normal;
}