Cross-referencing CSS class within another CSS class to inherit properties

With SCSS/SASS one would use @extend and then call the other CSS class.


  • I want to create a new class for let's say “chat-bubbles”

    • These "chat-bubbles" should have a shadow.

      • But I already have created a consistent shadow class that I use all over the site "shadow-small"

        • So I want to inherit/cross-reference the shadow from the existing class “shadow-small” instead of recreating and updating the box shadow manually in "chat-bubbles".

          • In the end, I just add the class "chat-bubbles" to my element and the shadow comes with it, without having to add "shadow-small" to the element as well.

✅ Meaning, I only want to apply one single class to each chat bubble element: chat-bubbles

❌ I don’t want to apply two classes to each element: chat-bubbles AND shadow-small

Why? This is the best type of architecture for maintaining and updating a consistent design system.

That's why SCSS/SASS allow this in the first place.

  • Ravi Tharuma
  • Jan 11 2024