ResuableスピナーCSS3アニメーション。サスが変わった？

Question

誰かが私を助けて、これまで動作していたこのミックスインがなぜ条件付きでそれらを設定する前にvarsを定義する必要があるのか​​を説明できますか？彼らはSassにスコープを追加しましたか？私は狂ってる？

私はBundler/Compiler拡張機能を備えたVisual Studio 2015を使用しています。私は、コンパイラの変更履歴、またはSassのドキュメントで、これが変更された場合、または変更されているように見えることはありません。私が知っていることは、このコードに触れてから1年以上経過しており、突然このようにはうまくいきません。

最初の@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 Studioプラグインが、更新前に厳密ではない独自のルールを持っていた可能性が高いと思います。Ifブロックに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"); 

だろう。 here