Spartacus CCV2 如何处理 header Sass 占位符

Question

有谁知道 header 组件 sass 占位符标记在 Spartacus 中是如何处理的？

如文件 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;

它只是一个占位符，但它的作用类似于 header 元素选择器。我找不到这个的任何扩展

Answer 1

此占位符的扩展是动态完成的 - 这里是第 42 行：https://github.com/SAP/cloud-commerce-spartacus-storefront/blob/f3c81d4bb04f8c222fc73d3ca1ea099783e1a82f/projects/storefrontstyles/scss/_components.scss

这样做是为了让开发人员跳过特定组件的样式。您可以在这里阅读更多相关信息：https://sap.github.io/cloud-commerce-spartacus-storefront-docs/css-architecture/#skipping-specific-component-styles

Answer 2

header 占位符位于布局文件夹的 index.scss 文件中的布局占位符数组中。

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

此 scss 数组是在 _component.scss 中导入的，您可以在此处查看 _component.scss。该文件有一个循环，可以动态扩展所有默认 Spartacus 样式的占位符。

@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;
    }
  }
}

Spartacus CCV2 如何处理 header Sass 占位符

Spartacus CCV2 How header Sass placeholder is processed

spartacus-storefront