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

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

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

Uso CSS3 calc() así que no funciona: calc(100% - 10px)

Ejemplo: if 100% = 500px so width = 490px (500-10);

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

Así que el relleno dirá: 5 (10px / 2) todo el tiempo al redimensionar.

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

Author: l2aelba, 2013-02-11
Source

4 answers

Puede escapar 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')

Demo: http://jsfiddle.net/c5aq20b6 /

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

Escape básico

Todo dentro de los argumentos calc 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 Escapados y Compilados

Es posible que desee escapar de un valor porcentual, pero siga adelante 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 .

 221
Author: natchiketa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-05 18:47:00

Creo que width: -moz-calc(25% - 1em); es lo que estás buscando. Y es posible que desee darle a este Enlace una mirada para cualquier otra ayuda

 0
Author: Akshay Khandelwal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-11 17:57:56

O bien, puedes usar el atributo margin de esta manera: 

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }
 -3
Author: THeBAckwardss,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-11 14:59:56

Prueba esto: 

width:auto;
margin-right:50px;
 -3
Author: user1552559,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-22 16:51:35