Forum : SASS, ajouter les classes entre elles, c est possible ?

Bonjour
Je découvre SASS et ses possibilité mais je n arrive pas à trouver la réponse à une question simple...

Ce que je veux

J aimerais savoir si l on peut ajouter les propritétés des classes en appellant les classes par leur nom.

par exemple :

.class1 {
border:red;
}
.classe2 {
color:pink;
}
.class3{
class1 + class2
}

ainsi .class3 afficherait border:red; color:pink

Cela est il possible ? Si oui quelle est la bonne syntaxe ?

Merci pour votre aide

popotte

Alors le moyen serait d'utiliser @extend

    .class1 {
          border:red;
      }
      .classe2 {
          color:pink;
      }
      .class3 {
        @extend class1;
        @extend class2;
      }

Newbie

Auteur

Merci pour cette réponse mais j avais regardé de ce côté et à moins que je n ai pas comrpis ce que j ai lu ici
je détaille l exemple qui est sur ce site avec leur commentaires

.half-red {
    color: rgba(red, .5);
}

.message-error {
    color: red;
    @extend .half-red;
}

donne ça comme résultat :

.half-red, .message-error {
    color: rgba(255, 0, 0, 0.5);
}

.message-error {
    color: red;
}

alors que moi j aurais souhaité obtenir ça :

/* NB: ceci n’est pas ce que vous obtiendrez */
.message-error {
    color: red;
    color: rgba(255, 0, 0, 0.5);
}

MickaelTD

Hello,

Je comprend pas trop pk tu veux

.message-error {
    color: red;
    color: rgba(255, 0, 0, 0.5);
}

Sachant que color: rgba(255, 0, 0, 0.5);
Va annuler color: red;
C'est tjrs la dernière propriété quand il y a les 2 meme dans la class qui à raison.

Si c'est juste pour une propriété color autant faire une variable à mon avis, si c'est un truc que tu vas répéter partout fait une mixin eventuellement et tu @include redColor.

J'imagine que l'idée c'était de pas avoir à réecrire la propriété, mais quand tu regardes bien

@include redColor;
vs
@extend .half-red;
vs
color: $maVariable;

ce que tu écris à au final quasiment la meme longueur.

SASS, ajouter les classes entre elles, c est possible ?

3 réponses