Less 混入命名空间

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;
}
说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号