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