1、维护css弊端
维护css弊端
- CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
- 不方便维护及扩展，不利于复用。
- CSS 没有很好的计算能力
- 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
- CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
- 不方便维护及扩展，不利于复用。
- CSS 没有很好的计算能力
-
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
Less 介绍
Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
安装使用
推荐使用vscode插件
2021-03-22_194710.png
新建一个.less文件后保存后系统会自动生成对应的.css文件2021-03-22_194855.png
2021-03-22_194710.png
2、less语法
2.1变量（Variables）
@变量名:值;
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
例如：
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译为：
#header {
width: 10px;
height: 20px;
}
2.2混合（Mixins）
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法
例如：
CSS
.bordered{
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
引用：
LESS
#menu a{
color:red;
.bordered();
}
2.4嵌套（Nesting）
CSS
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
引用：
LESS
#header{
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
CSS
.banner {
margin: 0 auto;
}
LESS
@my-selector: banner;
.@{my-selector} {
margin: 0 auto;
}
图片路径：
CSS
body {
background: url("../img/white-sand.png");
}
LESS
@images: "../img";
body {
background: url("@{images}/white-sand.png");
}
跨级引用
CSS
.section .element {
color: green;
}
LESS
@primary: green;
@secondary: blue;
.section {
@color: primary;
.element {
color: @@color;
}
}
2.5Less 运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。
@base: 2cm * 3mm; // 结果是 6cm
你还可以对颜色进行算术运算：
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355
