什么是作用域？ 作用域其实能够了解为能够被拜访的区域。Less 语言中变量的作用域和其余编程语言中的很相似，首先会先从本地范畴查找，如果没有找到，编译器会从父范畴查找，向上一层一层找，直到找到为止。

变量的作用域

咱们来看一下对于变量的作用域，上面是用于测试的 HTML 代码：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Less学习(9xkd.com)</title>        <link rel="styleSheet" type="text/css" href="./index.css">    </head>    <body>        <div class="top">            <p>你好，侠课岛！</p>        </div>        <div class="con">            <p>Hello, world!</p>        </div>    </body></html>

而后创立一个 Less 文件，内容如下所示：

@color:red;  // 申明变量.xkd{  @color: blue; // 申明变量  color: @color;   font-size: 28px;  p{    @color:green; // 申明变量    color: @color;  }}.other{  font-size: 24px;  p{    color:@color;  }}

在这个 Less 文件中，咱们在全局、父类选择器、子类选择器中都定义了一个不同值的变量 @c，在应用时，会从最近的地位开始查找，也就是采纳就近准则。

编译成 CSS 代码：

.xkd {  color: blue;  font-size: 28px;}.xkd p {  color: green;}.other {  font-size: 24px;}.other p {  color: red;}

咱们在浏览器中看一下上述代码的演示成果：

能够看到，对于 .xkd 中的 p 选择器，因为这个选择器中定义了一个变量 @color，所以依据就近准则，会间接应用这个变量的值，也就是绿色。

而对于 .other 中的 p 选择器，因为它没有定义变量 @color，它的父选择器也没有定义变量 @color，所以最终会应用全局变量 @color，也就是红色。

链接：https://www.9xkd.com/