Less.js: La función CSS3 calc () no funciona con MENOS
Sé que ya se informó, pero los errores se cerraron debido a la falta de información.
Tengo el siguiente código CSS:
#id1 {
position: fixed;
left: 0; top: 0;
width: 130px;
}
#id2 {
position: fixed;
right: 0; top: 0;
width: calc(100% - 130px);
}
Quería transformarlo en MENOS usando 130px como parámetro, pero calc es interpretado por MENOS y esto:
<strong i="11">@id1width</strong>: 130px
#id1 {
position: fixed;
left: 0; top: 0;
width: @id1width;
}
#id2 {
position: fixed;
right: 0; top: 0;
width: calc(100% - @id1width);
}
hace que la última línea se transforme en width: calc(-30%); que claramente no es lo que se desea. Intenté usar width: ~"calc(100% - @id1width)"; pero hace que @id1width no se interprete.
Creo que LESS no debería usar cosas reservadas por CSS3 para su uso interno ...
mgol
Todos 51 comentarios
probablemente se cerraron como duplicados ... aunque no puedo encontrar uno sobre calc ... ver # 146 # 122 y # 915
solución alternativa: width: ~"calc(100% - @{id1width})"; - observe los corchetes alrededor de la variable.
Nos estamos moviendo a un sistema en el que solo se evaluarán las cosas entre corchetes para solucionar este problema.
lukeapage
en 8 oct. 2012
: +1:
shankarcabus
en 18 dic. 2012
<strong i="5">@rows</strong>: 10;
<strong i="6">@row1</strong>: 1 / <strong i="7">@rows</strong> * 100%;
.featured1
{
top: ~'-webkit-calc(@{row1} + 20px)';
right: 0;
bottom: @row5;
left: @col9;
}
Este bit de MENOS procesará el valor de ' @ fila1 ' para que sea del 10%, lo cual es genial. Pero cuando está dentro de una sección de escape de LESS y envuelto en curlys para retener la variable LESS, devuelve '10' sin el '%'.
Encontré una solución que aún no me ha fallado. Si coloca otro '%' después del rizado de cierre de la variable 'row1' dentro del código de escape, funcionará correctamente ...
~'-webkit-calc(@{row1}% + 20px)';
Pero eso parece un gran truco para agregar otro tipo de unidad que se supone que ya está en la variable.
jonjohnjohnson
en 19 dic. 2012
@jonjohnjohnson esto está arreglado en la cabeza y estará en 1.3.2
el resto de este error se resolverá en 1.4.0
lukeapage
en 19 dic. 2012
No estoy seguro de si se trata del mismo problema, pero tengo un problema con lo siguiente. Tenga en cuenta que no hay cosas menos específicas aquí, menos 1.3.3 es munging CSS válido.
Aquí está el CSS
html, body {
margin:0, padding:0, border:0;
height: 100%;
}
#content {
height: -webkit-calc(100% - 40px);
height: calc(100% - 40px);
background-color:gray;
}
#footer {
background-color:black;
}
Y aquí está el HTML para incluirlo
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet/less" type="text/css" href="test.css" />
<script src="less-1.3.3.min.js"></script>
<body>
<div id="content"></div>
<div id="footer" style="height:40px"></div>
</body>
</html>
El "contenido" se establece en una altura del 60%, por lo que menos es el análisis y la resolución incorrecta de la expresión de cálculo en lugar de pasarla sin cambios al navegador. Probado en Safari 6.0.2 y Firefox.
faceless2
en 14 ene. 2013
Corregido en maestro para 1.4.0
lukeapage
en 2 feb. 2013
height: ~"calc(100% - 50px)";
todavía produce:
height: calc(50%);
para mi. Quiero:
height: calc(100% - 50px);
OliverJAsh
en 3 jun. 2014
Es más, todavía produce height: calc(50%); incluso con una matemática estricta establecida en on .
OliverJAsh
en 3 jun. 2014
@OliverJAsh No puedo reproducir sus resultados con Less 1.7.0 (tanto el valor de escape como --strict-math:on funcionan como se esperaba) ... ¿Podría proporcionar más detalles sobre el compilador / entorno / scripts que usa? (En caso de que haya un problema con el script de compilación de Bootstrap que podría llevar a resultados tan incorrectos: https://github.com/twbs/bootstrap/issues/13604, ¿tal vez este también sea su caso?).
seven-phases-max
en 3 jun. 2014
Estaba teniendo este problema en 1.6.3 (por alguna razón, WinLESS está vomitando en la compilación cuando actualizo a 1.7.x, así que me quedo con 1.6.x por ahora)
Mi corrección rápida fue solo para escapar de una parte de la ecuación como:
height: calc(~"100%" - unit(<strong i="7">@var</strong>, px));
Esto incluso funciona para variables, como <strong i="10">@var</strong>: 50 . O puede escapar de todo el cálculo como calc(~"100% - 50px");
twiginteractive
en 26 jul. 2014
@twiginteractive Si tiene que usar el escape con la opción --strict-math off (configuración predeterminada), entonces no es un problema, sino un comportamiento esperado. Ver --strict-math .
seven-phases-max
en 26 jul. 2014
@ seven-phase-max Hmmm - de acuerdo con los documentos, con SM desactivado (predeterminado), entonces esto _ debería_ analizarse correctamente (es decir, sin tocar)
height: calc(100% - 10px);
Pero no es así. El CSS de salida es height: calc(90%); , que no es el resultado deseado. Tal vez esto esté arreglado en 1.7, pero como digo, no puedo usar esa versión en este momento hasta que descubra qué está rompiendo la compilación WinLESS.
(A menos que esté leyendo mal los documentos cuando dice "se procesará correctamente" ... LESS no podría saber el valor del 100%, por lo que no debería hacer un cálculo matemático en '100% - 10px')
twiginteractive
en 26 jul. 2014
@twiginteractive
de acuerdo con los documentos, con SM desactivado (predeterminado), esto debería analizarse correctamente (es decir, sin tocar)
No, la palabra allí es currently no correctly (es decir, "será _ procesado_ actualmente").
seven-phases-max
en 26 jul. 2014
@ seven-phase-max Ah - mi mal, tiene sentido ahora. Gracias por la aclaración.
twiginteractive
en 27 jul. 2014
altura: ~ "calc (100% - 50px)"; Trabajó para mi.
aamirshahzad
en 5 sept. 2014
Aquí es donde Less.js comienza a meterse con tu código.
height: _calc(50%);
height: calc(100% - 50%); /* browser-native */
stevenvachon
en 5 sept. 2014
@stevenvachon
Supuestamente v2.0 tendrá la opción de prefijar sus funciones así:
Esto no afectará a calc de ninguna manera. No hay una función calc incorporada, Less solo está evaluando una expresión matemática de acuerdo con sus reglas (de Less). Eso es todo. Si no quieres este "lío", usa --strict-math .
seven-phases-max
en 5 sept. 2014
Ps, la solución a este problema es matemática estricta. Y tal vez deberíamos
forzar matemáticas estrictas cuando en una llamada a calc?
lukeapage
en 5 sept. 2014
El problema se extiende cuando se usa Myth after Less.
stevenvachon
en 5 sept. 2014
¿Por qué? ¿El mito quita los paréntesis? Las matemáticas estrictas hacen menos un superconjunto adecuado
de css.
lukeapage
en 5 sept. 2014
¿Y tal vez deberíamos forzar las matemáticas estrictas cuando estamos en una llamada a calc?
Hemos discutido esto en el # 1872 y hay algunos argumentos en contra de las " matemáticas estrictas locales
seven-phases-max
en 5 sept. 2014
@stevenvachon
Incluso con strictMath, necesitamos ~ "calc (...)" para que Less lo ignore.
¿Ejemplo? Es decir, un fragmento donde Less atornilla una expresión dentro de calc con --strict-math=on .
seven-phases-max
en 5 sept. 2014
¿Desde cuándo las funciones de prefijo v2? ¿Decidimos eso y lo olvidé?
lukeapage
en 6 sept. 2014
¿Desde cuándo las funciones de prefijo v2? ¿Decidimos eso y lo olvidé?
No. Supongo que esto se sobrestimó ligeramente https://github.com/less/less.js/issues/2102#issuecomment -50286985.
seven-phases-max
en 6 sept. 2014
Sí, lo siento, no "la opción de" sino "la capacidad de escribir un complemento que proporcione la opción de". Tendré que probar un código de nuevo con y sin Debo haberme equivocado hace un tiempo y seguí avanzando con ese malentendido. Tengo un código antiguo que tendré que modificar ahora.~"" en calc() .
stevenvachon
en 6 sept. 2014
He notado que sucede algo extraño con calc cuando se usa junto con width . Lo puse todo en un codepen solo para hacerlo más fácil: http://codepen.io/anon/pen/OVpJvP
alenb
en 2 jun. 2015
@alenb
Entonces, ¿qué hay de extraño allí? El código en su codepen se compila como se esperaba ...
seven-phases-max
en 2 jun. 2015
@ siete-fases-max
Está compilado, pero no es lo que se esperaba. Verifique el código CSS un poco más de cerca.
Es extraño porque todavía tiene un espacio en el extremo derecho a pesar de que debería estirarse completamente con las 3 columnas. Las primeras dos columnas deben tener un 33,33% menos 20 píxeles y la última columna un 33,33%. Las primeras 2 columnas tendrían un padding-right de 20px, pero esto no se refleja ya que obviamente hay un espacio en el extremo derecho.
He jugado más con él anoche y margin-right en lugar del padding-right hace el truco y resuelve el problema.
alenb
en 3 jun. 2015
@alenb
Está compilado, pero no es lo que se esperaba. Verifique el código CSS un poco más de cerca.
Claro que lo hice. Entonces, si espera algo diferente, especifique.
Las primeras 2 columnas tendrían un padding-right de 20px, pero esto no se refleja
padding no afecta el ancho de ninguna manera (a menos que establezca un [ box-sizing ] específico (https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing )), consult [CSS specs](http://www.w3.org/TR/REC-CSS2/box.html). So you simply get :
(33% - 20px) + (33% - 20px) + 33% = 99% - 40px -> 40px` brecha como se esperaba.
De cualquier manera, esto está relacionado únicamente con CSS y no tiene nada que ver con la forma en que Less compila calc . Haga clic en el botón "ver compilado" en el código del codepen y verá que sus declaraciones calc son compiladas por Less exactamente de acuerdo con lo que especificó).
seven-phases-max
en 3 jun. 2015
@ siete-fases-max
Pensé que el codepen lo haría evidente, pero no hay problema en absoluto.
Gracias por la info!
alenb
en 3 jun. 2015
Hoy todavía no funciona con la instalación predeterminada de less (usando npm).
Tuve que usar:
min-height: ~"calc(100% - 262px)"; //calc(100% - 262px);
No sé si es normal, ya que el error está marcado como "cerrado", pero solo quería avisarle.
rkyoku
en 8 abr. 2016
@RenaudParis - matemática estricta
seven-phases-max
en 8 abr. 2016
Está bien, lo intentaré, ¡gracias! ¿Pero no sería mejor que fuera por
¿defecto? Porque es bastante sorprendente, cuando no conoces esto
parámetro.
¡Gracias de cualquier manera!
Le ven. 8 avr. 2016 à 20:48, Max Mikhailov [email protected] a
écrit:
@RenaudParis https://github.com/RenaudParis --strict-math
http://lesscss.org/usage/#command -line-use-strict-math-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/less/less.js/issues/974#issuecomment -207553212
rkyoku
en 8 abr. 2016
¿Pero no sería mejor que sea por defecto?
Hacerlo como predeterminado romperá muchas bases de código Less existentes. Una vez (en ~ v1.4.0 ) hubo un intento de convertirlo en predeterminado en realidad, pero luego se invirtió debido a la compatibilidad con versiones anteriores ... Un método más nuevo y menos intrusivo se desarrolló en # 1880 (pero aún no está implementado).
seven-phases-max
en 9 abr. 2016
¡De acuerdo, gracias por tomarte el tiempo de explicármelo Max!
Le sam. 9 avr. 2016 13:46, Max Mikhailov [email protected] a
écrit:
¿Pero no sería mejor que fuera por
¿defecto?Hacerlo como predeterminado romperá muchas bases de código Less existentes. Una vez
(en ~ v1.4.0) hubo un intento de convertirlo en predeterminado en realidad, pero
luego se invierte debido a la compatibilidad con versiones anteriores heredadas ... Una versión más nueva,
El método menos intrusivo se desarrolló en el n. ° 1880.
https://github.com/less/less.js/issues/1880 (pero no está implementado
todavía)).-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/less/less.js/issues/974#issuecomment -207776654
rkyoku
en 9 abr. 2016
He resuelto esto:
.calc(<strong i="6">@prop</strong>, @val) {
@{prop}: ~"calc(~'@{val}')";
@{prop}: ~"-moz-calc(~'@{val}')";
@{prop}: ~"-webkit-calc(~'@{val}')";
@{prop}: ~"-o-calc(~'@{val}');"
}
.calc(width, "80% - 36px");
Cuando uso command line es correcto. Solo less-loader no es correcto. Entonces encontré esta solución en stackoverflow
Lo copio a mi código, lamentablemente tampoco es correcto. Entonces modifiqué algo. ¡Funciona!
¡¡Desafortunadamente, la línea de comando no es correcta !! 😂 😂 😂
mqliutie
en 1 sept. 2016
No estoy seguro de por qué se ha resuelto este problema. No tiene sentido que Less cambie el comportamiento de un CSS nativo.
vincentmorneau
en 3 nov. 2016
... Menos cambiaría el comportamiento de un CSS nativo.
No debería. Simplemente configure --strict-math=on (no habilitado de manera predeterminada debido a la compatibilidad con una cantidad gigantesca de proyectos Less dependiendo de --strict-math=off , más algunas consideraciones mencionadas en # 1880).
seven-phases-max
en 4 nov. 2016
En un tema de UIkit 3 , estoy usando esto en my_theme.less :
height: ~"calc(100vh - 20px)";
Y funciona.
oshihirii
en 6 ago. 2017
Me funcionó al escribir en el archivo * .less https://github.com/less/less.js/issues/974#issuecomment -9229470
¡Gracias @lukeapage ! 🥇
quytm2239
en 16 oct. 2017
Hola @mqliutie, gracias por agregar la sugerencia de mixin para calc, pero hay un ~ extra en tu Mixin que estaba rompiendo la compilación:
el mixin debe ser
.calc(<strong i="8">@prop</strong>, @val) {
@{prop}: ~"-webkit-calc('@{val}')";
@{prop}: ~"-moz-calc('@{val}')";
@{prop}: ~"calc('@{val}')";
}
Ingrese de la siguiente manera:
.calc (ancho, "100% - 60px");
Salida de la siguiente manera:
ancho: calc (100% - 60px);
ciaranlp
en 19 oct. 2017
¿Por qué está cerrado este problema? No está arreglado.
Todavía obtengo calc(30%) cuando escribo calc(50% - 20px) . Esto nunca es lo que quiere nadie. Aparte del hecho de que es incorrecto calcular a ciegas con diferentes unidades, debe dejarlo como está en un cálculo (), a menos que pueda calcularse con un 100% de confiabilidad (por ejemplo, las mismas unidades). Estoy usando MENOS 2.7.3.
Vuelve a abrir este problema.
thany
en 25 ene. 2018
@gracias
Consulte estos comentarios, describen cómo esto no es exactamente un problema, tanto como la configuración predeterminada de procesamiento matemático es un subproducto del historial, y siempre puede cambiar la configuración predeterminada.
https://github.com/less/less.js/issues/974#issuecomment -207553212
https://github.com/less/less.js/issues/974#issuecomment -207776654
jonjohnjohnson
en 25 ene. 2018
@jonjohnjohnson Eso es solo
No importa cómo lo digas, este problema no está resuelto por ninguna definición.
thany
en 26 ene. 2018
@thany Solo estaba tratando de ayudarlo a comprender que los desarrolladores decidieron que no es un problema según ellos. Esos comentarios no solo reafirman el problema, sino que describen la postura de los desarrolladores sobre el tema. Buena suerte.
jonjohnjohnson
en 26 ene. 2018
@gracias
entonces debería estar activado por defecto.
No puede ser porque esto rompería inmediatamente un millón de proyectos que existen. Entonces, si trata el comportamiento predeterminado como un problema, simplemente configure la opción documentada y listo. Por cualquier definición.
¿Por qué está cerrado este problema?
Porque la discusión actualizada sobre cómo mejorar el comportamiento predeterminado está aquí .
seven-phases-max
en 26 ene. 2018
@thany Como @ seven-
matthew-dean
en 27 ene. 2018
width: 15%;
height: ~"calc(width)";
cómo hacer alto = ancho
xiaomizhou66
en 18 nov. 2018
@ xiaomizhou66
Eso no tiene nada que ver con MENOS, ni con este problema. Es puramente una cuestión de CSS. Por favor, busque algo como "css mantener aspecto" y encontrará algunas respuestas.
thany
en 26 nov. 2018
Entonces esto todavía está roto. calc (100vh - 138px) sale a -38px.
willatathena
en 15 mar. 2019
@willatathena
Si experimenta este problema con Less 3.x, cree un informe de error por separado.
Para versiones anteriores de Less, este es el comportamiento esperado de forma predeterminada (lea las publicaciones anteriores para saber cómo manejarlo).
seven-phases-max
en 16 mar. 2019
Temas relacionados
Oskariok
·
6Comentarios
MarkSG93
·
4Comentarios
joe223
·
4Comentarios
BrianMulhall
·
4Comentarios
heavyk
·
3Comentarios
Comentario más útil
probablemente se cerraron como duplicados ... aunque no puedo encontrar uno sobre calc ... ver # 146 # 122 y # 915
solución alternativa:
width: ~"calc(100% - @{id1width})";- observe los corchetes alrededor de la variable.Nos estamos moviendo a un sistema en el que solo se evaluarán las cosas entre corchetes para solucionar este problema.