返回

Less语言特性 - 变量范围

发布时间:2022-09-19 15:24:51 320
# 前端# css# html# less# edge

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

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

两个观点:

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

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

示例

 

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)
按点赞数排序
用户头像
精选文章
thumb 中国研究员首次曝光美国国安局顶级后门—“方程式组织”
thumb 俄乌线上战争,网络攻击弥漫着数字硝烟
thumb 从网络安全角度了解俄罗斯入侵乌克兰的相关事件时间线
下一篇
小小面试官-6-2021.6.9 2022-09-19 14:51:33