Spartacus CCV2 header Sass占位符是如何处理的答案

【问题标题】：Spartacus CCV2 How header Sass placeholder is processedSpartacus CCV2 header Sass占位符是如何处理的
【发布时间】：2020-03-09 10:44:55
【问题描述】：

有没有人知道Spartacus中header组件sass占位符标签是如何处理的？

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

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

【问题讨论】：

标签： spartacus-storefront

【解决方案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

【讨论】：

【解决方案2】：

标题占位符放置在布局文件夹的 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;
    }
  }
}

【讨论】：