Eine ungültige Medienabfrage wird kompiliert, wenn eine Variable verwendet wird, die eine Medienabfragedefinition mit ODER-Bedingungen enthält (entweder mit Komma oder "oder"-Schlüsselwort). Die oberste Medienabfrage sollte jeder Unterabfrage vorangestellt werden.
Weniger:
<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]);
}
}
}
Ausgabe:
<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]);
}
}
Erwartete Ausgabe - "(max-width: 1000px) und " vor jedem durch Kommas getrennten Teil:
[...]
<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) {
[...]
_Auf der anderen Seite lässt es sich gut kompilieren, wenn keine Variable verwendet wird:_
.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]);
}
}
}
Dies ist eher eine Funktionsanfrage als ein Fehler. Less soll nicht verstehen, was sich in diesen ~""
( überall , nicht nur für Medienabfragen) befindet. Es wird also erwartet, dass Less dort keine Kommas oder andere Sonderzeichen kennt.
Technisch gesehen ist der Code wie oben ("Liste von Medienabfragen in einem Escape-String") eher ein alter Quirk/Syntax-Workaround als jemals als richtiger Code angesehen (wiederum wegen ~""
selbst). Im heutigen Less wäre das richtige Muster, um dasselbe zu erreichen, anonyme / getrennte Regelsätze / Mixins anstelle der "magischen Wertvariablen" zu verwenden, z.
.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]);
});
}
}
oder ähnliche Methoden.
Bezogen auf #1421 und ähnliche Probleme/Anfragen.
Beachten Sie, dass diese Funktion selbst als Feature-Anfrage (falls vorgeschlagen) sowieso eine andere Syntax anstelle von ~""
muss, dh das Beispiel soll nie wie oben erwartet funktionieren - daher markiere ich dies nicht als " Feature Request" (da die FR etwas mehr Einblick erfordern würde).
Vielleicht mit #1421 zusammenführen?
@seven-phases-max danke für die Aufklärung. Ich werde mein Mixin ändern, um ein anderes ".highdpi" -Mixin anstelle der Variablen mit Escape-String zu verwenden.
@seven-phases-max Ich denke, es gibt hier zwei separate Probleme / Funktionsanforderungen, daher bin ich mir nicht sicher, ob wir zu # 1421 zusammenführen sollten, ohne diese anzugeben.
#1
, sollten aber einen separaten Pass / Fail von haben #1
. Obwohl getan zu haben , dass #1
, #2
ist ein logischer nächster Schritt, also denke ich, dass wir das hier in #2964 verfolgen können.Verweise hier auf #3059, da es sich im Wesentlichen um das gleiche Problem handelt. Dh im Grunde ist die Frage: "Können wir es uns leisten, @media
und @supports
Abfragen usw. usw. mit vollem Funktionsumfang zu analysieren , nachdem Variablen durch ihre Werte ersetzt wurden?" (Dies erfordert entweder eine umfassende Umgestaltung des Parsers selbst, damit er zu einem beliebigen Zeitpunkt für eine beliebige Zeichenfolge verwendet werden kann, oder das Duplizieren des Parsing-Codes an jedem spezifischen Knoten und seinen eval/css-gen-Funktionen).
Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität hatte. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.
Hilfreichster Kommentar
Dies ist eher eine Funktionsanfrage als ein Fehler. Less soll nicht verstehen, was sich in diesen
~""
( überall , nicht nur für Medienabfragen) befindet. Es wird also erwartet, dass Less dort keine Kommas oder andere Sonderzeichen kennt.Technisch gesehen ist der Code wie oben ("Liste von Medienabfragen in einem Escape-String") eher ein alter Quirk/Syntax-Workaround als jemals als richtiger Code angesehen (wiederum wegen
~""
selbst). Im heutigen Less wäre das richtige Muster, um dasselbe zu erreichen, anonyme / getrennte Regelsätze / Mixins anstelle der "magischen Wertvariablen" zu verwenden, z.oder ähnliche Methoden.
Bezogen auf #1421 und ähnliche Probleme/Anfragen.
Beachten Sie, dass diese Funktion selbst als Feature-Anfrage (falls vorgeschlagen) sowieso eine andere Syntax anstelle von
~""
muss, dh das Beispiel soll nie wie oben erwartet funktionieren - daher markiere ich dies nicht als " Feature Request" (da die FR etwas mehr Einblick erfordern würde).Vielleicht mit #1421 zusammenführen?