Question

我正在使用bootstrap-sass并希望实现以下目标：

$custom-brown: #8B4513;

$link-color: orange;
$link-hover-color: darken($link-color, 15%);
$nav-link-hover-bg: darken($custom-brown, 10%);

.myCustomClass {
    $link-color: green;
    $link-hover-color: darken($link-color, 15%);
    $nav-link-hover-bg: darken($custom-brown, 10%);
}

@import "../bootstrap-sass/assets/stylesheets/bootstrap";

目标是根据父类具有不同的颜色外观。我们怎么做呢？

Answer 1

我能想到的唯一选择就是使用@mixin，就像这样：https://jsfiddle.net/2zdj4h8z/1/

<强> SCSS

$custom-brown: #8B4513;
$link-color: orange;
$custom-link-color: limegreen;

@mixin colorize($base) {
    color: $base;
    &:hover {
        color: darken($base, 15%);
        background: darken($custom-brown, 10%);
    }
}

a {
    @include colorize($link-color);
    .myCustomClass > & {
        @include colorize($custom-link-color);
    }
}

Answer 2

由于现在有一些级别的变量范围，你可以尝试类似的东西：

$custom-brown: #8B4513;

$link-color: orange;
$link-hover-color: darken($link-color, 15%);
$nav-link-hover-bg: darken($custom-brown, 10%);
@import "../bootstrap-sass/assets/stylesheets/bootstrap";

.myCustomClass {
  $link-color: green;
  $link-hover-color: darken($link-color, 15%);
  $nav-link-hover-bg: darken($custom-brown, 10%);
  @import "../bootstrap-sass/assets/stylesheets/bootstrap/type";
}

Bootstrap Sass / Less，覆盖变量的灵活性

2 个答案: