less基础

less基础

3.1 维护css的弊端

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

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

less 介绍

官网： http://lesscss.cn/

Less (Leaner Style Sheets的缩写) 是一门CSS扩展语言，也成为CSS预处理器。 作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

它在CSS的语法基础之上，引入了变量，Mixin(混入)， 运算以及函数等功能，大大简化了CSS编写，并且降低了CSS的维护成本。

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

less安装

基于nodejs在线安装Less，使用cmd命令 npm install -g less 即可。 检查是否安装成功,使用 cmd命令 lessc -v 查看版本即可。

less使用

less 变量

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

• 变量命名规范
  • 必须有@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感

//定义一个粉色的变量
@color:pink;
body{
background-color:@color;
}
div{
color:@color;
}

less编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。 所以我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。

less编译

Easy LESS 插件用来把less文件编译为css文件 ，安装完毕插件，重新加载下vscode。只要保存一下less文件，会自动生成CSS文件。

less 嵌套

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

• 内层选择的前面没有&符号，则它被解析为父选择器的后代
• 如果有&符号,它就被解析为父元素自身或父元素的伪类

.header{
width:200px;
height:200px;
background:pink;
/*less嵌套  子元素的样式直接写到父元素里面*/
a{
    color:red;
/*如果有伪类，交集选择器 伪元素选择器 我们内层选择器的前面需要加& */
&:hover{
    color:blue;
}
}
}

less运算

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

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

@border: 5px + 5;
div{
    width:200px - 50;
    height:200px;
    border:@border solid red;
}