什么是作用域? 作用域其实可以理解为可以被访问的区域。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
,也就是红色。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。