Less语言特性 - 变量范围-CFANZ编程社区

Less语言特性 - 变量范围

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

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

两个观点：

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

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

示例

Less语言特性 - 变量范围_less

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

}

0 条评论