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

Par Newbie, il y a 4 ans

Les bases HTML/CSS

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

3 réponses

popotte, il y a 4 ans

Alors le moyen serait d'utiliser @extend

.class1 { border:red; } .classe2 { color:pink; } .class3 { @extend class1; @extend class2; }
Newbie, il y a 4 ans

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, il y a 4 ans

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.