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