Less的混合

最新推荐文章于 2022-11-17 16:21:08 发布

大前小白

最新推荐文章于 2022-11-17 16:21:08 发布

阅读量528

点赞数

分类专栏： Less 文章标签： css less

本文链接：https://blog.csdn.net/weixin_45195200/article/details/109285686

版权

本文详细介绍了Less中的Mixins功能，包括普通Mixins、不输出Mixins、包含选择器的Mixins、命名空间及！important关键字的使用。通过实例展示了如何利用Mixins实现CSS代码复用，减少重复，并探讨了Mixins编译时的选择性输出以及在命名空间中的组织方式。

摘要由CSDN通过智能技术生成

混合是一种将一组属性从一个规则集包含或混入到另一个规则集的方法。简单一点来说，其实混合就有点类似编程语言中的函数，通过这种方式，可以在代码中实现复用。如果还不懂，下面我们通过实际例子来看一下混合的使用。

我们先来看下面这段 Less 代码：

.xkd{
  font-size: 14px;
  color: #ccc;
}

.good{
  font-size: 14px;
  color: #ccc;
  padding: 10px;
}

可以很明显的看到，.xkd 样式类中的代码，.good 样式类中也有，这里是只有两个样式类，如果有很多个选择器时，是不是就会造成很多重复的代码，那么可不可以解决这个问题呢？

混合 Mixin 就可以帮助我们来解决这个问题，实现代码的复用。使用起来也很简单，只需要在 .good 中引用 .xkd 即可：

.xkd {
  font-size: 14px;
  color: #ccc;
}
.good {
  .xkd;
  padding: 10px;
}

然后我们执行 lessc 命令，将这段 Less 代码编译成 CSS 代码：

.con {
   
  font-size: 14px;
  color: #ccc;
}
.bot {
   
  font-size: 14px;
  color: #ccc;
  padding: 10px;
}

这个是不是很方便，并且一般为了区分代码，我们会在被引用的样式类后面要加一个小括号 ()，例如：

.xkd {
  font-size: 14px;
  color: #ccc;
}
.good {
  font-size: 14px;
  c

关注

专栏目录