Question

我有以下scss代码。

  @if $position == bottom {
    &:after {
      height: $triangle-width;
      width: $triangle-width;
      content:"";
      position:absolute;
      margin-top: -$triangle-width/2 -$stroke-width;
    }
  }

  @if $position == top {
    &:before {
      height: $triangle-width;
      width: $triangle-width;
      content:"";
      position:absolute;
      margin-bottom: -$triangle-width/2 -$stroke-width;
    }
  }

如您所见，有些代码是重复的。我想知道是否有办法让它干涸。我试着把它放到一个自己的班级，但似乎并没有以某种方式工作。有任何想法吗？我可以在混合中制作混音，但在我看来，这看起来太多了。你觉得怎么样？

Answer 1

通常，制作DRY的最佳方法是将常用部分分解为mixins并将其构建为更大的mixin。这正是Compass和大多数其他框架如何做到这一点的原因。例如，请参阅Compass list mixins。

@mixin base-triangle($triangle-width) {
  height: $triangle-width;
  width: $triangle-width;
  content:"";
  position:absolute;
}

@mixin triangle($position, $triangle-width: 4, $stroke-width: 4) {
  @if $position == bottom {
    &:after {
      @include base-triangle($triangle-width);
      margin-top: -$triangle-width/2 -$stroke-width;
    }
  }

  @if $position == top {
    &:before {
      @include base-triangle($triangle-width);
      margin-bottom: -$triangle-width/2 -$stroke-width;
    }
  }
}

.foo {
  @include triangle("top", 8px, 8px);
}

.bar {
  @include triangle("bottom");
}

编译为：

.foo:before {
  height: 8px;
  width: 8px;
  content: "";
  position: absolute;
  margin-bottom: -12px;
}

.bar:after {
  height: 4;
  width: 4;
  content: "";
  position: absolute;
  margin-top: -6;
}

Answer 2

使用这种mixin的最佳方法是将:before或:after从mixin中删除，然后直接在伪类中使用mixin。这样可以清除mixin，并删除与if / else逻辑的任何联系。

Mixin示例：

@mixin yourMixinName($position, $size, $stroke) {
    position: absolute;
    width: $size;
    height: $size;
    margin-#{$position}: -($size / 2) - $stroke;
    content: '';
}

用法示例：

.test {

    &:before {
        @include yourMixinName(top, 20px, 20px);
    }
}

.test-2 {

    &:after {
        @include yourMixinName(bottom, 20px, 20px);
    }
}

Answer 3

这些SASS变量只是一些随机变量，将在本例中使用。

$position : top ;
$triangle-width : 100px;
$stroke-width : 100px;

SASS mixin将逻辑封装在一个地方。并且IF-ELSE被省略了，因此它可以在多个地方使用。

@mixin before_after($margin-side,$before-after){
&:#{$before-after} {
      height: $triangle-width;
      width: $triangle-width;
      content:"";
      position:absolute;
      margin-#{$margin-side}: -$triangle-width/2 -$stroke-width;
    }

}

您可以将mixin与IF-ELSE语句结合使用。

p{
    @if $position == top {

        @include before_after(bottom,before);
    }@else{
        @include before_after(top,after);
    }
}

或者您可以在没有任何IF-ELSE的情况下使用它。

p{
@include before_after(bottom,before);
}

div{
@include before_after(top,before);
}

PS ：编辑是为了添加额外的几个文本行，以便 @Sean Stopnik 可以理解这里发生了什么。我的回答应该只是提供一个基础，提出问题的人可以建立自己的解决方案。不记录每个变量使用和勺子喂食。 只是回应Sean Stopnik评论

请提供有意义的评论，这有助于改善答案。
或者如果您还有其他要添加的内容以改进答案。
如果您有更好的答案，请发布。
不要垃圾评论框，因为当人们来寻找答案时然后他们也阅读了评论，以便更好地理解答案。
你基本上是在浪费每个人的时间。

如何在块之前和之后干掉sass mixin代码？

3 个答案: