Less 混合

最新推荐文章于 2022-10-01 21:41:39 发布

书和咖啡

最新推荐文章于 2022-10-01 21:41:39 发布

阅读量271

点赞数

分类专栏： Less 文章标签： css 编程语言

本文链接：https://blog.csdn.net/ivenqin/article/details/107813724

版权

Less 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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

普通Mixins

我们先来看下面这段 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;
  color: #ccc;
  padding: 10px;
}

这和函数中的调用很像，同一个函数可以被多次调用，同一个样式类也可以被多次引用。

不输出Mixins

上面这个例子中，我们可以看到在编译时， .xkd 和 .good 两个样式类都被编译成了 CSS 代码，但是某些时候有可能这有可能造成重复，所以我们可能不希望 .xkd 样式类本身被编译到 CSS 文件中，这要怎么做呢。

要实现这个目的，我们可以在定义样式类时，在样式类名称后面加上一对小括号 () ，就像定义函数一样，如果不被调用就不会运行。

示例：

同样是上面这段 Less 代码，只不过我们在 .xkd 后面加上了一对小括号：

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

.good{
  .xkd();
  padding: 10px;
}

此时来编译上述代码，输出的 CSS 如下所示：

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

可以看到，.xkd() 中的代码在编译时被忽略，没有被输出。

Mixins中也可以包含选择器

示例：

例如下面这段代码，.banner 样式类中还有一个 .banner-p ，而当我们在 .foot 中引用 .banner 样式类时，会不会同时引用 .banner-p 的样式呢，一起来看一下：

.banner(){
    font-size: 16px;
    .banner-p{
        color: #ffeeee;
    }
}

.foot{
    .banner();
}

编译成 CSS 代码：

.foot {
  font-size: 16px;
}
.foot .banner-p {
  color: #ffeeee;
}

从这段编译后的 CSS 代码中我们可以看出，引用一个 Mixins 的同时也会复用其中的属性和选择器。

Mixins 命名空间

Less 中也有命名空间的概念，命名空间用于在通用名称下对 Mixins 进行分组，使用命名空间可以避免名称冲突，并从外部封装 Mixins 组。

示例：

例如可以将类选择器或者ID选择器作为一个命名空间，然后将 Mixins 放在命名空间中，这样可以避免与引入的其他文件造成冲突，例如：

.name_space{ 
  .xkd{
    font-size: 12px;
  }
}
.good{
  .name_space > .xkd();  // 引用
}

编译成 CSS 代码：

.name_space .xkd {
  font-size: 12px;
}
.good {
  font-size: 12px;
}

我们在引用命名空间内的样式时，除了上面这种写法，使用下面几种写法也是一样的效果：

.name_space > .xkd();
.name_space.xkd;
.name_space.xkd();
.name_space .xkd;
.name_space .xkd();

!important关键字

!important 关键字用于覆盖特定属性。如果我们在 Mixins 引用后面加上 !important 关键字，则会将 Mixins 中的所有属性标记为 !important 。

示例：

HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Less学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./index.css">
    </head>
    <body>
        <h1>欢迎来到侠课岛！</h1>
    </body>
</html>

创建一个 Less 文件，内容如下，将混合使用 !important 关键字标记：

.mixin(){
  color: red;
}
h1{
  color: #ccc;
  .mixin() !important;
}

编译成 CSS 代码：

h1 {
  color: #ccc;
  color: red !important;
}

会优先应用使用 !important 关键字标记的属性，在浏览器中演示效果：

总结

本节我们主要学习 Less 中的 Mixins，Mixins 的使用其实很简单。我们需要注意的是，如果 Mixins 名称后面不加小括号，则会编译到 CSS 中。如果加上小括号，则不会被编译。

在引用 Mixins 时，加不加小括号都可以，但是推荐最好加上小括号，这是为了区分代码，避免混淆。

点击可以查看更多：https://www.9xkd.com/

书和咖啡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Less 混合

本节我们学习 Less 中的混合（Mixin），混合是一种将一组属性从一个规则集包含或混入到另一个规则集的方法。简单一点来说，其实混合就有点类似编程语言中的函数，通过这种方式，可以在代码中实现复用。如果还不懂，下面我们通过实际例子来看一下混合的使用。普通Mixins我们先来看下面这段 Less 代码：.xkd{ font-size: 14px; color: #ccc;}.good{ font-size: 14px; color: #ccc; padding: 10px;}
复制链接

扫一扫