Правильный способ отформатировать пользовательскую кнопку mixin в scss - PullRequest
Новая
       6

Правильный способ отформатировать пользовательскую кнопку mixin в scss

0 голосов
/ 05 декабря 2018

РЕДАКТИРОВАТЬ:

Я просто переосмыслил это.Теперь я добавил еще несколько переменных в миксин, чтобы все цвета были правильными: 

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

У меня есть страница WordPress, где я использую миксины SCSS для упрощения использования разных цветов.на кнопках.Большинство кнопок имеют одинаковый цвет рамки и цвет текста с прозрачным фоном на всех них, поэтому я создал этот миксин, чтобы справиться с этим: 

@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?

...