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

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()

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 .

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.

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;
    }

Prueba esto :

width:auto;
margin-right:50px;