Less預編譯

前端編譯css

1將less寫在html裏   將style的type = 「text/less」

                                在js環境中引入less.js

2引入less代碼 （必須在服務器下）     link標籤的rel修改成stylesheet/less     href = 「./less.less」

                                                             在js環境中引入less.js

後端編譯less（nodejs）

1下載less模塊 npm install less -g

以後lessc  less文件  css文件 

執行lessc命令以後會自動生成css文件

2webpack編譯less

首先創建一個webpack.config.js文件  把配置代碼寫進這個文件中

其次下載加載機所須要的模塊  less-loader  style-loader  css-loader  less

配置    

module.expots = {
        入口文件entry:"./module/main"
        出口文件output ：{

                        path：--dirname，
                        filename：「./bundle.js」 

                                    }
        module:{
                     rules : [
                                test:/\.less$/,
                                loader: "style-loader!css-loader!less-loader"
                                ]
                   }



}

定義變量

          @key:value

混合

       選擇器中樣式的複用   在一個選擇器中寫另外一個選擇器名稱 表示選中目標選擇器當中全部樣式

方法

     .method(@key, @key1,@key2) {

                                                          key:@key

                                                          key1:@key1

                                                          key2:@key2

                                             }  

斷定語法

      .rect()when(){}

      .rect()when()and(){}

      .rect()when()or(){}

      .rect()when not(){}

內置函數

      ceil 數字向上取整

      floor 向下取整

      round 四捨五入

      percentage  將數字轉爲百分比

      字符串方法

             e  將內容原樣輸出

             escape 轉碼

             replace 替代

差值語法

        @{名稱}

less中定義顏色的6種方式

      16進制  rgbs  rgb  hsla hsl 單詞

引入文件

      @import  url（目標less文件的路徑）

顏色操縱函數

     下降亮度darken     提高亮度 lighten

     下降飽和度desaturate    提高飽和度 strature

     下降透明度fadein    提高透明度fadeout    將透明度設置爲發的fadeTo