Spinner CSS3-Animation. Hat sich Sass verändert?

Question

Kann mir jemand helfen und erklären, warum dieser Mix, der früher funktioniert hat, verlangt, dass ich Vars definiere, bevor ich ihn in einen Conditional setze. Haben sie Sass etwas hinzugefügt? Bin ich verrückt?

Ich verwende Visual Studio 2015 mit der Bundler/Compiler-Erweiterung. Ich kann nicht in dem Changelog für den Compiler oder der Sass-Dokumentation finden, wo oder ob das geändert worden ist. Alles, was ich weiß, ist, dass es über ein Jahr her ist, seit ich diesen Code berührt habe und plötzlich funktioniert es nicht mehr so.

Wenn ich $ from und $ zu Definitionen direkt nach der ersten @mixin-Zeile hinzufüge, funktioniert alles wieder. Die Originalversion dieses Mixins enthielt diese nicht und es funktionierte gut.

@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; 
} 

Verbrauch:

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

Ausgänge:

animation: tspin-cw 3s linear infinite; 

Answer 1

Bearbeiten -

besser Um Ihre Frage zu beantworten. Ich komme aus einem Front-End-Hintergrund & Ich wurde immer gelehrt, Vars nicht in If-Anweisungen in JS deklarieren, wie Sie seltsame Macken bekommen. Jetzt bezweifle ich, dass SASS geändert hat, wie ihr Bereich funktioniert, aber Sie können ihr Änderungsprotokoll überprüfen here. Aber für mich wäre es sinnvoll, dass ihr Scoping einer Art JS-Best Practice folgt.

Ich denke, es ist wahrscheinlicher, dass das Visual Studio-Plugin seine eigene Regel hatte, die vor einem Update nicht so streng war, dass Sie Vars in If-Blöcken schreiben konnten, aber seitdem SASS-Best Practice folgen.

Ihr Code sieht für mich richtig aus. Ich würde es jedoch ein wenig optimieren, um es einfacher zu machen, zu telefonieren und sich nicht zu wiederholen.

@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; 
} 

Dann cw nennen Sie alles, was Sie tun müssten, ist;

@include tspin("3"); 

und CCW-würde

sein

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

Sie könnten sogar Ihre von und nach außerhalb des mixin erklären, wenn man wollte.

Dies spricht über SCSS Vars und Umfang in here