Question

有人可以帮助我并解释为什么以前工作的mixin要求我在将其设置为条件之前定义变量。他们为Sass增加了范围吗？我疯了吗？

我正在使用带有Bundler / Compiler扩展的Visual Studio 2015。我似乎无法在更改日志中找到编译器或Sass文档，在何处或是否已更改。我所知道的是，自从我触及这段代码以来已经有一年多的时间了，突然间它不再像这样了。

如果我在最初的@mixin行之后添加$ from和$到定义，那么它将再次起作用。这个mixin的原始版本不包括那些，它工作正常。

@mixin tspin($dir, $dur) {
    $from: 0deg;
    $to: 360deg;
    @if $dir == cw {
        $from: 0deg;
        $to: 360deg;
    }

    @if $dir == ccw {
       $from: 360deg;
       $to: 0deg;
    }
    @keyframes tspin-#{$dir} { from { transform: rotate($from); } to { transform: rotate($to); } }
    animation: tspin-#{$dir} #{$dur}s linear infinite;
}

用法：

@include tspin("cw", "3");

输出：

animation: tspin-cw 3s linear infinite;

Answer 1

编辑 -

更好地回答您的问题。我来自前端背景＆amp;我总是被教导不要在JS中的If语句中声明变量，因为你会有奇怪的怪癖。现在我怀疑SASS改变了他们的范围如何工作，但是你可以检查他们的更改日志here。但对我而言，他们的范围将遵循某种JS最佳实践是有道理的。

我认为Visual Studio插件更有可能在更新之前有自己的规则并不严格，这允许你在If块中编写变量，但后来改为遵循SASS最佳规则实践。

您的代码对我来说很合适。我会稍微调整一下，以便更容易打电话，不要重复你自己;

@mixin tspin($dur, $dir: cw) {
  $from: 0deg !default;
  $to: 360deg !default;

  @if $dir == ccw {
    $from: 360deg;
    $to: 0deg;
  }

  @keyframes tspin-#{$dir} { from { transform: rotate($from); } to { transform: rotate($to); } }
  animation: tspin-#{$dir} #{$dur}s linear infinite;
}

然后调用cw，你需要做的就是;

@include tspin("3");

ccw将是

@include tspin("3", "ccw");

如果你愿意，你甚至可以在mixin之外声明你的内容。

这是关于here

中的scss变量和范围的讨论

可恢复的微调器CSS3动画。 Sass改变了吗？

1 个答案: