Less基础（CSS扩展语言）

目录

1.CSS的缺点：

2.Less简介：

3.Less使用：

3.1 Less变量的定义

3.2 Less的编译

4.Less嵌套：

4.1 一般情况

4.2 伪类、伪元素等特殊情况

5.Less运算：

---

1.CSS的缺点：

关于Less，首先要了解一下CSS的弊端,CSS的冗余度非常高，大家写的时候应该也能感觉到，有大量重复并且冗余的部分，并且CSS没有很好的计算能力，难以维护，不易复用。比如在出现边距问题需要计算的时候，只能手动计算并不能像其他语言那样有计算能力。

2.Less简介：

Less是一门CSS的扩展语言，也叫CSS预处理器。在CSS现有的语法基础之上，给CSS加上了程序式语言的特性，引入了变量/函数/运算等功能，降低了CSS的维护成本，具体可以去Less的中文网址上看Less中文官网

常见的CSS预处理器还有Sass，Stylus等等。

3.Less使用：

3.1 Less变量的定义

语法：

@变量名：值；

变量名的命名规范：必须以@为前缀，不能以数字开头且区分大小写.

比如说，我们定义一种颜色:red，然后设置样式，新建一个.less文件：

@color: red;

body {
  background-color: @color;
}

div {
  color: @color;
}

这样当我们想修改整体颜色时候，只需要修改@color即可，不需要在css中一个一个的修改，大大降低了维护成本

3.2 Less的编译

Less包含自定义的语法和解析器，我们定义好自己的样式之后，会通过解析器，编译生成对应的css文件，所以我们需要把less编译成css文件，然后才能在页面中使用。如果你使用的是Vscode编辑器，可以直接下载一个扩展叫Easy LESS:

 

启用之后，当我们保存less文件的时候就会自动生成一个css文件，用于引用。

4.Less嵌套：

4.1 一般情况

以前我们写带有嵌套关系的css时候都是用子代选择器等等，说实话看着真的很乱，十分头疼，Less的嵌套语法就很好的解决了这个问题，当我们想为子元素指定样式时只需要在父元素的样式里嵌套就可以了，比如想要给<div>里面的<a>设置样式：

div {
  width: 200px;
  height: 200px;
  background-color: blue;

  a {
    color: red;
  }
}

保存之后的css就是这样子

4.2 伪类、伪元素等特殊情况

特殊情况下，如果有伪类选择器、交集选择器、伪元素选择器的情况，在内层选择器的前面需要加&符号，比如下列情况，a链接的：hover不能像上面那样在a里面写：

这样保存好后CSS的结果会变为右图这样，很明显是不对的，并不是伪类选择器。正确的写法应该是下面这样：

a {
  color: aqua;

  &:hover {
    color: bisque;
  }
}

结果如下，伪元素选择器同理。

5.Less运算：

任何的数字、颜色、变量都可以参与运算 ，包括加减乘除，eg：

div {
  width: 200px + 5;
  height: 200px;
  background-color: blue;
}

加号后边不用加单位，运算时候，有一个有单位就行，会以这个单位为准。当前后都有单位且不相同的时候以第一个单位为准！！！