Comment étendre les sélecteurs dans les requêtes Sass Media ?

Extension des sélecteurs dans les requêtes multimédias avec Sass

Question :

On souhaite intégrer . élément dans .item.compact lorsque l'écran se contracte, mais Sass renvoie une erreur lors de la tentative d'extension à l'aide de @media. Comment y parvenir sans reproduire les styles ?

Réponse :

Malheureusement, Sass interdit l'extension des sélecteurs externes à partir des requêtes multimédias. La restriction nécessite des approches alternatives :

1. Utilisation d'un mixin :

Définissez un mixin réutilisable qui encapsule les styles souhaités. À la fois à l'intérieur et à l'extérieur des requêtes multimédias, étendez ce mixin :

@mixin compact {
    // Styles for compact items
}

%compact {
    @include compact;
}

// Usage
.item {
    @extend %compact;
}

@media (max-width: 600px) {
    .item {
        @include compact;
    }
}

2. Imbrication d'extensions dans une requête multimédia :

Cette approche permet d'étendre les sélecteurs définis en dehors des requêtes multimédias :

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

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

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

.bar {
  @extend %bar;
}

3. En attente de la mise à jour de Sass :

Des discussions concernant cette restriction sont en cours. La mise en œuvre d'une solution peut nécessiter une modification de la syntaxe ou des fonctionnalités Sass.

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!