• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Less 作用域

互联网 diligentman 5天前 12次浏览

本节我们学习 Less 中的作用域,作用域其实可以理解为可以被访问的区域。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;
}

我们在浏览器中看一下上述代码的演示效果:

Less 作用域

可以看到,对于 .xkd 中的 p 选择器,因为这个选择器中定义了一个变量 @color,所以根据就近原则,会直接使用这个变量的值,也就是绿色。

而对于 .other 中的 p 选择器,因为它没有定义变量 @color,它的父选择器也没有定义变量 @color,所以最终会使用全局变量 @color,也就是红色。

链接:https://www.9xkd.com/


程序员灯塔
转载请注明原文链接:https://www.wangt.cc/2020/10/less-%e4%bd%9c%e7%94%a8%e5%9f%9f/
喜欢 (0)