Less – Mixin(混合)

Mixin是一组共用的CSS属性,类似编程语言中的函数,选择器通过调用Mixin,把Mixin中的属性包含进来。

Less代码:

.round-borders {  
  border-radius: 5px;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
}  
#menu {  
  color: gray;  
  .round-borders;  // 调用mixin: round-borders
} 

编译后的css 输出:

.round-borders {  
  border-radius: 5px;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
}  
#menu {  
  color: gray;  
  border-radius: 5px;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
}  

Mixin使用

1. 不输出Mixin本身

Mixin定义带括号,可以让mixin定义本身不输出。

Less代码:

.a() { // 定义带了括号
   padding-left: 100px;
}

.myclass {
   background : #64d9c0;
   .a;
}

编译后的css 输出:

/* 没有输出mixin .a() 的内容 */
.myclass {
   background: #64d9c0;
   padding-left: 100px;
} 

2. Mixin中的选择器

mixin不仅可以包含属性,还可以包含选择器。

Less代码:

.mixin() {
   &:hover {
      background: #FFC0CB;
   }
}

a {
   .mixin();
}

编译后的css 输出:

a:hover {
   background: #FFC0CB;
}

调用mixin时,括号是可选的。在上面的例子中,调用.mixin()与调用.mixin效果相同。

3. 命名空间

命名空间可以将mixin组合到一个公共名称下,这样可避免mixin之间名字冲突。

Less代码:

#outer() {
   background:yellow;
   .inner {
      color: red;
   }
}

p {
   #outer > .inner;
}

编译后的css 输出:

p {
   color: red;
}

4. 受保护的命名空间

当保护应用于命名空间时,只有在保护条件返回true时才使用命名空间定义的mixin。命名空间保护类似于mixin的保护。

Less代码:

@import "https://www.qikegu.com/less/lib.less";
#namespace when (@color = blue) {
   .mixin() {
      color: red;
   }
}

p {
   #namespace .mixin();
}

lib.less

@color: blue;

编译后的css 输出:

p {
   color: red;
}

5. !important 关键字

important关键字用于覆盖特定的属性。当它被放置在mixin调用之后,它将所有继承的属性都标记为!important。

Less代码:

.mixin() {
   color: #900;
   background: #F7BE81;
}

.para1 {
   .mixin();
}

.para2 {
   .mixin() !important;
}

编译后的css 输出:

.para1 {
   color: #900;
   background: #F7BE81;
}

.para2 {
   color: #900 !important;
   background: #F7BE81 !important;
}


浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载