Less 基础

1. 维护CSS的弊端

CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。

CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。不方便维护及扩展，不利于复用。CSS没有很好的计算能力非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目

2. Less介绍

Less(Leaner Style Sheets 的缩写) 是一门CSS扩展语言，也称为CSS预处理器。

作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

它在CSS的语法基础之上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，less可以让我们用更少的代码做更多的事情。

Less 中文网址：Http://lesscss.cn/

常见的CSS预处理器：Sass、Less、Stylus

总结：Less是一门CSS预处理语言，它扩展了CSS的动态特性

3. Less 安装

安装nodejs，网址：http://nodejs.cn/download/检查是否安装成功，使用cmd命令(window + r 打开 输入cmd) — 输入“node -v” 查看版本即可基于nodejs在线安装Less，使用cmd命令“npm install -g less”, 即可检查是否安装成功，使用cmd命令“lessc -v“ 查看版本即可

Less 使用

首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。

Less使用Less编译Less嵌套Less运算

4. Less 变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

语法：

@变量名:值;

1. 变量命名规范

必须有@为前缀不能包含特殊字符不能以数字开头大小写敏感 // 定义一个粉色的变量 @color:pink; // 定义一个 字体为14像素的变量 @font14:14px; body{ background-color: @color; } div { color: @color; font-size: @font14; }

5. Less 编译

本质上，Less包含一套自定义的语法及一个解析器。用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

所以，我们需要把我们的less文件，编译生成为CSS文件，这样我们的html页面才能使用。

vscode Less 插件

Easy LESS 插件用来把less文件编译为css文件

安装完毕插件，只要保存一下Less文件，会自动生成CSS文件。

6. Less嵌套

.header { width: 200px; height: 200px; background-color: pink; // less嵌套 子元素的样式直接写到父元素里面 a { color: purple; } }

如果遇见(交集|伪类|伪元素选择器)

内层选择器的前面没有&符号，则它被解析为父类选择器的后代；如果有&符号，它就被解析为父元素或父元素的伪类。 a { color: purple; // 如果有伪类、交集选择器、伪元素选择器 我们内层选择器的前面需要加& &:hover { color: red; } }

7. Less 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算

@border:5px + 5; div { width: 200px - 50; height: 200px * 2; border: @border solid red; } img { width: 82 / 50rem; height: 82 / 50rem; }

以上代码编译结果:

div { width: 150px; height: 400px; border: 10px solid red; } img { width: 1.64rem; height: 1.64rem; }

注意：

乘号(*)和除号(/)的写法运算符中间左右有个空格隔开 1px + 5对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位如果两个值之间只有一个值有单位，则运算结果就取该单位