Spartacus CCV2 How header Sass placeholder is processed

Question

Does anyone know how the header component sass placeholder tag is processed in Spartacus?

As in file https://github.com/SAP/cloud-commerce-spartacus-storefront/blob/develop/projects/storefrontstyles/scss/components/layout/header/_header.scss

%header {
  background-color: var(--cx-color-dark);
  color: var(--cx-color-inverse);
  display: block;

It’s just a placeholder, but it works like a header element selector. I couldn’t find any extension for this

Answer 1

The extension of this placeholder is done dynamically - here in line 42: https://github.com/SAP/cloud-commerce-spartacus-storefront/blob/f3c81d4bb04f8c222fc73d3ca1ea099783e1a82f/projects/storefrontstyles/scss/_components.scss

It's done this way to allow developers to skip the styling of specific components. Here you can read more about this: https://sap.github.io/cloud-commerce-spartacus-storefront-docs/css-architecture/#skipping-specific-component-styles