瀏覽器中的 Sass

Natalie Weizenbaum 發佈於 2023 年 7 月 7 日

在 Sass 的發展過程中，我們看到許多我們率先推出的功能都被瀏覽器採用。像是CSS 變數、數學函式，以及最近的巢狀語法，這些都受到了 Sass 的啟發。但以往從未能在瀏覽器中直接以編譯器的形式運行 *Sass 本身*……直到 現在。

隨著 Dart Sass 1.63 的發佈，我們正式在 sass npm 套件中新增了直接在瀏覽器中運行的支援。現在，程式碼遊樂場或網頁 IDE 的開發者不再需要透過伺服器呼叫來編譯 Sass。您只需載入它，即可直接在您的網頁上 使用。

事實上，您現在就可以試試看！只需打開您的開發者主控台並執行以下 程式碼：

const sass = await import('https://jspm.dev/sass');
sass.compileString('a {color: #663399}');

我還能如何使用它？我還能如何使用它？ 永久連結

我們已盡最大努力確保 Sass 在瀏覽器中的使用方式盡可能多元。它可以透過 CommonJS require() 和 ES6 import 載入。它可以由打包工具載入（我們已使用 esbuild、Rollup、Vite 和 webpack 進行測試），或者可以直接在瀏覽器中載入，無需任何 打包。

唯一需要注意的是，它確實依賴於 Immutable 函式庫，因此如果您在不使用任何打包工具的情況下使用它，則需要設定 import map，以便它可以找到該依賴項。但如果您使用的是打包工具或像 JSPM 這樣的 CDN 來引入依賴項，則無需擔心 這個問題。

Dart Sass README 提供了更詳細的資訊，說明如何在瀏覽器中以各種支援的方式啟動和運行 Dart Sass。

有哪些可用的 API？有哪些可用的 API？ 永久連結

我們已盡力讓盡可能多的 JavaScript API 在瀏覽器中可用。自訂函式 和 匯入器 都受到支援，同時也支援完整的 Sass 值 API。但是，有兩類 API 在瀏覽器中無法 使用：

  1. 任何需要檔案系統存在的 API。這表示您無法傳入 FileImporter，也表示 compile 和 compileAsync 函式無法使用，因為它們需要檔案路徑。您需要改用 compileString 或 compileStringAsync。

  2. 舊版 JavaScript API。這個 API 僅為了與已棄用的 node-sass 套件 相容而存在。由於 node-sass 從未支援在瀏覽器中運行，而且這個 API 在從檔案系統載入和從其他來源載入之間的區別非常模糊，我們決定完全不在瀏覽器中支援它。

試玩看看試玩看看 永久連結

由於 Sass 現在可以直接在瀏覽器中運行，我們得以在 Sass 網站上新增另一個眾所期待的功能：Sass Playground！這是一種直接在瀏覽器中測試 Sass 的方法，而且由於它與 Sass 網站的部署流程相連，它將始終使用最新版本以及所有最新功能。

您在 Playground 中的樣式表會始終儲存到 Playground 的 URL 中，因此您可以輕鬆地分享樣式表範例或使用它們向 Sass 團隊回報錯誤。快來試試看！

致謝致謝 永久連結

我要感謝 OddBird 的優秀夥伴們讓這一切成為現實，尤其要感謝