Salut Pour réutiliser du code dans plusieurs pages il y a bien @mixin et @include, mais c'est que pour la réutilisation des déclarations. Mais moi le code que je voudrais réutiliser c'est le sélecteur et les déclarations. Existe-t-il une méthode ?

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

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   

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

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" :     ou encore sur celle-ci, sous "extensions et media queries" : https://la-cascade.io/articles/sass-tout-sur-extend      

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 🙂