Question

tldr：如何避免重复＆＃34; .well＆＃34;以下示例中的选择器。

我正在使用bootstrap和sass来显示＆＃34; well＆＃34; div具有形状和渐变填充。这可能不是井的正确使用，我欢迎其他建议如何绘制X％阴影的圆形/矩形div（理想情况下X是任何整数。[0,100]）但是，现在，我最感兴趣的是在SASS中是否可以摆脱＆＃34; .well＆＃34;的重复。我尝试使用＆＃34;＆amp;＆＃34;但它也会反转.some_container而且我只想反转立即的.inner_container父项来应用那里（例如.inner_container.round）。 [有一个outer_container和多个inner_containers。每个inner_container都有一口井。]

.outer_container {
  .inner_container {
    &.round .well {
      border-radius: 50%;
    }

    &.barely_filled .well {
      @include gradient-horizontal(sienna, $well-bg, 0%, 25%);
    }

    &.half_filled .well {
      @include gradient-horizontal(sienna, $well-bg, 0%, 50%);
    }

    &.fairly_filled .well {
      @include gradient-horizontal(sienna, $well-bg, 0%, 75%);
    }

    &.mostly_filled .well {
      background-color: sienna;
    }
  }
}

Answer 1

最简洁的写作方式是这样的：

@mixin well($sel) {
  &#{$sel} .well {
    @content;
  }
}

.outer_container {
  .inner_container {
    @include well('.round') {
      border-radius: 50%;
    }

    @include well('.barely_filled') {
      test: 1;
    }

    @include well('.half_filled') {
      test: 2;
    }

    @include well('.fairly_filled') {
      test: 3;
    }

    @include well('.mostly_filled') {
      background-color: sienna;
    }
  }
}

然而，除了更加冗长之外，我觉得这会降低您目前所拥有的可读性。

重构基于直接父类的重复sass进行修改

1 个答案: