乐趣区

关于前端:Less-混合

jiezi

本节咱们学习 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/

退出移动版