0

编辑：

我只是想多了。现在我像这样向 mixin 添加了更多变量以使所有颜色正确：

@mixin CustomBtn($border-color, $transparent: transparent, $text-color, $bg-hover-color, $text-hover-color)

我有一个 WordPress 页面，我在其中使用 SCSS 混合来简化按钮上不同颜色的使用。大多数按钮都具有相同的边框颜色和带有透明背景的文本颜色，所以我创建了这个 mixin 来处理这个问题：

@mixin CustomBtn($primary-color, $text-hover-color, $transparent: transparent) {
 border: 2px solid $primary-color;
 border-radius: 2px;
 background-color: $transparent;
 background-image: none;
 color: $pri-color;
 font-weight: 600;
 padding: 1rem 2rem 1rem 1.5rem;

 &:hover {
   background-color: $primary-color;
   color: $text-hover-color;
 }
}

这是我输出它的css：

.btn_custom {

 &-black a {
  @include CustomBtn($black, $white);
 }

 &-white a {
  @include CustomBtn($white, $black);
 }

 &-blue a {
  @include CustomBtn($light-blue, $white, $light-blue);
 }

 &-negative a {
  @include CustomBtn($brown, $white);
 }
}

这一切都很好，但现在客户想要一个使用彩色背景的按钮，例如。带有蓝色背景颜色和白色文本的按钮。我想以最好的方式做这个混入，而不是重复我的代码，但我似乎无法弄清楚如何让这个混入以我想要的方式与彩色背景一起工作（也许我正在这样做错了……）

我应该对$transparent变量使用条件语句吗？

4

0 回答 0