È possibile fare matematica all'interno dei CSS?

Question

Ho jquery accorion id #accordion e parte del contenuto all'interno del nome della classe di intestazione .simpleColor. Ora voglio dare un margine calcolato a .simpleColor. In pseudo ... sembra qualcosa di simile,

.simpleClass { 
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2)); 
} 

Sono aperto a utilizzare qualsiasi altra tecnologia come JavaScript per raggiungere questo obiettivo, se è possibile.

Answer 1

C'è una funzione chiamata CSS calc che sta cominciando a ottenere abbastanza un buon supporto. La sintassi funziona come segue:

width: calc(50% - 100px); 

(Si noti che gli spazi attorno agli operatori è significativo)

Questo permette vero supporto computazionale dinamica in CSS. Con un preprocessore, è possibile combinare solo lunghezze statiche con lunghezze statiche e lunghezze relative con quelle relative.

Calc è supportato da Chrome 19, Firefox 4 e IE9. La funzione non è abbastanza ampiamente supportata da usarla ampiamente, ma non sarà troppo lontana nel futuro ed è qualcosa da ricordare e da guardare avanti.

Answer 2

Se siete aperti a utilizzare altre tecnologie, provare a utilizzare meno: http://lesscss.org/

Answer 3

jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width()/2) - (jQuery('.simpleColor').width()/2) + 'px'); 

dovrebbe fare quello che si vuole. Ma devi fare qualcosa di simile in javascript, non puoi farlo in puro CSS a meno che le larghezze per #accordian e .simpleColor siano conosciute in anticipo (e quindi calcolate in anticipo).

Answer 4

Non è possibile eseguire operazioni matematiche all'interno del CSS in modo nativo. È possibile utilizzare JavaScript per modificare le proprietà CSS al caricamento della pagina, ma questo è un problema e deve essere eseguito ogni volta che la pagina viene caricata rendendo la pagina più lenta.

È necessario utilizzare un preprocessore CSS come LESS, Stylus o SASS.

Il vantaggio di utilizzare una di queste lingue è che è possibile generare fogli di stile CSS effettivi. Ottieni anche benefici come funzioni, mixin, variabili e altro.

Answer 5

Credo che il CSS debba essere una definizione di stile pura. Non mi piace mescolare alcuni calcoli con quello. Farei che nel mio javascript

var accWidth=parseInt($("#accordion").css("width").replace("px","")); 
var simpWidth=parseInt($(".simpleColor").css("width").replace("px","")); 
var marginLeft=((accWidth/2)-(simpWidth/2));  
$(".simpleClass").css("margin-left",marginLeft); 

campione Lavorare http://jsfiddle.net/mzTRw/19/

Answer 6

Vedere questo esempio .. Ha usato molta matematica in css.

http://codepen.io/schoenwaldnils/pen/DLiyr