如何用前后块干掉 sass 混合代码？

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;
    }
  }

如您所见，有些代码是重复的。我想知道有没有办法把它弄干。我试图将它放入自己的 class 中，但不知何故似乎不起作用。有任何想法吗？我可以在 mixin 中创建一个 mixin，但在我看来这似乎开销太大了。你怎么看？

Answer 1

这些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 评论的回应

请只提供有意义的评论，有助于改进回答。
或者如果您有任何其他要补充的内容以改进答案。
如果您有更好的答案，那么post它。
不要在评论框中发送垃圾邮件，因为当人们来寻找答案时然后他们也阅读评论，以更好地理解回答。
而且你基本上是在浪费大家的时间。

Answer 2

使用这种mixin最好的方法是把:before或:after留在mixin之外，直接使用选择的伪class中的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

通常，让事情变干的最好方法是将公共部分分解成混入，然后将它们构建成更大的混入。这正是 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;
}

如何用前后块干掉 sass 混合代码？

how to dry up sass mixin code with before and after blocks?

css

sass

dry

mixins