九、less

九、less

1 less基础

1.1 维护css的弊端

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

css需要书写大量看似没有逻辑的代码，css冗余度比较高的。

不方便维护及扩展，不利于复用。

css没有很好的计算能力，例如width：82/50 css不能计算。

非前端开发工程师来讲，往往会因为缺少css编写经验而很难写出组织良好易于维护的css代码项目。

1.2  less介绍

less（leaner style sheets的缩写）是一门css扩展语言，也成为css预处理器。

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

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

less中文地址：lesscss.cn

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

一句话：Less是一门css预处理语言，它扩展了css的动态特性。

1.3 Less安装

1、安装nodejs，网址：nodejs.cn/download/

2、检查是否安装成功，使用cmd命令，输入node -v查看版本即可。

3、基于nodejs在线安装Less，使用cmd命令 npm install -g less 即可。

4、检查是否安装成功，使用cmd命令 lessc -v 查看版本即可。

1.3 Less使用

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

less变量

less编译，less文件转为css文件

less嵌套

less运算

1.4 less变量

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

语法：

@变量名：值

1、变量命名规范

（1）必须有@为前缀

（2）不能包含特殊字符

（3）不能以数字开头

（4）大小写敏感。

例如：

 

1.5 Less编译

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

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

vscode Less插件

easy less 插件用来把less文件编译为css文件。

安装完毕插件，重新加载下vscode。

只要保存一下Less文件，会自动生成css文件。

 1.6 Less嵌套

 

 例如：

 

 生成的css文件

 

如果遇到（交集|伪类|伪元素选择器）

内层选择器的前面没有&符号，则它被解析为父选择器的后代；

如果有&符号，它就被解析为父元素自身或父元素的伪类。

 

生成的css就是

a:hover{color:blue;}

 

生成css就是

.nav::before{content="";}

1.7 less运算

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

 还可以用小括号