📌  相关文章
📜  LESS的Mixins

📅  最后修改于: 2021-01-06 04:41:11             🧑  作者: Mango

更少的混合

Mixin是CSS属性的集合，它可以帮助您将一个规则集中的一堆属性添加到另一个规则集中，并包括类名作为其属性。这些类似于编程语言中的功能。在Less中，可以使用类或id选择器以与CSS样式相同的方式声明mixins。它可以存储多个值，并在必要时可以在代码中重用。

Mixin语法：

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

混合输出：

.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

Index Mixin Explanation
1) Not Outputting the Mixin You can make a Mixin disappear in the output by simply placing the parentheses after it.
2) Selectors in Mixins The mixins can contain properties as well as selectors.
3) Namespaces Namespaces are used to group the mixins under common name.
4) Guarded Namespaces If the applied guard?s condition to namespace returns true then the mixins defined by it are used.
5) The !important keyword the !important keyword is used to override the particular property.

让我们以一个示例来演示在Less文件中使用mixins。

创建一个名为“ simple.html”的HTML文件，其中包含以下数据。

HTML档案：simple.html




  
  Less Mixin Example



Welcome to JavaTpoint


MAIN BENEFITS YOU GET FROM OUR COMPANY :


 Life Time Validity.


Training by Java Professionals.


Small Batches to focus on each student.

现在创建一个名为“ simple.less”的文件。它类似于CSS文件。唯一的区别是它以“ .less”扩展名保存。

更少的文件：simple.less

.p1{
  color:brown;
}
.p2{
  background : lightgreen;
  .p1();
}
.p3{
   background : lightgrey;
  .p1;
}

将文件“ simple.html”和“ simple.less”都放在Node.js的根文件夹中

现在，执行以下代码：lessc simple.less simple.css

这将编译“ simple.less”文件。将生成一个名为“ simple.css”的CSS文件。

例如：

这将编译“ simple.less”文件。将生成一个名为“ simple.css”的CSS文件。

例如：

生成的CSS“ simple.css”具有以下代码：

.p1 {
  color: brown;
}
.p2 {
  background: lightgreen;
  color: brown;
}
.p3 {
  background: lightgrey;
  color: brown;
}

输出：