Less基础#
维护css的弊端#
CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。
- CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
- 不方便维护及扩展，不利于复用。
- CSS没有很好的计算能力。
- 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。
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使用#
首先创建一个后缀名为.less的文件，在这个less文件里面书写less语句
- Less变量
- Less编译
- Less嵌套
- Less运算
Less变量#
变量是指没有固定的值，可以改变的。因为CSS中一些颜色和数值等经常使用。
css@变量名：值;
变量名命名规范#
- 必须由@为前缀
-
不能包含特殊字符
@less~&*# -
不能以数字开头
@123less -
大小写敏感
@less/@Less
Less编译#
本质上，Less包含一套自定义的语法以及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。
所以，需要把less文件编译生成css文件，这样html页面才能使用。
vscode使用 Easy LESS插件
Easy LESS插件用来把less文件编译为css文件。
安装完毕插件需重启vscode。
只需要保存一下Less文件，会自动生成css文件
页面正常link引入该css文件即可
Less嵌套#
若遇见(交集|伪类|伪元素选择器)#
- 内层选择器的前面没有&符号，则它被解析为父选择器的后代；
- 若有&符号，它被解析为父元素自身或父元素的伪类。
a:hover{color:red;}
Less嵌套写法
a{&:hover{color:red;}}
Less运算#
任何数字、颜色或者变量都可以参与运算，就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
/*Less*/@width:10px + 5;div{border:@width solid red;}
/*css*/div{border:15px solid red;}
/*less甚至可以这样*/width:(@width+5)*2;
注意：
- 乘号(*)和除号(/)的写法
- 运算符中间左右有空格隔开(1px + 5)
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
- 若两个值之间只有一个值有单位，则运算结果就取该单位