如何使用less预编译

如何使用less预编译（安装并简单使用）

• 需要安装node.js （node -v / npm -v）用于查看node/npm版本信息
• 安装完node 打开终端运行npm i less -g
• 在建有.less文件夹的位置打开终端 运行 lessc lessDemo.less cssDemo.css（ lessc less文件路径/less文件名 css文件路径/css文件名 ）//用于转换成css

less语法

注释

• // 只会在less中显示

• /**/ 会在编译好的css文件中显示

变量

• 在less中定义变量使用@符

    @bgcolor:red;
    .box{
       width:200px;
       height:200px;
       background:@bgcolor;
    }

• 编译之后输出的css

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

混合

• 不带参数的混合

.borders{
    border: 3px solid red;
}
.box{
    width: 200px;
    height: 200px;
    background: pink;
    .borders
}

• 编译之后输出的css

.box{
    width: 200px;
    height: 200px;
    background: pink;
    border: 3px solid red;
}

• 带参数的混合

 //参数/变量名 必须以@开头
.borders(@num){
    border: @num solid red;
}
.box{
    width: 200px;
    height: 200px;
    background: pink;
    .borders(6px)
}

• 编译之后输出的css

.box{
    width: 200px;    
    height: 200px;
    background: pink;
    border: 6px solid red;
}

嵌套

.box{
    width: 200px;
    height: 200px;
    background: pink;
    border: 3px solid red;
    p{
        width:100px;
        height:100px;
        background:deeppink;
    }
}

引用

• 在一个（one）less文件中只定义变量 在另外一个 (two) less文件中进行引用

 1. one.less文件
    @color:red;
    @bgcolor:skyblue;
    @fontSize:36px;
    @wid:200px;
    @hei:200px;

2. two.less文件
@import “./one.less”;（引入需要加分号）
.box{
    width:@wid;
    height:@hei;
    background:@bgcolor;
}