关于Less方面的一些知识点

在了解less之前，我们应该在Visual Studio Code里面下载一个插件“Easy less”

那么这个插件的方法我们是用来干嘛的呢？

这个插件是可以对css的结构进行更加简单话的书写，大大的减少代码量的增加，方便你比同事更加迅速的下班，享受夜生活。奉上链接（https://less.bootcss.com/）

首先我们应该了解less是如何进行命名的，与HTML和CSS的命名方法一样，仅仅只是后缀名改为less就可以了。

那么开始变量是如何进行定义的 ，其格式为：Less 变量 ： @变量名：值；

那么我们来举一个例子：

@color:pink;
div{
    background-color: @color;
}

就像是这么进行书写一样，我们将一个pink的颜色赋值给@color，那么如果我们接下来需要用到这个颜色的时候，我们都可以使用这个变量名进行颜色的更替，并且有一个好处是，仅仅只需要更改一处位置，就可以将所有地方的样式进行修改，从而减少了维护的成本。

但是这也仅仅只是在less的文件里面进行书写的，我们如何将他转换为我们所需要的css结构呢？毕竟我们还是需要靠css来更改样式的，其实很简单，只需要在less文件当中进行保存，那么就会生成一个函数名与less函数名相同的css文件。

less的嵌套:可以将子元素书写在父元素所在的位置里面，那我们该如何理解呢？

就比如说，小乌龟在老乌龟的家里，小乌龟在这么玩闹，那还是在老乌龟的家里面，所以书写方式

div{
    background-color: @colorone;
    span{
        background-color: @colortwo
    }
}

那么它在css里面的显示的样子如下：

div {
  background-color: pink;
}
div span {
  background-color: red;
}

我们就可以看出来，的却是在css里面中作为子元素进行书写的；

那么当我们遇到，交集，伪类，伪元素选择器的时候我们又该如何进行书写。

我们一般会去使用这么一个符号“&”；

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

如果有&符号，他就被解析为父元素自生或父元素的伪类；

那看下面的代码我们来了解一下形式的样子是咋样的

这是在less里面书写的代码：

span{
    &::after{
        background-color: @colortwo;
    }
}

这是在css里面中显示的代码：

span::after {
  background-color: red;
}

所以我们可以明白“&”在里面所能代表的用法

最后就是我们的运算了：

在less中我们支持（‘+’  ‘-’  ‘*’  ‘/’）四种运算法则，在（“ + ”和“ - ”）当中我们进行运算的时候是不需要加括号的，在(“ / ”和“ * ”）里面我们是需要加上括号才能进行适配的运算；

最重要的一点就是：在进行运算符的前后我们都需要一个空格单位的位置，不然是无法进行运算的哦；其次就是两个数一起参与运算，如果前后有单位则前面计算量的单位为准。那么如果只要一个单位的话很明显就是以唯一一个单位为准啦。

有那么一个小公式：页面元素的rem值=页面元素值（px）/ html中font-size字体大小；

例如：在less中的代码段

@media screen and (mim-width:750px) {
    html{
        font-size: (750px / @num);
    }
}

在css中的代码段

@media screen and (mim-width: 750px) {
  html {
    font-size: 50px;
  }
}

就会自动进行font-size的运算，算出适配的大小。