Less简明教程
2.2.1 什么是Mixin
阅读(

Less 基础

Less 特性

变量

Mixin

什么是Mixin

Less中,允许你将一个类嵌入到另一个类中,被嵌入的类也可以看作变量。换句话说,你可以用一个类定义样式,然后把它当作变量,在另一个类中,只要引用变量的名字,就能使用它的所有属性,

Less把这种特性称作 mixin,中文把翻译为“混入”或“混合”,其目的就是从现有的样式中添加属性。请看以下Less代码:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

上述代码中,.bordered 定义了一个属性集。然后,在任何需要使用 .bordered 属性集的选择器中,只需像下面这样调用就可以了:

#menu a {
  color: #111;
  .bordered;
}
.post  a {
  color: red;
  .bordered;
}

这样一来,.bordered中定义的属性集,就会在 #menu a 和 .post a 中体现出来。编译后的CSS代码为:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post  a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

从上面的代码可以看出:mixin 其实就是一种嵌套,简单的讲,mixin 就是规则级别的复用。除了类选择器外,你也可以使用 id 选择器来定义 mixin。如:

#bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  #bordered;
}

编译后的CSS代码为:

#bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

从上面的代码可以看出,使用 class、id 定义mixin 时,mixin的定义会被原封不动的输出到编译生成的CSS代码中。

如果希望编译生成的CSS代码中不包含mixin的定义,在定义 mixin时,只需在 class、id 的后面添加一对小括号即可。而在调用时,小括号是可选的。如:

#x() {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  #x;
}

编译后的CSS代码为:

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验