一.概述

1.less是一门css的预处理语言（可理解为增强版的css），利用less用更少的代码实现原有的功能

2.less的优缺点：

（1）优点：更简洁，功能多
（2）缺点：less语法与css类似，但是添加很多新特性，浏览器无法执行less代码，需要先转为css在执行

3.实现less转为css：需要插件easy-less

（1）创建.less文件编写less代码，会自动生成一个浏览器支持的css代码
（2）引入到其他文件要引入.css文件才会生效
image.png

二.less中的语法

1.注释：

（1）单行注释（//）：

  • 不会被解析到自动生成的.css文件中

（2）多行注释（/**/）：

  • 会被解析到自动生成的.css文件中

    2.父子元素兄弟元素的定义

    （1）在box1括号内定义的就是box1的子元素
    （2）如图：box2和box3是box1的子元素，box4是box2的子元素
    image.png
    自动转为css文件如下：
    image.png

    3.变量：可以在变量中存储任意的值

    （1）语法：@变量名：变量值；
    （2）使用也要有@

  • @a=100px；

  • .box1{ width：@a }

（3）作为类名或一个值的一部分时要加括号：@（变量名）

  • @b=box2;

  • .@(b){width:@a}

    4.就近原则：变量重名优先选择离得近的

    （1）变量可以在使用后定义，但是不建议这么做

    5.使用上面定义好的属性：$属性名

    image.png
    转换后：
    image.png

    6.&指代外层的父元素

    image.png
    转换后：
    image.png

    7.扩展（就是类似继承）：用extend或直接引用

    （1）继承的子类除了继承父类还可以额外设置自己的样式（推荐使用）

  • 案例：

image.png
转换后：
image.png
（2）直接引用：直接把要引用的写入

  • 案例

image.png
转换后：
image.png

8.在选择器后+（），就不会参与转换，可用于引用，相当于把样式设置为变量

（1）属于混合函数
（2）案例：
image.png
转换后不显示带()的，不参与转换
image.png

三.混合函数

1.混合函数就是在选择器后加()，括号里定义变量，在调用时，就要带参数调用
2.混合函数的定义
（1）默认方式：括号内定义变量，其中属性值等于变量，一定要按顺序传入参数
image.png
转换后：
image.png
（2）若不按顺序，就要指明变量：变量值

  • 不然会发生参数错乱，串位置

image.png
（3）还可以设置默认值，这样不传参也不会报错

  • 在定义变量时指定默认值

image.png

四.补充

1.less中所有数值可以直接进行运算（+ - * /）
2.less中引入其他less文件：import”路径”，可以实现多个less的合并

五.更多有关查看less离线文档