Come posso moltiplicare un valore di larghezza del pixel con LESS Css?

Question

Sto provando a configurare il riempimento su alcuni \ elementi disegnati come pillole e voglio modificare dinamicamente il padding. So che posso fare:

@pill-padding-v: 8px; 
@pill-padding-h: 15px; 

padding:@pill-padding-v @pill-padding-h; 

che rende questo - e sembra funzionare bene:

padding:8px 15px; 

Ma come posso avere meno aggiungere 1px di imbottitura a questo?

@pill-padding-v: 8; 
@pill-padding-h: 15; 

@pill-padding-v: (@pill-padding-v + 1) 
@pill-padding-h: (@pill-padding-h + 1) 

padding:@pill-padding-vpx @pill-padding-hpx; 

Il probelem principale sembra essere l'aggiunta di "px" come parte del nome della variabile sto ottenendo un errore di compilazione. Inoltre penso che sia sintatticamente scorretto usare 8 px invece di 8px e che sembra irrompere anche nei browser.

Come posso moltiplicare un valore di larghezza di pixel con LESS Css?

Answer 1

Hai ragione, l'aggiunta del px alla variabile sta causando problemi. Ho effettivamente provato la sintassi di interpolazione e non ha aiutato, ma dovresti specificare le unità comunque nelle tue variabili (px, em, % ...), come nel tuo primo esempio di lavoro.

Hai detto "moltiplica" ma penso che volevi dire "aggiungi". Non ci dovrebbe essere alcun problema, provate questo:

@pill-padding-v: 8px; 
@pill-padding-h: 15px; 

@pill-padding-v: (@pill-padding-v + 1); 
@pill-padding-h: (@pill-padding-h + 1); 

element { 
    padding:@pill-padding-v @pill-padding-h; 
} 

uscita dovrebbe essere:

element { padding:9px 16px; } 

... anche se, si potrebbe desiderare di utilizzare solo un altro nome variabile o aggiungere la giusta 1px in dichiarazione di stile. Non penso che la re-dichiarare le variabili sia una buona pratica, ed è stato in realtà sorpreso che abbia funzionato.

Answer 2

parte aggiuntivo, è possibile effettuare qualsiasi calcolo matematico usando meno in questo modo:

@pill-padding-v: 8; 
@pill-padding-h: 15; 

element { 
/* the numbers I'm multiplying by are arbitrary, 
but the value defined in the LESS variable will append 
the unit that you multiply it by. */ 
padding: calc(@pill-padding-v * 3px) calc(@pill-padding-h * 2px); 
} 

MENO uscite:

element { 
    padding:calc(24px) calc(30px); 
} 

Anche se è avvolto nella funzione calc, va bene, perché la risultato dell '"equazione" senza operatore matematico, è comunque quel valore.

L'utente seven-fasi-max offre un buon punto: non è necessaria la funzione calc() in MENO. Può essere scritto in MENO come:

element { 
    padding: (@pill-padding-v * 3px) (@pill-padding-h * 2px); 
}