less的使用

维护css的弊端

CSS是一门非程序式语言,没有变量、函数、SCOPE (作用域)等概念。
●CSS需要书写大量看似没有逻辑的代码. CSS冗余度是比较高的。
●不方便维护及扩展 ,不利于复用。
●CSS 没有很好的计算能力
●非前端开发工程师来讲 ,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

Less介绍

1. Less ( Leaner Style Sheets的缩写)是-门CSS扩展语言,也成为CSS预处理器。
2. 做为CSS的一种形式的扩展,它并没有减少CSsS的功能,而是在现有的CSS语法上.为CSS加入程序式语言的特性。
3. 它在CSS的语法基础之上,引入了变量, Mixin(混入) , 运算l以及函数等功能，大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样, Less可以让我们用更少的代码做更多的事情。
4. Less中文网址: http://lesscss.cn/
5. 常见的CSS预处理器: Sass. Less. Stylus

less的安装

在项目根目录下运行以下命令安装相关2个依赖

cnpm i less less-loader -D

一、Less使用

我们首先新建一个后缀名为less的文件 ，在这个less文件里面书写less语句,
●Less 变量
●Less 编译
●Less 嵌套
●Less运算

1. Less 变量

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

a.变量命名规范

●必须有@为前缀
●不能包含特殊字符
●不能以数字开头
●大小写敏感

@变量名:值;

/*定义变量*/
@color_main:skyblue;

div{
	/*使用变量*/
	color:@color_main;
}

2. Less文件的编译

在vscode里直接安装esay less,下次再保存即会自动编译成一个同名的css文件，页面引用css样式即可。

3. Less嵌套

如果遇见(交集|伪类|伪元素选择器)
●内层选择器的前面没有 &符号.则它被解析为父选择器的后代;
●如果有 &符号,它就被解析为父元素自身或父元素的伪类。

/*定义变量*/
@color_main:skyblue;

div{
	/*使用变量*/
	color:@color_main;
}

/*嵌套使用父套子*/
div {
	.nav{
		background-color: #fff;
	}

	a{color: #000;}
	/*a的伪类写法相当于a:hover*/
	&:hover{
		color: red;
	}
}

4. Less运算★

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

1. 我们运算符的左右两侧必须敲个空格隔开
2. 两个数参与运算 如果只有一个数有单乘号(*)和除号(/)的写法
3. 两个数参与运算，如果2个数都有单位，而且不一样的单位最后的结果以第一个单位为准

@border:5px + 5; /*加之后就是10px，运算符两边必须以空格隔开*/

div{
	/*使用变量*/
	color:@color_main;
	border:@border; 
	width: 100px - 50;
	height: (100px + 5rem) * 2; /*结果的单位为px以第一个单位为准*/
	background-color: #666 - #333; /*颜色也可以运算结果为333*/
}