Less 混入命名空间指将一系列通用属性 class 放到一个命名空间中,这样便于维护和管理,同时也可以减少与其他库中混入的冲突。
如果你想在更复杂的选择器中混合属性,你可以堆叠多个 id 或类。例子:
#outer() {
.inner {
color: red;
}
}
.c {
#outer.inner();
}注意: 旧版的 Less 语法允许 > 和名称空间与混入之间的空格。但是,此语法已弃用,可能会被删除。
#outer > .inner(); // 已弃用,不推荐 #outer .inner(); // 已弃用,不推荐 #outer.inner(); // 推荐
像上面这样命名你的混入可以减少与其他库混入或用户混入的冲突,但也可以成为 "organize" 组混入的一种方式。例子:
/* demo1 */
#my-library {
.my-mixin() {
color: black;
}
.my-mixin2() {
background: red;
}
}
// 可以这样使用
.class {
#my-library.my-mixin();
}编译 less,输出的 CSS 如下:
.class {
color: black;
}如果一个命名空间有一个守卫,只有当守卫条件返回真时,它定义的混合才会被使用。名称空间守卫的评估与混合上的守卫完全相同,因此以下两个混合的工作方式相同:
#namespace when (@mode = huge) {
.mixin() { /* */ }
}
#namespace {
.mixin() when (@mode = huge) { /* */ }
}假定 default 函数对所有嵌套命名空间和混入具有相同的值。下面的 .mixin 永远不会被评估; 它的一名警卫保证是假的:
#sp_1 when (default()) {
#sp_2 when (default()) {
.mixin() when not(default()) { /* */ }
}
}例子:
// 定义一个变量,值为 huge2
@mode: huge2;
#namespace when (@mode = huge1) {
.mixin() {
color: red;
font-size: 20px;
}
}
#namespace when (@mode = huge2) {
.mixin() {
color: blue;
font-size: 18px;
}
}
.class {
// 引用混入,根据 @mode 变量的值选择
#namespace.mixin();
}编译 less,输出的 CSS 如下:
.class {
color: blue;
font-size: 18px;
}混入不仅可以包含属性,还可以包含选择器。例子:
.my-hover-mixin() {
// 注意,& 表示使用下面混入的元素
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}编译 less,输出的 CSS 如下:
button:hover {
border: 1px solid red;
}