Less.js: La consulta de medios anidada no válida se fusiona con la condición "o", cuando se utiliza una variable para la consulta de medios

Creado en 20 sept. 2016  ·  5Comentarios  ·  Fuente: less/less.js

La consulta de medios no válida se compila cuando se utiliza una variable que contiene una definición de consulta de medios con condiciones OR (ya sea con coma o "o" -la palabra clave). La consulta de medios principales debe anteponerse a cada subconsulta.

Menos:

<strong i="7">@highdpi</strong>: ~"(-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx)";
.bg {
    <strong i="8">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        <strong i="9">@media</strong> <strong i="10">@highdpi</strong> {
            background: url([email protected]);
        }
    }
}

Producción:

<strong i="14">@media</strong> (max-width: 1000px) {
  .bg {
    background: url(bg-small.png);
  }
}
<strong i="15">@media</strong> (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) {
  .bg {
    background: url([email protected]);
  }
}

Resultado esperado - "(ancho máximo: 1000px) y" antes de cada parte separada por comas:

[...]
<strong i="19">@media</strong> (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25), (max-width: 1000px) and (min-device-pixel-ratio: 1.25), (max-width: 1000px) and (min-resolution: 1.25dppx) {
[...]

_Por otro lado, se compila bien, cuando no se usa una variable: _

.bg {
    <strong i="23">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        <strong i="24">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) {
            background: url([email protected]);
        }
    }
}
consider closing feature request needs decision stale

Comentario más útil

Esto es más una solicitud de función que un error. Se supone que Less no entiende lo que hay dentro de esos ~"" (en cualquier lugar , no solo para consultas de medios). Por lo tanto, se espera que Less nunca sepa sobre las comas u otros símbolos especiales allí.

Técnicamente, el código como el anterior ("lista de consultas de medios en una cadena de escape") se parece más a una vieja peculiaridad / solución alternativa de sintaxis en lugar de considerarse un código adecuado (una vez más debido a ~"" sí). En el Less de hoy, el patrón adecuado para lograr lo mismo sería usar conjuntos de reglas / mixins anónimos / separados en lugar de "la variable de valor mágico", por ejemplo:

.highdpi(@rules) {
    <strong i="10">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), 
           (min-device-pixel-ratio: 1.25), 
           (min-resolution: 1.25dppx) {
        @rules();
    }
}

.bg {
    <strong i="11">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        .highdpi({
            background: url([email protected]);
        });
    }
}

o métodos similares.

Relacionado con # 1421 y problemas / solicitudes similares.


Tenga en cuenta que incluso como una solicitud de función (si se propone), esta función tendrá que usar una sintaxis diferente en lugar de ~"" todos modos, es decir, se supone que el ejemplo nunca funciona como se esperaba anteriormente, por lo que no estoy marcando esto como " solicitud de función "(ya que el FR requeriría un poco más de información).

¿Se fusionará con el n. ° 1421, tal vez?

Todos 5 comentarios

Esto es más una solicitud de función que un error. Se supone que Less no entiende lo que hay dentro de esos ~"" (en cualquier lugar , no solo para consultas de medios). Por lo tanto, se espera que Less nunca sepa sobre las comas u otros símbolos especiales allí.

Técnicamente, el código como el anterior ("lista de consultas de medios en una cadena de escape") se parece más a una vieja peculiaridad / solución alternativa de sintaxis en lugar de considerarse un código adecuado (una vez más debido a ~"" sí). En el Less de hoy, el patrón adecuado para lograr lo mismo sería usar conjuntos de reglas / mixins anónimos / separados en lugar de "la variable de valor mágico", por ejemplo:

.highdpi(@rules) {
    <strong i="10">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), 
           (min-device-pixel-ratio: 1.25), 
           (min-resolution: 1.25dppx) {
        @rules();
    }
}

.bg {
    <strong i="11">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        .highdpi({
            background: url([email protected]);
        });
    }
}

o métodos similares.

Relacionado con # 1421 y problemas / solicitudes similares.


Tenga en cuenta que incluso como una solicitud de función (si se propone), esta función tendrá que usar una sintaxis diferente en lugar de ~"" todos modos, es decir, se supone que el ejemplo nunca funciona como se esperaba anteriormente, por lo que no estoy marcando esto como " solicitud de función "(ya que el FR requeriría un poco más de información).

¿Se fusionará con el n. ° 1421, tal vez?

@ seven-phase-max gracias por aclarar esto. Voy a cambiar mi mixin para utilizar otro mixin ".highdpi" en lugar de la variable con cadena de escape.

@ seven-phase-max Creo que hay dos problemas separados / solicitudes de funciones aquí, así que no estoy seguro de si deberíamos fusionarnos con # 1421 sin especificarlos.

  1. Permita que el analizador Less sea más laxo con expresiones y listas. Permitir que las listas estén compuestas por selectores o valores de consulta de medios, por ejemplo. Por lo tanto, el escape de cadenas no tiene por qué ser un requisito cuando se desea convertir una consulta de medios en una variable. (Lo cual es una necesidad común). Este es el # 1421, y el ejemplo de @media podría ser algo más que se agregue a ese problema.
  2. Fusionar listas de valores de consulta de medios anidados (depende de #1 , pero debe tener un pasa / no pasa por separado de #1 . Aunque habiendo hecho eso #1 , #2 es el siguiente paso lógico. Por lo tanto, creo que podemos rastrearlo aquí en el n. ° 2964.

Haciendo referencia al # 3059 aquí, ya que esencialmente es casi el mismo problema. Es decir, básicamente la pregunta es: "¿Podemos permitirnos el reparsing completo de consultas @media y @supports , etc., después de que las variables se sustituyan por sus valores?" (Esto requiere una refactorización importante del analizador en sí mismo para que pueda usarse en una cadena arbitraria en un momento arbitrario, o duplicar el código de análisis en cada Nodo específico y sus funciones eval / css-gen).

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

xblakestone picture xblakestone  ·  3Comentarios

vecerek picture vecerek  ·  5Comentarios

chricken picture chricken  ·  6Comentarios

seven-phases-max picture seven-phases-max  ·  6Comentarios

MarkSG93 picture MarkSG93  ·  4Comentarios