天天看点

Less语言特性 - 变量范围

变量范围指定可用变量的位置。 变量将从本地作用域搜索,如果它们不可用,则编译器将从父作用域搜索。

这就好比js里面的原型链一般,使用某一个方法,先在该对象上面寻找,如果找不到,顺着原型链往上找,指导原型链的顶端找不到为止。而这里只是向父级作用域寻找,没说会一直寻找下去。

两个观点:

  • 变量先从本地搜索
  • 本地没有再从父级作用域搜索

下面的例子只是为了演示用,一般情况,提前把变量定义好,不要在内部定义,不然容易造成代码混乱。

示例

Less语言特性 - 变量范围
<!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>      
@fontSize: @f;
@f: 20px;

@fontColor: red;

.container {
    font-size: @fontSize; // 10px
    @f: 10px;

    @fontColor: blue;
    color: @fontColor; // blue

}      

继续阅读