Less.js: Ungültige verschachtelte Medienabfragezusammenführung mit "oder"-Bedingung, wenn eine Variable für die Untermedienabfrage verwendet wird

Erstellt am 20. Sept. 2016  ·  5Kommentare  ·  Quelle: less/less.js

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]);
        }
    }
}
consider closing feature request needs decision stale

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.

.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?

Alle 5 Kommentare

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. Lassen Sie den Less-Parser bei Ausdrücken und Listen lockerer vorgehen. Erlauben Sie zum Beispiel, dass Listen aus Media-Query-Werten oder Selektoren bestehen. Das String-Escapen muss also nicht zwingend erforderlich sein, wenn Sie eine Medienabfrage zu einer Variablen machen möchten. (Was ein häufiges Bedürfnis ist.) Dies ist #1421, und das @media- Beispiel könnte nur etwas anderes sein, das diesem Problem hinzugefügt wird.
  2. Merge - Listen von verschachtelter Medienabfrage Werten (abhängig von #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.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen