0

有谁知道 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;

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

4

2 回答 2

3

此占位符的扩展是动态完成的 - 在第 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

于 2020-03-09T11:03:49.690 回答
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;
    }
  }
}
于 2020-03-09T11:08:15.373 回答