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]);
}
}
}
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
, 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.
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: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?