类之间的 SASS 变量值

Question

我最近开始使用 SASS 变量来编写更动态、更易于管理的样式。我想知道是否可以将变量的值从一个类传递到另一个类，以防止编写重复的代码。

在下面的示例中，我希望所有按钮在悬停时都有 3% 的亮度。理想情况下，您应该能够在应用于所有按钮的".btn"类上设置它。然后，您只需为每种类型的按钮定义"$btnColor"的值。但是，我看到它没有按预期工作。"$btnColor"变量在 lighten 函数中未定义。

有没有办法实现我正在尝试的事情？我是否需要为每个按钮类悬停时减轻功能？这似乎不是一种浪费吗？这是一个JSFiddle，你可以在其中使用它！提前感谢您的输入。

标记：

<button class="btn btn-default">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-secondary">Button</button>

样式：

.btn {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    &.btn-default {
        /* Set Button Color */
        $btnColor: #192951;
        background: $btnColor;
        border: 1px solid $btnColor;
        color: #fff;
    }
    &.btn-primary {
        /* Set Button Color */
        $btnColor: #006da8;
        background: $btnColor;
        border: 1px solid $btnColor;
    }
    &.btn-secondary {
        /* Set Button Color */
        $btnColor: #5db0d8;
        background: $btnColor;
        border: 1px solid $btnColor;
        color: #fff;
    }
    &:hover {
        background: lighten( $btnColor, 3% );
    }
}

Answer 1

我遇到的范围界定问题的解决方案可以通过使用 mixin 来解决。下面是一个示例。

标记：

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>

样式：

@mixin button($color) {
    background: $color;
    border: 1px solid $color;
    font-weight: bold;
    text-transform: uppercase;
    &:hover {
        background: lighten($color, 5%);
        border: 1px solid $color; 
    }
}
.btn-default {
    @include button(#192951);
    color: #fff;
    &:hover {
        color: #fff; /* Bootstrap override */
    }
}
.btn-primary {
    @include button(#006da8);
}
.btn-secondary {
    @include button(#5db0d8);
    color: #fff;
    &:hover {
        color: #fff; /* Bootstrap override */
    }
}