Less学习

---

前言

LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。

一、less环境搭建

1.单页面项目中less环境搭建

Less是运行在node.js之上的，需要Node.js进行编译处理，既可以在客户端运行，也可以在服务端运行

• 配置node环境

1、用vscode打开任意目录下的指定文件夹
2、

• 配置less

第一，在扩展包搜索 less ,找到 easy less
第二，安装完记得重启
第三，ctrl+, 快捷键打开设置，也可以在 文件 > 首选项 > 设置
第四，搜 less.complie ，点击less,拉倒最底下，找到 setting.json
第五，在json配置中加入，less.compile(less配置)复制代码

"less.compile": {
"compress": false,//是否压缩
"sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
"out": true, // 是否输出css文件，false为不输出
"outExt": ".css", // 输出文件的后缀,小程序可以写'wxss'
}

2.vue框架中less环境搭建

**

https://blog.csdn.net/kiri_to/article/details/94384580
（1）安装less和less-loader

打开npm输入:

打开项目文件查看 package.json查看是否安装成功

（2）添加less相关配置

build/webpack.base.conf.js配置
在build/webpack.base.conf.js文件下找到rules数组，加入配置

	{
	   test: /\.less$/,
	   loader: "style-loader!css-loader!less-loader"    
	}

（3）代码中的style标签中加上 lang="less"即可

为了确保安装成功可以重新启动一次项目
（4）在语法中加入JS语句报错解决办法

配置JS，启动内联JavaScript
打开build/utils.js进行配置修改less 的配置

添加：{ javascriptEnabled: true }，然后重新启动项目即可
**

二、less的语法及应用

1.使用过程：

• 在VScode中，先写好less文件
• 安装EASY LESS，修改less setting中的内容（具体步骤看上面步骤）
• 然后在less文件中直接保存，自动生成CSS文件即可
• 然后在HTML中使用LINK标签进行引用CSS文件

2.注释的差别

• 编译的时候，Less文件中以//开头的注释不会被自动编译到CSS文件中
• 以/**/包裹的注释会被编译到CSS文件中去

3.变量的使用

• 属性值

例如
在CSS文件中使用到了color的属性值
例如：background:pink;
可以在less文件中改为
@color:pink
background:@color;
这样就可以通过修改color这个属性值的值来修改整个文件中用到的地方

• 属性名

例如
用到margin:0;
可以在less文件中修改为
@m:margin
@{m}:0

• 选择器名称

例如
@selector:#wrap
@{selector}来使用wrap

3.变量的延迟加载

 @var:0;
  .class{
    @var:1;
    .brass{
        @var:2;
        three:@var;
        @var:3;
    }
    one:@var;
}

结果：
three:3
.brass中的three是延迟加载，需要@var:3；加载完毕之后才能复制给three
one: 1

4.less的嵌套规则

如果不想要父子关系，而是想要和上一个是连接的关系，就在这个属性值前加上一个&
例如：
&:hover{
background: deeppink;
}
就是把这个hover连接在前面所有的元素的后面

5.LESS混合

混合就是将一系列属性从一个规则集引到另一个规则集的方式
（1）普通混合，如果CSS中有两个div，这两个div块中有相同的代码，那么就把这两块代码给定义到一个集中的块中，如果需要用到这一块的代码，就把它给直接引用过来。
这样的话在Less转为Css的时候，就自动实现了转化
（2）不带输出的混合
但是这样的话，这一块集中的代码也会被编译到CSS文件中去，这样一来，就会在CSS文件中也会显示这一段代码，造成冗余。
解决方法：可以在这一段公用的代码的名称前加上括号，当做为一个方法来使用，这样在编译的时候就不会在CSS中显示
（3）带参数的混合
可以在第二步的基础上，在括号内添加参数，这样就可以在调用的时候，动态的修改参数，达到具体要显示的效果，这样在其他版块调用这一个具体版块的时候，就需要进行输入具体的参数
例如以下：
.complex(@a,@b,@c){
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: blue;
height: @a;
width: @b;
&:hover{
background:@c;}

     }

（4）有的时候需要设置一个默认值，在调用的时候如果没有输入值的话，就直接按照默认值进行赋值
.complex(@a,@b,@c:black)
这样就设置颜色默认为black。
（5）命名参数
这个的具体用法是，当传给混合只有一个参数的时候，要带上他的形参的名称，这样就可以知道是传参数给哪个形参使用的。
例如：
.complex(@c:green)
这个时候只传了一个参数，这样就直接把color赋值为green

6.匹配模式

重点就是import一个CSS文件，这个CSS文件可以看做一个库函数，把它封装起来，然后在使用的时候可以直接import"这个CSS文件的具体位置"
如果在这个函数库中也有相应的重复的代码，就可以把重复的代码给提取出来，然后使用@_参数来定义这个混合，这样在使用的时候，就会自动加载这个混合

7.LESS的继承

注意要使用继承的时候，不可以定义声明为混合，而是要定义为一个类，也就是说不可以加括号来声明
如果想要继承所有的状态，就需要使用extend(juzhong all)，添加一个all关键字，就是把所有的状态全部继承下来性能高，灵活性低