Spartacus CCV2 How header Sass placeholder is processed

0
votes

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

2
spartacus-storefront

2 Answers

3
votes

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

2
votes

The header placeholder is placed in an array of layout placeholders in the index.scss file for the layout folder.

$layout-components-whitelist: cx-storefront, header, cx-site-context-selector,
  cx-skip-link !default;

This scss array is imported in _component.scss which you can see here _component.scss. This file has a loop that will dynamically extend the placeholders for all of the default Spartacus styles.

@each $selector in $selectors {
  #{$selector} {
    // skip selectors if they're added to the $skipComponentStyles list
    @if (index($skipComponentStyles, $selector) == null) {
      @extend %#{$selector} !optional;
      // optional theme specific placeholder
      @extend %#{$selector}-#{$theme} !optional;
    }
  }
}