遇见Less（Less的学习笔记）

首先我在网上找到的中文文档：https://less.bootcss.com/#%E5%8F%98%E9%87%8F%EF%BC%88variables%EF%BC%89

其次，如果大家编写的less保存不能自己生成css，可以参考：在Visual Studio Code中，安装easy less插件_笑到世界都狼狈的博客-CSDN博客

如果想了解Sass,可以参考：遇见Sass（Sass的学习笔记）_笑到世界都狼狈的博客-CSDN博客

接下来，开始学习

一、什么是Less?

    Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），

    包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

    因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

二、变量（Variables）

     这个相信会写js小可爱一看就懂，只是有可能短暂性不适应这种写法而已

    @ 相当于 js中的var  es6中的let,cost

    @ 后面就相当于我们声明了一个变量，然后在需要的时候，调用变量即可

对比示例：

less代码：

@width:10px;
@height:@width + 10px;
#height{
   width: @width;
   height: @height;
}

三、混合（Mixins）

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

这种方法就类似于我们在js中声明了一个函数，然后在需要的地方调用就好了，但是这边调用的时候要加上类选择器

如：.bordered();/ #bord();-------注：我尝试了一下，标签样式是不会被调用的，所以应该是要class/id选择器的

对比示例：

less代码：

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
#bord{
    border: 1px solid #cccccc;
}
#menu a{
    color: #cccccc;
    .bordered();
}
.post a{
    color: rebeccapurple;
    #bord();
}

四、嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力

可以把这种嵌套关系理解为写html标签页面，一层一层嵌套的thml标签就相当于一层一层嵌套的样式

对比示例：

less代码：

#header{
    color: #000;
    .navigation{
        font-size: 12px;
    }
    .logo{
        width: 300px;
        height: 300px;
        .logImage{
            display: block;
            width: 100%;
        }
    }
}

你还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：

对比示例：

less代码：

.clearfix {
    display: block;
    zoom: 1;
  
    &:after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  }

@规则嵌套和冒泡

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。

@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

这个我把原来官网里的代码改了一下，改的稍微有点像我们做响应式页面的代码原则，可能单方面看不是很好理解,

但是对照css看还是蛮好理解的，就相当于冒泡了，最外侧的类样式.compontent在每一个@media中都

执行了一遍，并且@media如果有嵌套，就会编译成and的形式展示

对比示例：

less代码：

.compontent{
    @media (min-width: 700px) {
        width: 600px;
        @media (max-width:1080px) {
            background: pink;
        }
    }
    @media (min-width:1080px){
        background: skyblue;
    }
}

五、运算（Operations）

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。

计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

这个个人感觉写代码的时候，也没有这么写过，就不多解释了

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%

calc() 特例

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

对比示例：

less代码：

@var: 50vh/2;
.calcClass{
    width: calc(50% + (@var - 20px));
}

六、转义（Escaping）

转义（Escaping）允许你使用任意字符串作为属性或变量值。

任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。

即：需要原样输出，不需要less进行编译的代码，只需要用 ~""包裹起来就好了

对比示例：

less代码：

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
    width: ~"calc(50% + (50px - 20px))";
  }
}

还有一些less的函数、命名空间和访问符、映射、作用域、注释、导入等，就不一一做解释了，

可以参照文章刚开始的less中文文档介绍：https://less.bootcss.com/#%E5%8F%98%E9%87%8F%EF%BC%88variables%EF%BC%89