Question

有人知道在Spartacus中如何处理标头组件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;

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

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

标头占位符放置在布局文件夹的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标头Sass占位符的处理方式

2 个答案: