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