Less 命名空间

命名空间是一种将变量、函数和其他标识符封装在一起的机制,以便在一个程序中使用时不会与其他程序中的标识符发生冲突。它可以帮助我们组织和管理代码,避免命名冲突,并提高代码的可读性和可维护性。在不同的编程语言中,命名空间的实现方式可能有所不同。

下面将介绍 Less 中如何声明命名空间以及作用域相关知识。

声明命名空间

有时候,你可能为了更好组织 CSS 或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在 #bundle 中定义一些属性集之后可以重复使用:

// 声明命名空间 #bundle
#bundle {
   .button () {
       display: block;
       border: 1px solid black;
       background-color: grey;

       &:hover {
           background-color: white
       }
   }

   .tab {
       // ...
   }

   .citation {
       //...
   }
}

你只需要在 #header a中像这样引入 .button:

#header a {
   color: orange;
   // 引用命名空间下的 .button 混入
   #bundle>.button;
}

编译 less,输出的 CSS 如下:

#header a {
 color: orange;
 display: block;
 border: 1px solid black;
 background-color: grey;
}
#header a:hover {
 background-color: white;
}

作用域

LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混入模块,如果没找到的话会去父级作用域中查找,直到找到为止。例如:

@var: red;

#page {
   @var: white;

   #header {
       color: @var; // white
   }
}

#footer {
   color: @var; // red
}

编译 less,输出的 CSS 如下:

#page #header {
 color: white;
}
#footer {
 color: red;
}
说说我的看法
全部评论(
没有评论
关于
本网站专注于 Java、数据库(MySQL、Oracle)、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章,助力技术传播与交流。无论是技术新手渴望入门,还是资深开发者寻求进阶,这里都能为您提供深度见解与实用经验,让复杂编码变得轻松易懂,携手共赴技术提升新高度。如有侵权,请来信告知:hxstrive@outlook.com
公众号