css - 可重复使用的旋转器 CSS3 动画。 Sass变了吗？

Question

有人能帮我解释一下为什么这个曾经有效的 mixin 现在需要我在将它们设置在条件中之前定义变量。他们是否为 Sass 添加了作用域？我疯了吗？

我使用的是带有 Bundler/Compiler 扩展的 Visual Studio 2015。我似乎无法在编译器的更改日志或 Sass 文档中找到它在哪里或是否已更改。我所知道的是，我接触这段代码已经一年多了，突然间它不再像现在这样工作了。

如果我在最初的@mixin 行之后添加$from 和$to 定义，一切都会再次起作用。这个 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

编辑 -

为了更好地回答您的问题。我来自前端背景，我总是被教导不要在 JS 的 If 语句中声明 vars，因为你会遇到奇怪的怪癖。现在我怀疑 SASS 是否改变了他们的范围的工作方式，但是你可以查看他们的更改日志 here .但对我来说，他们的范围界定将遵循某种 JS 最佳实践是有道理的。

我认为 Visual Studios 插件更有可能有自己的规则，在更新之前没有那么严格，它允许您在 If block 中编写 vars，但后来更改为遵循 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 之外声明你的 from 和 to。

这在 here 中讨论了 scss 变量和作用域