Calcular el ancho de porcentaje a píxel y luego menos por píxel en MENOS CSS

100

Calcularé el ancho en algún elemento de porcentaje a píxel, por lo que haré menos -10 px usando LESS y calc () . ¿Es posible?

div {
    span {
        width:calc(100% - 10px);
    }
}

Estoy usando CSS3 calc()para que no funcione:calc(100% - 10px)

Ejemplo: si 100% = 500px entonces ancho = 490px (500-10);

Hice una demostración para probar: http://jsfiddle.net/4DujZ/55/

entonces el relleno dirá: 5 (10px / 2) todo el tiempo cuando cambie el tamaño.

¿Puedo hacerlo en MENOS ? Sé cómo hacerlo en jQuery y CSS simple como relleno de margen o de lo contrario ... pero intentaré hacerlo funcional en MENOS concalc()

l2aelba
fuente
1
Como regla general, no use selectores de estilo que no tengan semántica , como divo span.
Pavlo
1
Aquí hay una combinación de navegadores cruzados que escribí para usar calc en cualquier propiedad css: stackoverflow.com/a/24790931/916734
Patrick Berkeley

Respuestas:

246

Puede escapar de los calcargumentos para evitar que se evalúen en la compilación.

Usando su ejemplo, simplemente rodearía los argumentos, así:

calc(~'100% - 10px')

Demostración: http://jsfiddle.net/c5aq20b6/


Encuentro que uso esto de una de las siguientes tres formas:

Escapar básico

Todo dentro de los calcargumentos se define como una cadena y es totalmente estático hasta que es evaluado por el cliente:

MENOS entrada

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

Salida CSS

div > span {
  width: calc(100% - 10px);
}

Interpolación de variables

Puede insertar una variable MENOS en la cadena:

MENOS entrada

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

Salida CSS

div > span {
  width: calc(100% - 10px);
}

Mezcla de valores de escape y compilados

Es posible que desee escapar de un valor porcentual, pero continúe y evalúe algo en la compilación:

MENOS entrada

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

Salida CSS

div > span {
  width: calc((100% - 10px) - 80px);
}

Fuente: http://lesscss.org/functions/#string-functions-escape .

natchiketa
fuente
2
¡Eres genial, amigo! Gracias por esos ejemplos y explicaciones. ¿Sabe cómo podría dividir un ancho desconocido de un contenedor (llamémoslo categorías div.) En 4 partes iguales, usando MENOS?
Shawn Spencer
5
@ShawnSpencer: Entre líneas, hay mucha oscuridad. ¿Puedes crear un JSFiddle que ilustre lo que estás tratando de resolver? Puedo intentar adivinar el caso de uso, pero estoy inhibido por no conocer todos los detalles, y estoy seguro de que usted sabe cómo va eso: sus peores inhibiciones tienden a perturbarlo al final.
natchiketa
2
No me inclino a renunciar a la madurez. Como busco una solución CSS sencilla y pude hacer que las cosas funcionen, usando una de las respuestas, estoy bien por ahora. Sin embargo, gracias por ofrecerse a ver un ejemplo de JSFiddle. Muy apreciado.
Shawn Spencer
0

Creo que width: -moz-calc(25% - 1em);es lo que buscas. Y es posible que desee echar un vistazo a este enlace para obtener más ayuda.

Akshay Khandelwal
fuente
-3

O bien, puede usar el atributo de margen de esta manera:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }
THeBrewards
fuente
3
OP quiere que el ancho de 10px sea menor al 100% de ancho. Tu CSS no hace eso. Lo hará más ancho que el 100%.
Andrew Barber
-3

Prueba esto :

width:auto;
margin-right:50px;
usuario1552559
fuente