Less.js: Fusion de requête de média imbriquée non valide avec la condition « ou », lorsqu'une variable est utilisée pour la requête de sous-média

Créé le 20 sept. 2016  ·  5Commentaires  ·  Source: less/less.js

Une requête média non valide est compilée lors de l'utilisation d'une variable contenant une définition de requête média avec des conditions OU (avec une virgule ou un mot-clé "ou"). La requête média supérieure doit être ajoutée au début de chaque sous-requête.

Moins:

<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]);
        }
    }
}

Sortir:

<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]);
  }
}

Sortie attendue - "(max-width : 1000px) et " avant chaque partie séparée par des virgules :

[...]
<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) {
[...]

_Par contre, il compile bien, lorsqu'il n'utilise pas de 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

Commentaire le plus utile

Il s'agit plus d'une demande de fonctionnalité que d'un bogue. Less n'est pas censé comprendre ce qu'il y a à l'intérieur de ces ~"" ( n'importe où , pas seulement pour les requêtes multimédias). On s'attend donc à ce que Less ne connaisse jamais de virgules ou d'autres symboles spéciaux là-bas.

Techniquement, le code comme ci-dessus ("liste de requêtes multimédias dans une chaîne échappée") ressemble plus à une ancienne solution de contournement/syntaxe qu'à un code approprié (encore une fois à cause de ~"" lui-même). Dans Less d'aujourd'hui, le bon schéma pour obtenir le même résultat serait d'utiliser des ensembles de règles/mixins anonymes/détachés au lieu de « la variable de valeur magique », par exemple :

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

ou des méthodes similaires.

Lié à #1421 et aux problèmes/demandes similaires.


Notez que même en tant que demande de fonctionnalité (si elle est proposée), cette fonctionnalité devra de toute façon utiliser une syntaxe différente au lieu de ~"" , c'est-à-dire que l'exemple n'est jamais censé fonctionner comme prévu ci-dessus - donc je ne le marque pas comme " demande de fonctionnalité" (car le FR nécessiterait un peu plus de perspicacité).

Fusionner avec le #1421 peut-être ?

Tous les 5 commentaires

Il s'agit plus d'une demande de fonctionnalité que d'un bogue. Less n'est pas censé comprendre ce qu'il y a à l'intérieur de ces ~"" ( n'importe où , pas seulement pour les requêtes multimédias). On s'attend donc à ce que Less ne connaisse jamais de virgules ou d'autres symboles spéciaux là-bas.

Techniquement, le code comme ci-dessus ("liste de requêtes multimédias dans une chaîne échappée") ressemble plus à une ancienne solution de contournement/syntaxe qu'à un code approprié (encore une fois à cause de ~"" lui-même). Dans Less d'aujourd'hui, le bon schéma pour obtenir le même résultat serait d'utiliser des ensembles de règles/mixins anonymes/détachés au lieu de « la variable de valeur magique », par exemple :

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

ou des méthodes similaires.

Lié à #1421 et aux problèmes/demandes similaires.


Notez que même en tant que demande de fonctionnalité (si elle est proposée), cette fonctionnalité devra de toute façon utiliser une syntaxe différente au lieu de ~"" , c'est-à-dire que l'exemple n'est jamais censé fonctionner comme prévu ci-dessus - donc je ne le marque pas comme " demande de fonctionnalité" (car le FR nécessiterait un peu plus de perspicacité).

Fusionner avec le #1421 peut-être ?

@seven-phases-max merci d'avoir éclairci cela. Je vais changer mon mixin pour utiliser un autre mixin ".highdpi" au lieu de la variable avec une chaîne d'échappement.

@seven-phases-max Je pense qu'il y a deux problèmes / demandes de fonctionnalités distincts ici, donc je ne sais pas si nous devons fusionner avec #1421 sans les spécifier.

  1. Permettez à l'analyseur Less d'être plus laxiste avec les expressions et les listes. Autoriser les listes à être constituées de valeurs de requête média ou de sélecteurs, par exemple. Ainsi, l'échappement de chaîne ne doit pas nécessairement être une exigence lorsque vous souhaitez faire d'une requête multimédia une variable. (Ce qui est un besoin courant.) C'est #1421, et l'exemple @media pourrait simplement être quelque chose d'autre ajouté à ce problème.
  2. Fusionner les listes de valeurs de requête de média imbriquées (dépend de #1 , mais devrait avoir une réussite/échec distinct de #1 . Bien que cela ait été fait #1 , #2 est une prochaine étape logique. Donc, je pense que nous pouvons suivre cela ici dans #2964.

Référence #3059 ici, car il s'agit essentiellement du même problème. C'est-à-dire que la question est la suivante : « pouvons-nous nous permettre une analyse complète des requêtes @media et @supports , etc., etc. après que les variables aient été remplacées par leurs valeurs ? » (Cela nécessite soit une refactorisation majeure de l'analyseur lui-même afin qu'il puisse être utilisé sur une chaîne arbitraire à un moment arbitraire, soit la duplication du code d'analyse à chaque nœud spécifique et ses fonctions eval/css-gen).

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.

Cette page vous a été utile?
0 / 5 - 0 notes