web-dev-qa-db-fra.com

MOINS CSS définir des variables dans une requête multimédia?

Je travaille sur un site Web spécifique à l'iPad. Pour que mon site Web fonctionne à la fois sur l'iPad à écran rétinien et sur les anciennes versions d'iPad, je souhaite définir une variable dans MOINS CSS dans la requête multimédia, comme: 

@media all and (max-width: 768px) {
    @ratio: 1;
}

@media all and (min-width: 769px) {
    @ratio: 2;  
}

Alors, quand vous définissez quelque chose en pixels, vous pouvez faire

width: 100px * @ratio;

Mais j'ai eu une erreur de compilation en disant @ratio n'est pas défini. Est-il possible d'avoir une solution de contournement pour le faire fonctionner? Merci.

csslessmedia-queriesretina-display
43
Sean

Ce serait bien, mais c'est impossible de faire comme ça.

LESS compile vos requêtes multimédia en requêtes multimédia réelles. Par conséquent, au moment de la compilation, aucune information sur la requête multimédia qui sera pertinente pour le navigateur.

Après la compilation, vous n'avez pas moins de CSS, vous ne pouvez donc plus avoir de variables.

Vous pouvez le faire à la place mais ce n’est pas aussi élégant:

@base_width: 100px;

@media all and (max-width: 768px) {
    .something {
        width: @base_width;
    }
}

@media all and (min-width: 769px) {
    .something {
        width: @base_width * 2;
    }
}
43
Paulpro

Je sais que je suis en retard avec ma réponse mais quelqu'un peut trouver cela utile.

Vous pouvez déplacer vos styles dans un fichier séparé

// styles.less
.foo {
  width: 100px * @ratio;
}

Et puis importez le fichier plusieurs fois après avoir changé les valeurs des variables

// main.less
@ratio: 1; // initial value

@media all and (max-width: 768px) {
  @ratio: 1;
  @import (multiple) "styles";
}

@media all and (min-width: 769px) {
  @ratio: 2;
  @import (multiple) "styles";
}

Notez que (multiple) est important ici

Le code compilé ressemblera à ceci

// main.css
@media all and (max-width: 768px) {
  .foo {
    width: 100px;
  }
}
@media all and (min-width: 769px) {
  .foo {
    width: 200px;
  }
}
10
Peter Dvukhrechensky

C'est un peu bidon, mais une solution possible consiste à définir la taille de la police d'un élément wrapper et à définir toutes les unités sur em:

HTML: 

<div id="wrap">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

MOINS: 

#wrap 
    {
    font-size: 100px;
    width: 10em; // = 1000px;
    @media all and (max-width: 768px)
        {
        font-size: 60px;
        }
    .child1
        {
        width: 5em; // 500px normally, 300px on small screens
        }
    .child1
        {
        width: 2.5em; // 250px normally, 150px on small screens
        }
    }

Cela ne fonctionne bien sûr pas si vous avez des éléments contenant du texte ET des enfants.

1
Manuel Ebert

Pour ceux qui pourraient autoriser uniquement la prise en charge de navigateurs relativement modernes (Chrome 49+, FF 31+, pas d’IE), vous pouvez utiliser css variables .

Voici support table du navigateur de "Puis-je utiliser".

html {
    --width-var: 300px;

    @media only screen and (max-width: 750px) {
        --width-var: 200px;
   }
}

.your-class {
    max-width: calc( var(--width-var) * 2 );
    .... // tons of other props
}

Avec le code ci-dessus, chaque fois que l'écran est inférieur à 750 pixels, la propriété max-width de .your-class est recalculée (puisque --width-var est modifié) et bien sûr, lorsque l'écran est redimensionné pour être plus grand - la variable css revient à sa valeur d'origine.

1
Artyom Pranovich

MOINS ne peut actuellement pas faire cela, bien qu’il serait techniquement possible de le faire. Cette fonctionnalité a été demandée dans le numéro de GitHub intitulé Moins de variables dans les requêtes de média .

Voir aussi cette question: Pré-processeur CSS avec possibilité de définir des variables dans une requête @media

1
Flimm

J'ai trouvé que la solution acceptée ne fonctionnait pas, car le compilateur se plaindrait que le mixin n'était pas défini. Une solution alternative:

@base_width: 100px;

.mixin {
    width: @base_width;

    @media all and (min-width: 769px) {
        width: @base_width * 2;
    }
}
0
Rijk