九、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提供了加+减-乘*除/ 算术运算。
还可以用小括号