[javascript] ¿Es posible hacer matemáticas dentro de CSS?



Answers

No es posible realizar operaciones matemáticas dentro de CSS de forma nativa. Podría usar JavaScript para cambiar las propiedades de CSS en la carga de la página, pero esto es un problema y se debe hacer cada carga de página haciendo que su página sea lenta.

Tendrá que usar un preprocesador CSS como LESS , Stylus o SASS .

La ventaja de usar cualquiera de estos lenguajes es que puedes generar hojas de estilo CSS reales a partir de ellos. También obtienes beneficios como funciones, mixins, variables y más.

Question

Tengo jquery accorion id #accordion y parte del contenido dentro del nombre de la clase de encabezado .simpleColor . Ahora quiero dar un margen calculado a .simpleColor. En pseudo ... se ve algo como esto,

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

Estoy abierto a utilizar cualquier otra tecnología como javascript para lograr esto si es posible.







Creo que el CSS debe ser una definición de estilo puro. No me gusta mezclar algunos cálculos con eso. Haría eso en mi 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);

Muestra de trabajo http://jsfiddle.net/mzTRw/19/




Links