Less 开发中的混合(Mixins) -1

2022-08-17 0 By admin

混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。
注意:规则集也是我们平时常说的选择器。

一、混入类选择器和 id 选择器

.a, #b {              =>          .a, #b {
  color: red;         =>             color: red;
}                     =>           }
.mixin-class {        =>           .mixin-class {
  .a();               =>             color: red;
}                     =>           }
.mixin-id {           =>           .mixin-id {
  #b();               =>             color: red;
}                     =>           }

现在和过去的版本,混合后面的括号是可选的,但是可选的括号将在未来的版本中将变成必须的,即提议混合后面加括号。
.a();
.a; // currently works, but deprecated; don’t use

二、编译后不输出规则集

如果你想要创建一个规则集但是不想要在 CSS 编译中出现你定义的规则集,你可以在定义规则集的后面加一个括号。

.my-mixin {                    => .my-mixin {
  color: black;                =>   color: black;
}                              => }
.my-other-mixin() {            => .class {
  background: white;           =>   color: black;
}                              =>   background: white;
.class {                       => }
  .my-mixin();                 => 
  .my-other-mixin();           => 
}                              => 

三、混合不只能包含属性,还能包含选择器

.my-hover-mixin() {              => button:hover {
  &:hover {                      =>   border: 1px solid red;
    border: 1px solid red;       => }
  }                              => 
}                                => 
button {                         => 
  .my-hover-mixin();             => 
}

四、复杂的选择器混合

如果你想要在更加复杂的选择器中混合属性,你可以累积多个 id 和类。

#outer() {                      =>   .c {
  .inner {                      =>     color: red;
    color: red;                 =>   }
  }                             =>  
}                               =>  
.c {                            =>  
  #outer > .inner();            =>  
}

> 和空格都是可选的。

// all do the same thing
#outer > .inner();
#outer .inner();
#outer.inner();

命名空间可以减少与其他库和用户的Mixins的冲突,但是它也是一个 origanize 组的 Mixins 的方式。

#my-library {
  .my-mixin() {
    color: black;
  }
}
// which can be used like this
.class {
  #my-library.my-mixin();
}

五、受保护的命名空间

如果一个命名空间受保护,它里面定义的 mixins 只在保护条件返回 true 时才会被使用。命名空间守卫和 mixins 守卫完全相同,因此下面两个 mixins 完全相同。

#namespace when (@mode = huge) {
  .mixin() { /* */ }
}
#namespace {
  .mixin() when (@mode = huge) { /* */ }
}

对于所有嵌套的命名空间和 mixin,default 函数都假定具有相同的值。在 mixin 之后永远不会求值,它的一个守卫肯定是 false。

#sp_1 when (default()) {
  #sp_2 when (default()) {
    .mixin() when not(default()) { /* */ }
  }
}

六、!important 关键字

使用 !important 关键字在 mixin 调用后,为了去标记 mixin 中的所有属性继承通过 !important。

.foo (@bg: #f5f5f5, @color: #900) {    => .unimportant {
  background: @bg;                     =>   background: #f5f5f5;
  color: @color;                       =>   color: #900;
}                                      => }
.unimportant {                         => .important {
  .foo();                              =>   background: #f5f5f5 !important;
}                                      =>   color: #900 !important;
.important {                           => }
  .foo() !important;                   => 
}                                      =>