Come mantenere le parentesi del mixin SASS/SCSS?

Question

Sto tentando di creare un mixin SCSS per una trasformazione CSS e voglio passare argomenti. Tuttavia, quando si utilizza una variabile vengono rimosse le parentesi del mio valore di posizione.

come dovrebbe apparire una volta compilato:

transform: translateX(-100px); 

mia mixin:

@mixin fadeup ($direction, $value) { 
transform: translate#{$direction} ($value); 
} 

quando viene chiamato:

@include fadeup(X, 100px); 

che emette tristemente:

transform: translateX 100px; 

Quindi le parentesi che circondano il valore 100 px non sono presenti e pertanto non funzionerà.

Qualche idea su come mantenere le parentesi?

Answer 1

mi sembra che si potrebbe fare con un unquote per aiutare a mantenere la () ... Qualcosa del genere dovrebbe funzionare:

@mixin fadeup ($direction, $value) { 
    transform: translate#{$direction}unquote("("#{$value}")"); 
} 

.foo { 
    @include fadeup(X, 100px); 
} 

.bar { 
    @include fadeup(Y, 100px); 
} 

compila a:

.foo { 
    transform: translateX(100px); 
} 

.bar { 
    transform: translateY(100px); 
} 

Answer 2

Ha trovato un modo per farlo. Posso passare come una singola variabile invece:

@mixin fadeup ($direction) { 
    transform: translate#{$direction}; 
} 

@include fadeup(Y(100px)); 

Questo passerà la direzione e il valore in una volta sola 1 variabile. Non è leggibile, ma funziona per passare X o Y come valore + importo.

Answer 3

ho lo stesso problema e provando con la soluzione @brbcoding non funziona. se scrivo in questo modo:

transform: translate#{$direction}unquote("("#{$value}")"); 

il risultato è:

transform: translateX"("100px")"; 

Sembrare unquote ha problema. così provo questo:

transform: translate#{$direction}unquote("(")#{$value}unquote(")"); 

e che funziona perfettamente nel mio caso.

Answer 4

sono stato in grado di farlo funzionare con il doppio unquote ma l'aggiunta di vantaggi prima di ogni parte della stringa:

transform:$args+unquote('(') + $value + unquote(')'); 

Speranza che aiuta!

Answer 5

ho successo usando parentesi e virgolette singole:

@mixin fadeup ($direction, $value) { 
    transform: translate#{$direction}(unquote('(')#{$value}unquote(')')); 
}