LESS 中 Mixins 有什么用？-css教程-PHP中文网

LESS 中 Mixins 有什么用？

王林

发布： 2023-09-03 20:45:02

转载

1183人浏览过

less 中 mixins 有什么用？

总而言之，mixin 提供了一种对一组 CSS 属性进行分组并在样式表中的不同规则集中重用它们的方法。当我们在规则集中包含 mixin 时，mixin 中定义的所有 CSS 属性都会添加到包含 mixin 的规则集中。

通过定义 mixin，开发人员可以将相关样式分组在一起并将它们应用到多个选择器，从而更轻松地在网站或应用程序中保持一致的样式。

让我们通过下面的例子来理解它。这样您就可以获得有关 Mixins 的更多信息。

语法

用户可以按照以下语法在 LESS 中使用 mixin。

.mixin-name {
} 
.selector {
   .mixin-name();
}

登录后复制

在上面的语法中，“.mixin-name”是 mixin 的名称，我们可以定义要包含在块内的任何 CSS 属性。

“.selector”是我们想要包含 mixin 的选择器，我们通过调用其名称后跟 () 来包含 mixin。

Mixin的特点

Mixins 是 LESS 的一项强大功能，为开发人员提供了多种好处 -

带括号的混合

我们还可以将参数传递给 mixin 来自定义它们的行为 -

.mixin-name(@arg1, @arg2) {
   /* CSS properties using @arg1 and @arg2 */
} 
.selector {
   .mixin-name(value1, value2);
}

登录后复制

嵌套混合

嵌套 mixins 允许我们在其他 mixins 中使用 mixins。这可以帮助我们的代码保持井然有序且更加模块化。

这是 LESS 中嵌套 mixin 的示例 -

// Define a mixin for setting font properties
.font-properties(@size: 14px, @weight: normal, @style: normal, @line-height: 1.5) {
   font-size: @size;
   font-weight: @weight;
   font-style: @style;
   line-height: @line-height;
} 
// Define a mixin for setting text properties
.text-properties(@color: #333, @align: left, @decoration: none) {
   color: @color;
   text-align: @align;
   text-decoration: @decoration;  
   // Use the .font-properties mixin to set font properties within the .text-properties mixin
   .font-properties();
} 
// Use the .text-properties mixin within the h1 selector
h1 {
   .text-properties(@color: red, @size: 24px);
}

登录后复制

Mixin 中的选择器

LESS 中的 Mixin 允许开发人员在规则集中不仅包含属性，还包含选择器。这是一个例子 -

.hover-effect() { 
   &:hover {
      background-color: #f7f7f7; color: #333; 
   } 
}
.btn {
   .hover-effect(); 
   background-color: #333; 
   color: #fff; 
}

登录后复制

示例 1

在此示例中，“.bordered”mixin 定义了元素的一组边框样式。然后，我们将此 mixin 包含在其他选择器中，例如 #menu a 和 .post a，以将这些边框样式也应用到这些元素。

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

查看详情

在输出中，用户可以在结果中看到 #menu a 和 .post a 具有在 .bordered mixin 中定义的相同边框样式，以及在这些选择器中定义的任何其他样式。

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

登录后复制

输出

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

登录后复制

示例 2

在下面的示例中，我们定义了一个名为 .box-shadow 的 mixin，其中包含一组盒子阴影的属性。这个mixin有四个参数：@x、@y、@blur和@color，它们使我们能够自定义盒子阴影的属性，例如x和y偏移、模糊半径和颜色。

之后，我们通过调用它并传递参数值来在其他选择器中使用 .box-shadow mixin。我们在两个不同的选择器 .button 和 .card 中使用了 .box-shadow mixin。在 .button 选择器中，我们为所有四个参数传递了特定值。相反，在 .card 选择器中，我们仅传递前三个参数的值，并为 @color 参数使用默认值 #000。

在输出中，用户可以看到 .button 和 .card 选择器都有一个具有不同属性的框阴影。

.box-shadow (@x: 0, @y: 0, @blur: 5px, @color: #000) {
   -webkit-box-shadow: @x @y @blur @color;
   -moz-box-shadow: @x @y @blur @color;
   box-shadow: @x @y @blur @color;
}
.button {
   background-color: #fff;
   .box-shadow(2px, 2px, 10px, #ccc);
} 
.card {
   background-color: #f5f5f5;
   .box-shadow(4px, 4px, 20px);
}

登录后复制

输出

.button {
   background-color: #fff;
   -webkit-box-shadow: 2px 2px 10px #ccc;
   -moz-box-shadow: 2px 2px 10px #ccc;
   box-shadow: 2px 2px 10px #ccc;
} 
.card {
   background-color: #f5f5f5;
   -webkit-box-shadow: 4px 4px 20px #000;
   -moz-box-shadow: 4px 4px 20px #000;
   box-shadow: 4px 4px 20px #000;
}

登录后复制

示例 3

在此示例中，我们演示了 id 选择器与 mixins 的用法。我们定义了一个名为 #primary_button() 的 mixin，它设置一些基本的按钮样式，包括悬停状态。然后我们在两个不同的选择器中使用这个 mixin：.button 和 .nav-link。这些选择器将具有相同的按钮样式，包括悬停状态。

#primary_button mixin 定义了按钮元素的一组属性，包括背景颜色、字体颜色、边框和填充。它还包括一个悬停状态，当按钮悬停在上方时，该状态会更改背景和字体颜色。

用户可以在输出中注意到 .button 和 .nav-link 选择器具有相同的按钮样式，包括悬停状态，因为它们使用 #primary_button mixin。

#primary_button() {
   background-color: blue;
   color: white;
   border: none;
   padding: 10px 20px;
   &:hover {
      background-color: white;
      color: blue;
   }
} 
.button {
   #primary_button();
} 
.nav-link {
   #primary_button();
   text-decoration: none;
}

登录后复制

输出

.button {
   background-color: blue;
   color: white;
   border: none;
   padding: 10px 20px;
}
.button:hover {
   background-color: white;
   color: blue;
} 
.nav-link {
   background-color: blue;
   color: white;
   border: none;
   padding: 10px 20px;
   text-decoration: none;
}
.nav-link:hover {
   background-color: white;
   color: blue;
}

登录后复制

用户学习了如何定义 mixin 以及如何通过将它们包含在不同的选择器中并传递参数来自定义其属性来使用它们。

提供的示例演示了如何使用 mixins 将边框样式、框阴影和按钮样式应用于不同的选择器，并展示了如何将 mixins 与 id 选择器结合使用以将相同的按钮样式应用于不同的选择器。

通过理解所提供的示例，用户可以在其项目中应用 mixin，并从其灵活性和可重用性中受益。

以上就是LESS 中 Mixins 有什么用？的详细内容，更多请关注php中文网其它相关文章！