Un code prends le dessus sur plusieurs autres

[schtroumph]

Salut

Je suis sous Joomla 4.4.4 et j'ai une div (avec le même contenu) présente dans plusieurs pages. En responsive, suivant les pages j'ai remarqué que j'ai trois styles de placements des éléments qui reviennent. Pour ne pas dupliquer (voir tripler) les mêmes code j'ai mis dans le fichier _declarations.scss les trois codes correspondant aux différents placements :

 

%licences-tutos-1-ligne {

    grid-template-columns: 274px 95px 110px 95px 105px;
    grid-template-rows: 1fr;
    
        & .titre
            {grid-column:1; grid-row:1;}
        & .img-ccbysa
            {grid-column:2; grid-row:1;}
        & .plus-info-ccbysa
            {grid-column:3; grid-row:1;}
        & .img-lal
            {grid-column:4; grid-row:1;}
        & .plus-info-lal
            {grid-column:5; grid-row:1;}
          
        & .titre p:after {
            content:":";
            margin:0 0 0 10px;
        }
}

%licences-tutos-2-lignes {

    grid-template-columns: 268px 105px 105px;
    grid-template-rows: 1fr auto;
    
        & .titre
            {grid-column:1; grid-row:1 / span 2;}
        & .img-ccbysa
            {grid-column:2; grid-row:1;}
        & .plus-info-ccbysa
            {grid-column:2; grid-row:2;}
        & .img-lal
            {grid-column:3; grid-row:1;}
        & .plus-info-lal
            {grid-column:3; grid-row:2;}
      
        & .titre {align-self:center;}
      
        & .titre p:after {
            content:":";
            margin:0 0 0 10px;
        }
      
        & img {justify-self:center;}
      
        & .plus-info {text-align:center;}
}

%licences-tutos-3-lignes {

    grid-template-columns: repeat(2, 125px);
    grid-template-rows: auto auto auto;
    
        & .titre
            {grid-column:1 / span 2; grid-row:1;}
        & .img-ccbysa
            {grid-column:1; grid-row:2;}
        & .plus-info-ccbysa
            {grid-column:1; grid-row:3;}
        & .img-lal
            {grid-column:2; grid-row:2;}
        & .plus-info-lal
            {grid-column:2; grid-row:3;}
          
        & img {justify-self:center;}

        & .titre p:after {
            content:"";
            margin:0;
        }
      
        & .plus-info {text-align:center;}
}

 

Dans _contenu-modules-tutoriels.scss j'ai mis les codes correspondant à chaque page. Pour la page d'accueil c'est :
 

.page-tous-les-tutos .licences-tutos .custom {
    @extend %licences-tutos-1-ligne;
}

 

Pour le responsive de la première page :

@media (min-width:320px) and (max-width:599px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-3-lignes;
    }
}

@media (min-width:600px) and (max-width:1023px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-2-lignes;
    }
}

@media (min-width:1024px) and (max-width:1180px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-1-ligne;
    }
}

Et c'est là que ça foire. Sur toutes les largeurs d'écrans ce qui est pris en compte c'est :
 

@extend %licences-tutos-3-lignes;

 

J'ai fait deux tests.

 

• Test 01 : j'ai modifié la couleur du titre de cette div suivant la largeur (les codes ont été mis dans les mêmes fichiers). La modification est bien prise en compte suivant la largeur.
• Test 02 : dans _contenu-modules-tutoriels.scss, à la place de "@extend...", j'ai mis le code complet. Les placements, suivant la largeur, est bien prise en compte.

 

J’espère que j'ai été clair dans mes explications

 

 

 

 

[Dan]

Hello,

 

Selon moi, une explication peut se trouver sur la page suivante :

https://zestedesavoir.com/tutoriels/672/reprenez-le-controle-de-vos-feuilles-de-style-avec-sass/plus-loin-avec-sass/lheritage-avec-extend/

 

... dans le paragraphe "Héritage & Media-queries" :

 

Citation

 

Héritage & Media-queries

En effet, lorsqu’une classe .x hérite d’une classe .y, Sass va ajouter le sélecteur de .x partout où il trouvera.y, et il ne fera rien d’autre. Ainsi, imaginons le code suivant :

1 2 3 4 5 6 7 8

%agrume { color:red; } .mandarine { @media (min-width: 720px){ @extend %agrume; } }

Il est important que vous compreniez que ce code ne peut pas fonctionner. On pourrait s’attendre à obtenir ceci :

1 2 3 4 5

@media (min-width: 720px) { .mandarine { color:red; } }

Mais ça, c’est ce qui se passerait si on avait utilisé un mixin. Avec un placeholder, c’est très différent : Sass cherche où il peut trouver le sélecteur %agrume pour le remplacer par le sélecteur .mandarine. Sauf qu’il voit bien que l’élément .mandarine est à l’intérieur d’une media-query, alors que %agrume est à l’extérieur de celle-ci. Il ne va pas déplacer l’élément %agrume à l’intérieur de la media-query, parce que ce n’est pas comme cela que fonctionne l’héritage. On a donc droit à une erreur de compilation. En bref, l’héritage et les media-queries ne font pas bon ménage.

 

 

ou encore sur celle-ci, sous "extensions et media queries" :

https://la-cascade.io/articles/sass-tout-sur-extend

 

 

Citation

 

Extensions et media queries

L’un des principaux problèmes avec @extend est son incompatibilité avec la directive @media : impossible d’étendre à l’intérieur de @media un sélecteur défini à l’extérieur. Malheureusement, Sass ne permet pas les extensions cross-media.

.important {
  font-weight: bold;
}

@media (max-width: 767px) {
  .message-error {
    @extend .important;
  }
}

Vous obtiendrez le message d’erreur suivant :

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.

Cela est dû au fait que @extend fonctionne en déplaçant les sélecteurs, pas les règles CSS, comme nous l’avons vu tout à l’heure au sujet de l’ordre des sources. Si Sass le permettait, alors l’extension d’un sélecteur situé dans un autre media query donnerait quelque chose comme cela :

.règle, @media(max-width: 767px) { .autre-règle }, .encore-une-autre-règle {
  /* ... */
}

...ce qui n’est clairement pas du CSS valide.

Ceci étant, les développeurs de Sass sont tout à fait conscients du problème, comme le montre le nombre d’occurrences sur leur repo : #501, #640, #915, #1050, #1083.

Il est donc très probable qu’une solution soit proposée bientôt. Si l’on en croit ce commentaire de Nex3 (un des principaux développeurs de Sass), ce serait une mixin interpolation.

Bonnes pratiques

En résumé, voici ce que j’appellerais les bonnes pratiques d’@extend.

• Vérifiez que le sélecteur étendu est présent, une seule fois, dans la feuille de style.
• Évitez d’étendre depuis des sélecteurs imbriqués.
• Évitez d’enchaîner les directives @extend.
• N’essayez pas d’étendre à l’intérieur d’un media query, ça ne marchera pas.

 

•  

[schtroumph]

Merci pour ton aide et les liens. Je vais lire tous ça et revoir mon code.

Edited May 31 by schtroumph

[Dan]

Je ne suis pas bien calé en CSS, mais j'avais lu un jour quelque chose à ce sujet.

Je l'ai retrouvé par hasard au fin fond de ma mémoire 

 

[schtroumph]

Ca m'arrange bien que tu l'ai retrouvé