Transform Eigenschaften/Variablen in Sass zusammenstoßen und sich gegenseitig überschreiben

Question

Ich bin neu zu sass so nackt mit mir. Momentan habe ich den Code am Ende der Seite in meinem sass. In meinem html-Targeting ich es bin als

class=" transform rotate-5 zoom-2 ......" 

das Problem, dass die Eigenschaften und kollidierende Transformation folgt nicht Maßstab anwenden und drehen auf den gleichen div-Tag, ich bin entweder immer oder das andere. Ich dachte, ich dies mit der @extend Eigenschaft und so etwas wie,

&.rotate-#{$i} 
{@extend &.skew-#{$i}, &.zoom-#{$i}, &.zoom--#{$i}; 
      transform: rotate($rotate#{deg}); 
     } 

aber bisher habe ich kein Glück ändern könnte habe, wenn jemand helfen kann es sehr zu schätzen würde.

.transform { 

    overflow:hidden; 

    @for $i from 1 through 360 { 

     $rotate: $i; 
     $skew: $i; 
     $zoom: $i; 

     &.rotate-#{$i} { 
      transform: rotate($rotate#{deg}); 
     } 

     &.skew-#{$i} { 
      transform: skew($skew#{deg}); 
     } 
     &.zoom-#{$i} { 
      transform: scale($zoom,0); 
     } 

     &.zoom--#{$i} { 
      transform: scale(-$zoom,0); 
     } 
    } 
} 

Answer 1

Ich bin ein großer Fan von Utility-Klassen, die ich leichter zu debuggen gedacht und mit zu bauen. Aber hier scheint es keine gute Idee zu sein:

1) Sie erstellen 360 * 4 Selektoren, aber Sie werden wahrscheinlich nur 10-20 von ihnen verwenden. Es ist ein bisschen übertrieben.

2) Wie Sie es beschreiben, "kombinieren" die Transformationseigenschaftswerte nicht gut, zumindest für das, wonach Sie suchen. Sogar atomic CSS, die den Utility-Klassen-Ansatz sehr weit bringt, erfordert die Kombination verschiedener Werte von filter (zum Beispiel), einen benutzerdefinierten Wert/Klasse zu erstellen.

Ich verstehe, dass es nicht wirklich eine gute Antwort ist, zumindest nicht die Antwort, die Sie gesucht haben, aber wenn Sie Ihren CSS-Ansatz beibehalten möchten, schlage ich vor, dass Sie eine "objektorientierte" Methode dafür übernehmen Ausgabe und setzen Sie Ihre Transform Eigenschaft direkt in die CSS Ihres Objekts, zum Beispiel mit diesem Mix:

@mixin transform($rotate, $skew, $zoom) { 
    transform: rotate($rotate#{deg}) skew($skew#{deg}) scale($zoom,0) scale(-$zoom,0); 
}