如何利用 Sass Mixin 与占位符实现代码复用？

使用 mixin 与占位符

sass 中的 mixin 方便编写可重复使用的代码块，然而却会造成重复。而 %placeholder 虽然不能传参，却可以帮助避免代码重复。因此，我们可以将 mixin 与占位符结合使用，既能传参又能避免代码重复。

具体做法如下：

1. 定义一个占位符 %my-placeholder，并在其中定义通用样式。
2. 再创建 mixin mymixin，将占位符 @extend 进 mixin 中。
3. 在 mixin 中，根据传入的参数应用特定的样式。
4. 最后，在不同的类中 @include mixin，传入不同的参数，实现特定样式。

代码示例：

%my-placeholder {
  /* 在这里定义通用样式 */
}

@mixin myMixin($param1, $param2) {
  @extend %my-placeholder;

  /* 根据传入的参数应用特定样式 */
  property: value;
}

.myClass {
  @include myMixin($value1, $value2);
}

.anotherClass {
  @include myMixin($differentValue1, $differentValue2);
}

登录后复制

以上就是如何利用 Sass Mixin 与占位符实现代码复用？的详细内容，更多请关注米云其它相关文章！