Variablen und weniger CSS, wäre das möglich oder wie kann ich etwas Ähnliches erreichen?

Question

Ich habe den gleichen Codeblock mit zwei verschiedenen Variablen wiederholt. Dieser Code-Block wurde viele, viele Male wiederholt, also dachte ich mir, dass ich helfen würde, dieses Stylesheet zu verwalten, das ich in LESSCSS konvertieren würde.

Ich bin ziemlich neu mit LESS CSS, aber bekomme einen Kompilierfehler, also denke ich, was ich versuche zu tun ist nicht möglich, so wie ich es annähere.

.item(@name,@loc) { 
    @name .icon { background: url(..) -24px @loc no-repeat; } 
    .theme-purple @name .icon { background: url(..) 0 @loc no-repeat; } 
    .theme-green @name .icon { background: url(..) -48px @loc no-repeat; } 
    .theme-yellow @name .icon, 
    .theme-orange @name .icon { background: url(..) -72px @loc no-repeat; } 
    .theme-red @name .icon { background: url(..) -96px @loc no-repeat; } 
} 

.item('type',-24px); 

Ist so etwas möglich?

Answer 1

Sie sind in der Nähe. Das erste Problem ist Ihre Verwendung von Variablen. Sie müssen sich @arguments ansehen. Ich bin nicht 100% klar, was Sie versuchen, (möglicherweise einige Codes für Sprites) zu erreichen, aber lassen Sie mich Ihnen ein Beispiel geben:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { 
    box-shadow: @arguments; 
    -moz-box-shadow: @arguments; 
    -webkit-box-shadow: @arguments; 
} 

.box-shadow(2px, 5px); 

Sie Ihre Variablen gesetzt, gefolgt von ihrem Standard, wenn sie es nicht sind angegeben. Dann verwenden Sie @arguments, um sie in Ihren Mix zu platzieren. Da dies nur ein Hintergrundbild ist, haben Sie nur eines. Sie wenden dieses Mixing dann auf einen bestimmten Selektor an.

Es sieht so aus, als ob Sie versuchen, Mixins innerhalb von Selektoren als Mixin zu verwenden, was nicht möglich ist. Sie können aus verschiedenen Gründen auch keine Variablen innerhalb von Selektoren platzieren. Das wichtigste ist Umfang. Variablen sind Konstanten in LESS. Wenn Sie diese lokale globale Variable einmal festgelegt haben, kann sie nicht mehr geändert werden.

Es wäre einfacher zu sein, vielleicht ist es wie folgt tun:

.sprite (@path: url(..), @loc1: 0, @loc2: 0, @repeat: no-repeat;) { 
     background: @arguments;   
} 

.foo { 
     .sprite('url(..)', -96px, -24px); 
} 

Sollte Ausgabe:

.foo { 
     background: url(..) -96px -24px no-repeat; 
} 

Beachten Sie, können Sie nicht den ersten Parameter in weniger Argumente überspringen, so werden Sie immer muss die URL in diesem Beispiel deklarieren.