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