less 動態樣式語言

1.less的介紹

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。

2.less需要編譯才能被瀏覽器解析

瀏覽器本身只能解析css文件，對於less無法解析。
要么對less進行編譯，讓他在node環境下轉換成對應的css文件。
要么引入less后再引用對應的js文件

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script>

3.安裝node環境

less的編譯依賴node環境，請先安裝node.js
安裝完畢后在cmd下輸入：node -v
這個命令用來查詢node的版本，查詢到版本號則表示安裝成功

4.安裝less編譯程序

在cmd環境下運行 npm install -g less

5.手動編譯less文件

在要編譯的less文件目錄下打開cmd窗口，輸入以下命令即可執行編譯

lessc test.less test.css

即可將此目錄下的test.less編譯成test.css文件

6.less變量的定義與使用

/*定義變量*/
@gbColor:red;

.box{
    width: 200px;
    height: 100px;
    /*使用變量*/
    background-color: @gbColor;
}

編譯結果

.box {
  width: 200px;
  height: 100px;
  background-color: red;
}

7.引用其他css類

.addBorder{
    border:1px solid red;
}
.box{
    width:100px;
    height: 100px;
    /*引用其他css類*/
    .addBorder();
}

8.函數

/*設置參數，且有默認的值*/
.addBorder(@size:1px){
    border:@size solid red;
}
.box{
    width:100px;
    height: 100px;
    /*引用並傳遞參數*/
    .addBorder(10px);
}

9.嵌套

.box{
    width:100px;
    height: 100px;
    /*只針對子級div有效*/
    > div{
        display: float;
    }
    /*針對后代所有p標簽都有效*/
    p{
        text-align:center;
    }
}

10.偽類

div{
    width:100px;
    height: 100px;
    &:nth-of-type(1){
        background-color: red;
    }
}

11.運算

div{
    width:400px;
    height: 100px;
    >.item{
        /*運算 相當於33.3333%*/
        width:1/3*100%;
    }
}

12.導入

你可以導入一個 .less 文件，此文件中的所有變量就可以全部使用了。如果導入的文件是 .less 擴展名，則可以將擴展名省略掉：

@import "library"; // library.less