在 Angular 中，組件的 CSS 樣式被封裝進了自己的視圖中，而不會影響到應用程序的其它部分。

通過在組件的元數據上設置視圖封裝模式，你可以分別控制每個組件的封裝模式。 可選的封裝模式一共有如下幾種：

• ShadowDom 模式：使用瀏覽器原生的 Shadow DOM 實現，可以參閱 MDN 上的 Shadow DOM 文檔來為組件的宿主元素附加一個 Shadow DOM。

組件的視圖被附加到這個 Shadow DOM 中，組件的樣式也被包含在這個 Shadow DOM 中。

記憶方式：不進不出，沒有樣式能進來，組件樣式出不去。)

• Emulated 模式（默認值）通過預處理（并改名）CSS 代碼來模擬 Shadow DOM 的行為，以達到把 CSS 樣式局限在組件視圖中的目的。

只進不出，全局樣式能進來，組件樣式出不去。

你可以使用同樣的方式來操作 Shadow DOM，就和操作常規 DOM 一樣——例如添加子節點、設置屬性，以及為節點添加自己的樣式（例如通過 element.style 屬性），或者為整個 Shadow DOM 添加樣式（例如在 style 元素內添加樣式）。不同的是，Shadow DOM 內部的元素始終不會影響到它外部的元素（除了 :focus-within），這為封裝提供了便利：

注意，不管從哪個方面來看，Shadow DOM 都不是一個新事物——在過去的很長一段時間里，瀏覽器用它來封裝一些元素的內部結構。以一個有著默認播放控制按鈕的 元素為例。你所能看到的只是一個 標簽，實際上，在它的 Shadow DOM 中，包含來一系列的按鈕和其他控制器。Shadow DOM 標準允許你為你自己的元素（custom element）維護一組 Shadow DOM。

那么，SAP Spartacus 使用了本文目前為止提到的這些 Shadow DOM 機制了嗎？

先了解 SAP Spartacus CSS 的設計原理。

Spartacus 作為一組標準組件提供，這些組件分布在 npm 庫中。 這些庫有助于確保 Spartacus 同時保持可擴展性和可升級性。

為了提供盡可能多的樣式靈活性，所有 CSS 規則都在單獨的 @spartacus/styles 庫中提供。 這使得樣式完全可選、可配置和可擴展。 您可以擴展或替換標準樣式，也可以實現您自己的樣式規則。

此外，現有的 UI 框架（例如 Bootstrap）可以在 Spartacus 中使用，而不會使其成為硬編碼依賴項。

SAP Spartacus Style 版本機制

Spartacus 庫支持語義版本控制，這意味著在主要版本的生命周期中不允許進行重大更改。對于樣式庫也是如此。會導致 UI 體驗差異的新樣式規則或調整后的規則被視為重大更改。Spartacus 庫的發布假設客戶依賴于語義版本控制方案，因此在主要版本的生命周期中不會進行重大更改，例如對樣式庫的隱式更改。

同時，Spartacus 很可能會從一個小版本進化到下一個。為允許樣式層中的逐漸更改，為特定版本添加了新的或調整后的樣式規則，但除非您明確選擇接收這些更改，否則這些更改不會添加到樣式構建過程中。您需要設置一個變量以利用最新的突破性樣式更改。請注意，無論如何都會添加非破壞性更改。

以下示例說明了 2.2 版的附加樣式：

cx-mini-cart {@include forVersion(2.1) {background: blue;}@include forVersion(2.2) {background: deepskyblue;} }

SAP Spartacus CSS 技術

Spartacus 是結合以下 CSS 技術開發的：

• SASS，用作預處理語言，就像在當今大多數 UI 框架中一樣。
• CSS 自定義屬性，用于全局主題。
• CSS post 處理，旨在用于填充舊瀏覽器所需的任何語法。

SAP Spartacus 并未使用本文之前介紹的任何一種 Shadom DOM 實現技術。Angular 的模擬封裝無法使用，因為組件樣式是由樣式庫提供的。 BEM 被認為是老式和復雜的。 此外，定義明確、細粒度的組件架構不需要 BEM 來封裝樣式。

全局主題

全局主題是用變量組織的，因此主題不是硬編碼的。 對于變量，您可以使用兩種常用方法：

• SASS 變量
• CSS 自定義屬性（換句話說，CSS 變量）。

Spartacus 使用 CSS 變量進行主題化。 CSS 變量具有運行時可配置的優點。 而且，它們可以穿透shadow DOM（即web組件）。 此外，CSS 變量是繼承的，并且比 SASS 變量提供更大的靈活性。

主題變量有助于 Spartacus 向客戶提供的所謂“合約”。 該合約旨在保持穩定，并且應該很少更改。只有在主要版本中，Spartacus 才能引入一組新變量，但這不被視為最佳實踐。

為了提供一組穩定的變量，Spartacus 中的 CSS 變量主要用于配色方案和字體定義。 這些可以被認為是一組全局主題定義。

下面是 css 變量的一個例子：

:root {--cx-color-primary: red; }cx-link {color: var(--cx-color-primary); }

CSS 變量可以在文檔的根或特定的選擇器上進行定制。

Component Styles

Spartacus 包含大量可用于構建店面體驗的組件。雖然商業可能是一種商品，但造型本質上是一個主觀主題。不僅是顏色和字體的選擇，還有組件的空間，以及背景、線條等。

無論 Spartacus 提供什么，它都不能代表您的品牌或企業形象。出于這個原因，Spartacus 具有高度的靈活性，因此您可以擴展組件樣式，或者完全跳過它們。

由于 Spartacus 組件是在庫中構建和分發的，因此無法使用組件樣式, 因為 Component 和 style 的定義，在 Spartacus 里是分開的。這些樣式將被預處理并烘焙到組件庫中。這意味著 CSS 規則不是可選的，也不是很容易定制的。

取而代之的是，在樣式庫中可選擇提供組件樣式。您可以使用這些樣式、擴展它們或完全跳過它們并從頭開始構建 CSS 規則。樣式庫和組件庫之間的契約是通過（唯一的）組件選擇器完成的。

Placeholder Selectors

為了使樣式庫中提供的 CSS 規則完全可選，樣式被包裝在占位符選擇器中。 占位符選擇器是一種以百分比開頭的 SASS 技術，例如 %cx-mini-cart。 占位符選擇器不會添加到最終的 CSS 中。相反，它們需要顯式被擴展，以最終出現在最終的 CSS 中。

以下是使用占位符選擇器的組件樣式示例：

%cx-link {a {display: inline;padding: 0;margin: 0;color: currentColor;display: block;} }

雖然可以安全地導入占位符選擇器，但只有明確使用它才會影響最終的 CSS。

這些占位符選擇器，只有被真正的擴展時，才會出現在最后的 css 里。

因此，樣式可以擴展如下：

cx-link {@extend %cx-link !optional;a {color: red;} }

!optional 的含義：

可選標志確保代碼不會在構建期間中斷，只要特定導入不是導入樣式的一部分。

Spartacus 通過迭代配置的組件選擇器來生成組件。

Skipping Specific Component Styles

組件樣式是可選的，因為它們是從樣式庫中提取的。 因此，您可能希望完全禁用某些標準組件樣式。 要禁用標準組件樣式，您可以將組件選擇器添加到 $skipComponentStyles 列表。 以下是演示從樣式庫中跳過兩個標準組件的示例：

$skipComponentStyles: (cx-product-carousel, cx-searchbox);

---

2022-4-6 更新

在 global 的 style.scss 里添加如下代碼：

$skipComponentStyles: (header, cx-media, cx-banner, cx-category-navigation); @import '~@spartacus/styles/index';

---

如果您需要從頭開始創建樣式并且不想覆蓋來自 Spartacus 樣式庫的特定樣式規則，則跳過特定的組件樣式可能會有所幫助。

Page Layout Styles

全局主題和組件樣式對于在頁面上呈現組件最重要。 但是，在頁面上編排組件的整體布局是另一個重要的樣式層。 有關此圖層的更多信息，請參閱頁面布局。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP Spartacus 的 CSS 架构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。