Est-il possible dans SASS d'hériter d'une classe dans un autre fichier?

102

La question dit à peu près tout.

Par exemple, si j'utilisais, disons, Twitter Bootstrap , pourrais-je définir des classes dans ma propre feuille de style SASS qui héritent des classes CSS de Bootstrap? Ou l'héritage dans SASS ne fonctionne-t-il que dans le cadre d'un seul fichier?

— Dan Tao
source

180

OUI! c'est possible.

Si vous souhaitez que tous les <button>éléments héritent de la .btnclasse des boutons par défaut de Twitter Bootstrap

Dans votre styles.scssfichier, vous devez d'abord importer _bootstrap.scss:

@import "_bootstrap.scss";

Puis en dessous de l'importation:

button { @extend .btn; }

— agustibr
source

Je me sens mal d'avoir fait cela car les autres réponses ont à peu près répondu à cette question (j'ai juste négligé de revenir pendant un moment, puis j'ai oublié); mais j'accepte votre réponse parce qu'elle est la plus complète - c'est-à-dire qu'elle me guide tout au long du processus. Merci!

— Dan Tao

4

Cela fonctionne-t-il uniquement avec d'autres fichiers SCSS? Ne pouvez-vous pas faire cela avec des fichiers CSS?

— écraser le

1

Soyez prudent lorsque vous utilisez @extendavec bootstrap / n'importe quel framework, car cela peut ne pas fonctionner comme prévu. Il y a certaines choses dont il faut être conscient, comme indiqué dans cet article: stackoverflow.com/questions/30744625/…

— Patrik Affentranger

2

Mais cela ne duplique-t-il pas le CSS de bootstrap.scss, si vous faites cela dans plusieurs fichiers de votre projet?

— fritzmg

1

Est -ce que cette importation l'ensemble bootstrap.cssdans styles.cssou tout simplement .btn? Je veux dire dans le bundle de sortie? S'il importe en entier bootstrap.css, il augmentera styles.cssinutilement la taille de .

— Maverick

8

** Je me trompe peut-être, mais si j'obtiens ce que vous essayez de faire, ne pouvez-vous pas simplement utiliser la @extend .classname;commande à l'intérieur de l'élément que vous souhaitez étendre? Naturellement, vous ne devez modifier votre propre code que pour préserver la possibilité de mise à jour.

— Mark Ernst
source

2

À ma connaissance, vous devez utiliser@import le fichier contenant les classes que vous souhaitez utiliser dans votre fichier SASS afin de les utiliser dans ce fichier. Cependant, je ne suis pas un expert SASS / SCSS, donc quelqu'un peut connaître une autre façon de les utiliser à distance dont je ne suis pas au courant.

— ScottS
source

1

Tout comme la réponse acceptée l'a montré, cela est possible avec @import, mais @import est obsolète par sass

L'équipe Sass décourage l'utilisation continue de la règle @import. Sass le supprimera progressivement au cours des prochaines années, et finira par le supprimer complètement de la langue. Préférez plutôt la règle @use.

La règle @use est mieux adaptée pour une utilisation maintenant, car elle ne pollue pas la portée du module d'importation (utilisateur). Malheureusement, au moment de la rédaction de cet article, la règle d'utilisation n'est implémentée que dans Dart sass.

— ehab
source