Question

我正在努力从@mixin内部传递/获取$ variables到@content。我在网上广泛阅读了此书，并且知道这是不可能的。但是也许有人知道一个很好的变体和/或其他解决方案。

我创建了一个SassMeister文件来解释它：https://www.sassmeister.com/gist/f5404131ace6e243ef0a6c9cca042889

有人可以帮助我吗？感谢您与我们联系;-）

Answer 1

最近，可以做到这一点，但这是一项非常新的功能，并且确实取决于您使用的Sass版本。（我使用最新的dart-sass进行工作）

语法是这样的

@mixin test-mixin() { 
  $var: 10px;
  @content($var);
}

@include test-mixin() using ($var) {
  margin-top: $var;
}

您可以将多个变量传递到内容块，但是有some caveats。

Answer 2

我不知道这是否是最好的方法，但是您可以创建一个全局变量，在每个循环中更改它并使用它。像这样：

$color-1: #333;
$color-2: #0073BD;
$myvariable:0;


$numbers: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;

$orientations: left, right, top, bottom;

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
);

@mixin breakpoint($breakpoint) {
  $breakpoint: map-get($breakpoints, $breakpoint);
  @media (min-width: $breakpoint) {
    @content;
  }
}

@mixin breakpoints($get-numbers: false) {
  @content;
  $breakpoints: map-keys($breakpoints);
  @each $breakpoint in $breakpoints {
    @include breakpoint($breakpoint) {
      @if $get-numbers == true {
        @each $number in $numbers {
          &-#{$number}-#{$breakpoint} {
            $myvariable: $number !global;
            @content;
          }
        }
      } @else {
        &-#{$breakpoint} {
          @content;
        }
      }
    }
  }
}

.u-margin {
  @include breakpoints(true) {
    content: "Test to get the #{$myvariable} variable";
    margin:$myvariable * 1rem;
    // How can I get the $number variable here?
    //margin: $number * 1rem;
  }
}

SASS-从@mixin内部将$ variable传递给@content

2 个答案: