Question

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

在下面的示例中，我希望所有按钮在悬停时亮3％。理想情况下，你应能够在＆＃34; .btn＆＃34;适用于所有按钮的类。然后你只需要定义＆＃34; $ btnColor＆＃34;的值。对于每种类型的按钮。但是，我发现它没有按预期工作。＆＃34; $ btnColor＆＃34;变量函数中未定义变量。

有没有办法实现我的尝试？对于每个按钮类，我是否需要悬停的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 */
    }
}

类之间的SASS变量值

1 个答案: