Question

编辑：

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

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

我有一个WordPress页面，我在其中使用SCSS mixins来简化按钮上不同颜色的使用。大多数按钮具有相同的边框颜色和带有透明背景的文本颜色，因此我创建了这个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变量使用条件语句吗？

在CSS中格式化自定义混合按钮的正确方法

0 个答案: