Comment pouvez-vous étendre les sélecteurs dans les requêtes multimédias dans Sass ?

Extension des sélecteurs à l'aide de requêtes multimédias dans Sass

Lorsque vous travaillez avec Sass, vous avez souvent besoin d'étendre les sélecteurs à partir des requêtes multimédias. Cela peut être utile pour appliquer différents styles aux éléments en fonction de leur taille ou de leur orientation. Cependant, Sass a une limitation selon laquelle vous ne pouvez pas étendre un sélecteur externe à partir d'une requête multimédia.

Dans l'exemple de code fourni :

<code class="scss">.item { ... }
.item.compact { /* styles to make .item smaller */ }

@media (max-width: 600px) {
  .item { @extend .item.compact; }
}</code>

Cette approche entraîne une erreur car Sass ne peut pas composer le sélecteur pour vous. Plus précisément, vous ne pouvez pas être à l'intérieur d'une requête média et étendre quelque chose qui en est à l'extérieur.

Approches alternatives

En raison de cette limitation, vous disposez de plusieurs alternatives :

Utiliser les mixins

Créer un mixin et une classe d'extension pour réutiliser le code à l'intérieur et à l'extérieur des requêtes média :

<code class="scss">@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 30em) {
    .bar {
        @include foo;
    }
}</code>

Extension du sélecteur depuis l'extérieur

Bien qu'elle ne soit pas directement applicable au cas d'utilisation donné, cette méthode vous permet pour étendre un sélecteur au sein d'une requête média depuis l'extérieur :

<code class="scss">%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}</code>

En cours Discussions

Il y a des discussions actives concernant cette limitation dans la communauté Sass. Les utilisateurs ont exprimé leur désir de bénéficier de cette fonctionnalité et les responsables réfléchissent aux moyens de la mettre en œuvre efficacement. Cependant, aucune solution définitive n’a encore été trouvée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!