如何使sass按鈕修飾符類更通用-有解無憂

我想制作一個btn--outline修飾符類來反轉按鈕。我不可能提出一個解決方案，讓它在沒有手動操作的情況下適用于任何給定的顏色。

如何使 sass 按鈕修飾符類更通用想要的解決方案是第三個按鈕應該有淺綠色的文本和邊框。如果btn--outline被添加到第四個，在這種情況下它應該有鮭魚文本和邊框。

html

    <button class="btn">First button</button>
    <button class="btn btn--secondary">Second button</button>
    <button class="btn btn--secondary btn--outline">Third button</button>
    <button class="btn btn--tertiary">Fourth button</button>

scss

* {
  box-sizing: inherit;
}

body {
  font-size: 62.5%;
  box-sizing: border-box;
}

.btn {
  border: none;
  padding: 1rem 2rem;
  margin: 1rem;
  border-radius: 9px;

  font-size: 1.2rem;
  line-height: 1.2rem;

  color: #333;
  background-color: lightblue;

  &--secondary {
    background-color: lightgreen;
  }

  &--tertiary {
    background-color: salmon;
  }

  &--outline {
    color: currentColor; // How to get color that button had on the background-color property?
    border: 1px solid currentColor;
    background-color: transparent;
  }
}

uj5u.com熱心網友回復：

您可以嘗試使用 SCSS 地圖：

$variants: (
  primary: lightblue,
  secondary: lightgreen,
  tertiary: salmon
);

.btn {
  border: none;
  padding: 1rem 2rem;
  margin: 1rem;
  border-radius: 9px;

  font-size: 1.2rem;
  line-height: 1.2rem;

  color: #333;
  background-color: lightblue;

  @each $variant, $color in $variants {
    &--#{$variant} {
      background-color: $color;
    }
    &--#{$variant}.btn--outline {
      background-color: transparent;
      color: $color;
      border: 1px solid $color;
    }
  }
}

uj5u.com熱心網友回復：

謝謝@adrianmanduc

最后在您的解決方案的幫助下，我想出了這個：

Codepen.io 解決方案

$primary-color: lightblue;
$secondary-color: lightgreen;
$tertiary-color: salmon;

@mixin invert-button($col) {
  background-color: transparent;
  color: $col;
  border: 1px solid $col;
}

$button-variants: (
  secondary: $secondary-color,
  tertiary: $tertiary-color
);

.btn {
  border: none;
  padding: 1rem 2rem;
  margin: 1rem;
  border-radius: 9px;

  font-size: 1.2rem;
  line-height: 1.2rem;

  color: white;
  background-color: $primary-color;

  &--outline {
    @include invert-button($primary-color);
  }

  @each $variant, $color in $button-variants {
    &--#{$variant} {
      background-color: $color;
    }
    &--#{$variant}.btn--outline {
      @include invert-button($color);
    }
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375071.html

標籤：html css 蠢货

上一篇：如何在Laravel微風中的tailwind-css中水平對齊影像

下一篇：與父DIV的混合模式