Less

less是动态的样式表语言，通过简明的语法定义，使编写cs’s的工作变得非常简单，本质上，less包含一套自定义的语法以及i一个解析器。

安装

1、安装Nodejs环境

2、cmd中执行

1
npm install -g less

3、验证

1
lessc -v    //若正确出现less版本号则安装成功

使用less编译

​ 先创建一个less文件 demo.less

1
2
3
4
@color: #ccc;
div {
	color: @color;
}

​ 在当前目录下运行cmd，输入

1
lessc demo.less demo.css

运行之后会在当前目录下生成一个demo.css文件，内容为

1
2
3
div {
  color: #ccc;
}

VsCode中使用less

​ 1、添加 Easy Less 扩展插件，安装，安装完后最好重启一次VSCode；

​ 2、在需要生成css文件的地方，新建一个.less文件；

​ 3、保存后，会在同级目录下自动生成一个同名css文件

less的基本语法

注释

1
/*注释*/        这种注释方式会也会编译到css中
1
//              这种注释方式在编译时会被去除

变量

​ @变量名: 值

1
2
3
4
@baseColor: #eee;     //申明一个变量并赋值
a {
    color: @@baseColor;   //使用变量
}

混入

​ 可以将一个定义好的变量引入到另一个样式中 类似于函数的调用

1
2
3
4
5
6
7
8
9
10
11
12
13
//先写好一个样式  @r 类似于函数的形参
.addRadius(@r:10px){  //也可以设置默认值
    border-radius: @r;
    -wekit-border-radius: @r;
    -moz-border-radius: @r;
}

//使用样式
div {
    width: 200px;
    height: 200px;
    .addRadius(5px);
}

嵌套

​ 可以实现选择器的继承，可以减少代码量，同时使代码结构更加清晰

1
2
3
4
5
.jd_hearder {}
.jd_hearder > div {}
.jd_hearder > div > h3 {}
.jd_hearder > div > h3::before {}
.jd_hearder	> div > a:hover {}

上面是我们之前常用的写样式的方式，代码是非常冗余的，并且结构不清晰；

可以用less来解决这类问题，并且编译后的css文件，与上面的代码的效果是一样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.jd_header {
    width: 100%；
        height: 200px;
    .addRadius();
    //嵌套一个元素
    div {
        width: 100%;
        h3 {
            height: 200px;
            ::before    //相当于 h3 ::before
            $::before {}//相当于 h3::before     注意区别
        }
        a {
            color: @baseColor;
            $:hover {   //相当于 a:hover
                text-decoration: none;
            }
        }
    }	
}

最后更新： 2019年09月02日 11:01

原始链接： https://HowlCN1997.github.io/2018/02/28/Less/

赏
× 请我吃糖~
打赏二维码