top - unidades de medida en css

Cálculo del ancho de porcentaje a píxel, luego, menos por píxel en MENOS CSS

Question

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

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

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

Ejemplo: si 100% = 500px, 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 cambio el tamaño.

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

Answer 1

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

Answer 2

O bien, podría usar el atributo de margen así:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

Answer 3

Prueba esto :

width:auto;
margin-right:50px;

Answer 4

Puede evitar los argumentos calc 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 utilizo esto de una de las siguientes tres formas:

Escape básico

Todo dentro de los argumentos calc se define como una cadena, y es totalmente estático hasta que el cliente lo evalúa:

MENOS Entrada

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

Salida CSS

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

Interpolación de variables

Puede insertar una variable LESS en la cadena:

MENOS Entrada

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

Salida CSS

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

Mezcla de valores escapados y compilados

Es posible que desee evitar 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 .