如何使用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;
}

来源：https://www.cnblogs.com/a-pupil/p/10893255.html

标签

css

less

background

预编译