Formation Prestashop intégrateur: Sass / @extend - Limites d'utilisation.

Vous êtes ici : Accueil / Prestashop intégrateur / Sass / @extend - Limites d'utilisation.


@extend - Limites d'utilisation.

Il y a des limitations à l'utilisation de @extend, en particulier avec l'utilisation de directives CSS comme @media.

Vous devez déclarer vos sélecteurs et les utiliser à l'intérieur d'une même directive.

Exemple Valide en SCSS :

@media print {
  .error {
    background-color: #fdd;
    border: 1px #f00;
  }

  .serious-error {
    @extend .error;
    border-width: 3px;
  }
}

Exemple NON Valide en SCSS :

.error {
  background-color: #fdd;
  border: 1px #f00;
}

@media print {
  .serious-error {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}