Question

我正在尝试在另一个mixin中使用为一个mixin定义的var。

就我而言，我在$gutter mixin中定义了container()变量。我不想再为col() mixin定义它，所以我试图让它进入col() mixin。

这是我到目前为止所做的：

@mixin container($gutter, $placeholder:"cols") {
  margin: 0 -#{$gutter / 2};
  %#{$placeholder} {
      margin-left: #{$gutter / 2};
      margin-right: #{$gutter / 2};
  }
}

@mixin cols($cols, $placeholder:"cols") {
  @extend %#{$placeholder};
  width: #{(100% / $cols) - $gutter};
}

.wrap {
  @include container(2%);

  > .half {
    @include cols(2);
  }

  > .third {
    @include cols(3);
  }

  > .fourth {
    @include cols(4);
  }

}

我需要的css结果如下：

.wrap {
  margin: 0 -1%;
}
.wrap > .half, .wrap > .third, .wrap > .fourth {
  margin-left: 1%;
  margin-right: 1%;
}
.wrap > .half {
  width: 48%;
}
.wrap > .third {
  width: 31.33333%;
}
.wrap > .fourth {
  width: 23%;
}

有办法做到这一点吗？它在第11行失败，因为$gutter未定义。全局变量不是我需要的解决方案，因为我必须在具有不同装订线的不同断点中使用此mixin。因此，对于每个断点，将再次为元素定义container()和cols()。

Answer 1

您正在mixin中创建变量。 mixin中的变量是本地的，它们不是全局的。如果要从mixin创建全局变量，则必须使用！global flag

你可以像这样重写容器mixin

@mixin container($gutter, $placeholder:"cols") {
  $gutter: $gutter !global;
  margin: 0 -#{$gutter / 2};
  %#{$placeholder} {
    margin-left: #{$gutter / 2};
    margin-right: #{$gutter / 2};
  }
}

在另一个sass mixin中使用为一个sass mixin定义的变量

1 个答案: