变量范围指定可用变量的位置。 变量将从本地作用域搜索，如果它们不可用，则编译器将从父作用域搜索。
这就好比js里面的原型链一般，使用某一个方法，先在该对象上面寻找，如果找不到，顺着原型链往上找，指导原型链的顶端找不到为止。而这里只是向父级作用域寻找，没说会一直寻找下去。
两个观点：
- 变量先从本地搜索
- 本地没有再从父级作用域搜索
下面的例子只是为了演示用，一般情况，提前把变量定义好，不要在内部定义，不然容易造成代码混乱。
示例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="./index.less" />
<script src="../../less.min.js" ></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</div>
</div>
</body>
</html>
index.less
@fontSize: @f;
@f: 20px;
@fontColor: red;
.container {
font-size: @fontSize; // 10px
@f: 10px;
@fontColor: blue;
color: @fontColor; // blue
}
网友评论