在 Sass 中使用 Mixin

如果您正在深入研究前端开发世界，那么您很可能遇到过sass（语法很棒的样式表）。 sass 是一个强大的 css 预处理器，它通过提供变量、嵌套、函数和 mixins 等功能来增强您的 css 工作流程。在这些功能中，mixins 作为游戏规则改变者脱颖而出，允许您有效地重用代码并保持样式表的一致性。

闪念贝壳

闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。

下载

sass 中的 mixins 是什么？

mixin 是一个可重用的样式块，可以定义一次并包含在任何需要的地方。这消除了重写重复代码的需要，减少了冗余，并使样式表更易于维护。此外，mixins 可以接受参数，使它们对于动态样式更加强大。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(10px);
}

代码重用和参数化样式来救援。以下是使用 mixin 的一些主要好处：

1. 避免重复代码：无需在多个选择器之间复制粘贴相同的 css。
2. 动态样式： mixins 可以接受参数，允许您自定义它们的行为。
3. 一致性：确保您的样式在整个代码库中保持一致。
4. 易于维护：如果某个样式需要更新，只需在 mixin 中更改即可，并且它适用于所有地方。

@mixin box-shadow($x, $y, $blur, $color) {
  -webkit-box-shadow: $x $y $blur $color;
  -moz-box-shadow: $x $y $blur $color;
  box-shadow: $x $y $blur $color;
}

四个参数：水平和垂直偏移、模糊半径和阴影颜色。现在，让我们在 css 类中使用它：

.card {
  @include box-shadow(2px, 4px, 8px, rgba(0, 0, 0, 0.3));
}

.card {
  -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
}

默认值。这样，您就可以使用 mixin，而不必总是传递每个参数。

@mixin transition($property: all, $duration: 0.3s, $timing-function: ease) {
  transition: $property $duration $timing-function;
}

.button {
  @include transition;
}

.button {
  transition: all 0.3s ease;
}

.link {
  @include transition(opacity, 0.5s, linear);
}

将 mixins 嵌套在其他 mixins 中，使您的代码更加模块化。

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin button-styles($bg-color) {
  background-color: $bg-color;
  padding: 10px 20px;
  border: none;
  color: white;
  cursor: pointer;
  @include flex-center;
}

.primary-button {
  @include button-styles(blue);
}

.secondary-button {
  @include button-styles(green);
}

条件逻辑，使它们更加通用。

@mixin responsive-font-size($size) {
  @if $size == small {
    font-size: 12px;
  } @else if $size == medium {
    font-size: 16px;
  } @else if $size == large {
    font-size: 20px;
  } @else {
    font-size: 14px; // default size
  }
}

.text-small {
  @include responsive-font-size(small);
}

.text-large {
  @include responsive-font-size(large);
}

函数，它与 mixin 一样，允许您封装逻辑。那么，什么时候应该使用 mixin 和函数呢？

• mixins：当您需要生成多个 css 声明或应用一组规则时使用。
• 函数：当您需要返回单个值（例如颜色或计算）时使用。

@function darken-color($color, $percentage) {
  @return darken($color, $percentage);
}

$primary-color: darken-color(#3498db, 10%);

1. 主题：使用按钮、卡片和排版混合创建一致的设计语言。
2. 媒体查询：将媒体查询定义为mixin，以使您的css更具可读性和可维护性。
3. 供应商前缀：抽象复杂的供应商前缀属性，例如过渡、动画和渐变。
4. 实用程序类：使用 mixin 定义通用实用程序（例如，flexbox 或网格布局）以便跨组件重用。