首頁>編程相關>其他源碼
下載

節點 sass

警告： Node Sass 已達到生命週期終點。即使是安全修復，它也不會再收到任何版本。仍在使用它的項目應該轉移到 Dart Sass。

節點版本支援政策

  1. 支援的 Node.js 版本因版本而異，請參閱版本頁面。

  2. 生命週期結束的 Node 版本 https://github.com/nodejs/Release 將在每個 node-sass 版本（主要、次要）中不再支援。

  3. 我們將停止為不支援的版本建立二進位文件，測試依賴項相容性的破壞，但我們不會阻止那些想要支援自己的人的安裝。

  4. 新節點的發布需要較小的內部變更以及 CI 提供者（AppVeyor、GitHub Actions）的支援。我們將開設一期供有興趣的各方訂閱，並關閉其他期。

以下是 Node-sass 支援的最低和最高版本的快速指南：

NodeJS支援的node-sass版本節點模組
節點20 9.0+ 115
節點19 8.0+ 111
節點18 8.0+ 108
節點17 7.0+，<8.0 102
節點16 6.0+ 93
節點15 5.0+，<7.0 88
節點14 4.14+，<9.0 83
節點13 4.13+，<5.0 79
節點12 4.12+，<8.0 72
節點11 4.10+，<5.0 67
節點10 4.9+，<6.0 64
節點8 4.5.3+，<5.0 57
節點<8 <5.0 <57


Node-sass 是一個函式庫，提供 Node.js 到 LibSass 的綁定，LibSass 是流行樣式表預處理器 Sass 的 C 版本。

它允許您以令人難以置信的速度將 .scss 檔案本地編譯為 css，並透過連接中間件自動編譯。

在 npm 上找到它：https://www.npmjs.com/package/node-sass

在 Twitter 上關注 @nodesass 以獲取發布更新：https://twitter.com/nodesass

安裝

npm 安裝node-sass

一些用戶報告由於node被註冊到另一個軟體包而在 Ubuntu 上安裝時出現問題。依照 NodeJS 官方文件安裝 NodeJS，以便#!/usr/bin/env node正確解析。

在 Windows 機器上編譯需要 node-gyp 先決條件。

您是否看到以下錯誤？查看我們的故障排除指南。 

SyntaxError: Use of const in strict mode.

安裝遇到問題？查看我們的故障排除指南。

在中國從鏡像安裝

npm install -g mirror-config-china --registry=https://registry.npmmirror.com
npm 安裝node-sass

用法

var sass = require('node-sass');sass.render({
  檔案：scss_檔名，
  [, options..]}, function(err, result) { /*...*/ });// ORvar result = sass.renderSync({
  資料：scss_內容
  [， 選項..]}）;

選項

文件

  • 類型： String

  • 預設值： null

特殊：必須指定file或data

供 LibSass 編譯的文件的路徑。

數據

  • 類型： String

  • 預設值： null

特殊：必須指定file或data

要傳遞給 LibSass 編譯的字串。建議您將includePaths與此結合使用，以便 LibSass 在使用@import指令時可以找到檔案。

導入程序 (>= v2.0.0) -實驗性

這是一個實驗性 LibSass 功能。謹慎使用。

  • 類型： Function | Function[]簽章function(url, prev, done)

  • 預設值： undefined

功能參數及資訊：

  • url (String) - LibSass 遇到的 import as-is路徑

  • prev (String) - 先前解析的路徑

  • done (Function) - 在非同步完成時呼叫的回呼函數，採用包含下列內容的物件文字

    • file (String) - LibSass 使用的備用路徑OR

    • contents (String) - 匯入的內容（例如，從記憶體或檔案系統讀取）

當 LibSass 遇到@import指令時進行處理。自訂導入器允許以同步和非同步方式擴展 LibSass 引擎。在這兩種情況下，目標都是使用物件文字return或呼叫done() 。根據物件字面量的值，將會發生以下兩種情況之一。

當使用{ file: "String" }返回或呼叫done()時，將假設為@import假設新檔案路徑。建議在可能需要相對路徑解析的情況下注意prev的值。

當使用{ contents: "String" }傳回或呼叫done()時，將使用字串值，就像透過外部來源讀入檔案一樣。

從 v3.0.0 開始：

  • this指的是立即運行sass.render或sass.renderSync的上下文範圍

  • 導入器可以傳回錯誤，LibSass 將發出該錯誤作為回應。例如：

     done(new Error('不存在！'));//或同步返回return new Error('nothing to do here');

  • importer 可以是一個函數數組，LibSass 將按照它們在數組中出現的順序呼叫它們。這有助於使用者為特定類型的路徑（檔案系統、http）指定特殊的導入程序。如果導入器不想處理特定路徑，則應傳回null 。有關 Sass 類型的更多詳細信息，請參閱函數部分。

函數 (>= v3.0.0) -實驗性

這是一個實驗性 LibSass 功能。謹慎使用。

functions是一個Object ，它包含一個可以由正在編譯的 sass 檔案呼叫的自訂函數的集合。它們可能需要零個或多個輸入參數，並且必須同步（ return ...; ）或非同步（ done(); ）傳回一個值。這些參數將是require('node-sass').types雜湊中包含的建構函式之一的實例。傳回值也必須是這些類型之一。請參閱下面的可用類型清單：

型態.Number(值 [, 單位 = ""])

  • getValue() / setValue(value) ：取得/設定數字的數字部分

  • getUnit() / setUnit(unit) ：取得/設定數字的單位部分

類型.String(值)

  • getValue() / setValue(value) ：取得/設定包含的字串

types.Color(r, g, b [, a = 1.0]) 或 types.Color(argb)

  • getR() / setR(value) ：紅色分量（ 0到255之間的整數）

  • getG() / setG(value) ：綠色分量（ 0到255之間的整數）

  • getB() / setB(value) ：藍色分量（ 0到255之間的整數）

  • getA() / setA(value) ：alpha 分量（從0到1.0數字）

例子：

 var Color = require('node-sass').types.Color,
  c1 = 新顏色(255, 0, 0),
  c2 = 新顏色(0xff0088cc);

類型.Boolean(值)

  • getValue() ：取得封閉的布林值

  • types.Boolean.TRUE ：包含「true」的types.Boolean的單例實例

  • types.Boolean.FALSE ：包含「false」的types.Boolean的單例實例

types.List(長度[, 逗號分隔符號 = true])

  • getValue(index) / setValue(index, value) ： value本身必須是sass.types中建構函數之一的實例。

  • getSeparator() / setSeparator(isComma) : 是否使用逗號作為分隔符

  • getLength()

類型.Map(長度)

  • getKey(index) / setKey(index, value)

  • getValue(index) / setValue(index, value)

  • getLength()

類型.Null()

  • types.Null.NULL ： types.Null的單例實例。

例子

sass.renderSync({
  資料：'#{標題(2,5)} { 顏色：#08c; }',
  函數： {'headings($from: 0, $to: 6)': function(from, to) { var i, f = from.getValue(), t = to.getValue(), list = new sass.types .List(t - f + 1);  for (i = f; i <= t; i++) {list.setValue(i - f, new sass.types.String('h' + i));  } 回傳列表；}
  }});

包含路徑

  • 類型： Array

  • 預設: []

LibSass 可以找到的路徑數組，以嘗試解析您的@import聲明。當使用data時，建議您使用這個。

縮排語法

  • 類型： Boolean

  • 預設值： false

true值啟用 Sass 縮排語法來解析資料字串或檔案。

注意：只要檔案名稱中使用 .sass 和 .scss 副檔名，node-sass/libsass 就會使用預設設定 (false) 編譯 scss 和縮排語法 (.sass) 檔案的混合函式庫。

縮排類型 (>= v3.0.0)

  • 類型： String

  • 預設值： space

用於確定是否使用空格或製表符進行縮排。

縮排寬度 (>= v3.0.0)

  • 類型： Number

  • 預設值： 2

  • 最多： 10

用於決定用於縮排的空格或製表符的數量。

換行 (>= v3.0.0)

  • 類型： String

  • 預設值： lf

用於確定是否使用cr 、 crlf 、 lf或lfcr序列進行換行。

省略SourceMapUrl

  • 類型： Boolean

  • 預設值： false

特別：使用此功能時，也應該指定outFile以避免意外行為。

true值禁止在輸出檔案中包含來源映射資訊。

輸出檔案

  • 類型： String | null

  • 預設值： null

特殊：當sourceMap為真值時需要

指定輸出檔案的預期位置。強烈建議在輸出來源映射時使用，以便它們可以正確引用其預期文件。

注意啟用此選項不會為您將檔案寫入磁碟，它僅用於內部參考目的（例如生成地圖）。

如何將其寫入磁碟的範例

sass.render({...outFile: yourPathTotheFile,
  }, function(error, result) { // 從 v3.0.0 開始節點式回呼 if(!error){ // 編譯過程中沒有錯誤，將此結果寫入磁碟 fs.writeFile(yourPathTotheFile, result.css, function (err){if(!err){ //檔案寫入磁碟} });}
  });});

輸出樣式

  • 類型： String

  • 預設： nested

  • 值： nested 、 expanded 、 compact 、 compressed

確定最終 CSS 樣式的輸出格式。

精確

  • 類型： Integer

  • 預設值： 5

用於決定允許小數點後的位數。例如，如果十進制數為1.23456789且精確度為5 ，則最終 CSS 中的結果將為1.23457 。

來源評論

  • 類型： Boolean

  • 預設值： false

true允許將定義選擇器的行號和檔案作為註解傳送到已編譯的 CSS 中。對於調試很有用，特別是在使用導入和混合時。

原始圖

  • 類型： Boolean | String | undefined

  • 預設值： undefined

在render和renderSync期間啟用來源映射產生。

當sourceMap === true時， outFile的值會用作來源映射的目標輸出位置，並附加後綴.map 。如果未設定outFile ，則忽略sourceMap參數。

當typeof sourceMap === "string"時， sourceMap的值將會作為檔案的寫入位置。

來源地圖內容

  • 類型： Boolean

  • 預設值： false

true包含來源映射資訊中的contents

源地圖嵌入

  • 類型： Boolean

  • 預設值： false

true將來源映射作為資料 URI 嵌入

來源MapRoot

  • 類型： String

  • 預設值： undefined

該值將作為來源映射資訊中的sourceRoot發出

render回呼 (>= v3.0.0)

node-sass 支援帶有function(err, result)簽名的標準節點樣式非同步回呼。在錯誤情況下， error參數會由錯誤物件填入。在成功條件下， result物件將填入描述渲染呼叫結果的物件。

錯誤對象

  • message （字串）- 錯誤訊息。

  • line (Number) - 錯誤的行號。

  • column （數字）- 錯誤的列號。

  • status （數字）- 狀態代碼。

  • file (String) - 錯誤的檔案名稱。如果未設定file選項（有利於data ），這將反映值stdin 。

結果對象

  • css (Buffer) - 編譯後的 CSS。將其寫入文件，或根據需要提供。

  • map (Buffer) - 來源映射

  • stats （物件） - 包含有關編譯的資訊的物件。它包含以下鍵：

    • entry （字串）- scss 檔案的路徑，如果來源不是文件，則為data路徑

    • start (Number) - 編譯前的 Date.now()

    • end (Number) - 編譯後的 Date.now()

    • duration （數字）-結束-開始

    • includedFiles （陣列） - 所有相關 scss 檔案的絕對路徑（無特定順序）。

範例

var sass = require('node-sass');sass.render({
  文件：'/path/to/myFile.scss'，
  資料：'主體{背景：藍色; a{顏色:黑色;}}',
  importer: function(url, prev, did) {// url 是導入時原樣的路徑，LibSass 遇到的。同步回傳值.// this.options 包含此選項哈希，this.callback 包含節點樣式的回呼someAsyncFunction(url, prev, function(result){ did({file: result.path, // 只需要其中一個，請參閱部分特殊 Behaviours.contents: result.data });});// ORvar result = someSyncFunction(url, prev);return {file: result.path,contents: result.data};
  },
  includePaths: [ 'lib/', 'mod/' ],
  outputStyle: 'compressed'}, function(error, result) { // 從 v3.0.0 開始節點式回調
  if (error) {console.log(error.status); // 曾經是 v2x 和下面的「程式碼」console.log(error.column);console.log(error.message);console.log(error.line);
  }
  else {console.log(result.css.toString());console.log(result.stats);console.log(result.map.toString());//或更好console.log(JSON.stringify( result.地圖））; // 注意，JSON.stringify 也接受 Buffer
  }});// 或 var 結果 = sass.renderSync({
  文件：'/path/to/file.scss',
  資料：'主體{背景：藍色; a{顏色:黑色;}}',
  輸出樣式：'壓縮'，
  outFile: '/to/my/output.css',
  sourceMap: true, // 或絕對或相對（到 outFile）路徑
  importer: function(url, prev, did) {// url 是導入時原樣的路徑，LibSass 遇到的。同步回傳值.// this.options 包含此選項hashsomeAsyncFunction(url, prev, function(result){ did({file: result.path, // 只需要其中一個，請參閱特殊行為.contents: result.data } ) ;});// ORvar result = someSyncFunction(url, prev);return {file: result.path, content: result.data};
  }});console.log(result.css);console.log(result.map);console.log(result.stats);

特殊行為

  • 在同時設定了file和data選項的情況下，node-sass 將優先考慮data並使用file來計算 sourcemap 中的路徑。

版本資訊 (>= v2.0.0)

現在， node-sass和libsass版本資訊都透過info方法公開：

 var sass = require('node-sass');console.log(sass.info);/* 它將輸出如下內容：node-sass 2.0.1 (Wrapper) [JavaScript] libsass 3.1.0 (Sass Compiler) [ C/C++]*/

由於 node-sass >=v3.0.0 LibSass 版本是在運行時決定的。

整合

社群在建構工具和框架中使用 Node-sass 的清單。

括號延伸

@jasonsanjose 創建了一個基於 node-sass 的 Brackets 擴充功能：https://github.com/jasonsanjose/brackets-sass。編輯 Sass 檔案時，擴充功能會在儲存時編譯變更。該擴充功能還與即時預覽集成，可以在瀏覽器中顯示 Sass 更改，而無需保存或編譯。

早午餐插件

Brunch 的官方 sass 外掛程式預設使用 node-sass，如果偵測到使用 Compass，則自動回退到 ruby​​：https://github.com/brunch/sass-brunch

Connect/Express 中介軟體

為基於 connect 和 express 的 http 伺服器自動重新編譯.scss檔。

此功能已移至node-sass-middleware

文件板插件

@10xLaCroixDrinker 編寫了一個 DocPad 插件，使用 node-sass 編譯.scss檔：https://github.com/docpad/docpad-plugin-nodesass

Duo.js 擴充

@stephenway 創建了一個擴展，可以使用 node-sass 和 duo.js 將 Sass 轉換為 CSS https://github.com/duojs/sass

Grunt 擴充

@sindresorhus 創建了一組基於 node-sass 的 grunt 任務：https://github.com/sindresorhus/grunt-sass

吞嚥擴展

@dlmanning 創建了一個基於 node-sass 的 gulp sass 外掛：https://github.com/dlmanning/gulp-sass

豎琴

@sintaxi 的 Harp Web 伺服器使用 node-sass 隱式編譯.scss檔：https://github.com/sintaxi/harp

金屬匠插件

@stevenschobert 創建了一個基於node-sass的metalsmith外掛：https://github.com/stevenschobert/metalsmith-sass

流星插件

@fourseven 創建了一個基於node-sass的meteor外掛：https://github.com/fourseven/meteor-scss

含羞草模組

@dbashford 為 sass 創建了一個 Mimosa 模組，其中包括 node-sass：https://github.com/dbashford/mimosa-sass

範例應用程式

這裡還有一個範例連接應用程式：https://github.com/andrew/node-sass-example

重建二進位文件

Node-sass 包含適用於流行平台的預編譯二進位文件，若要為您的平台新增二進位文件，請依照下列步驟操作：

查看該項目：

 git clone --recursive https://github.com/sass/node-sass.gitcd node-sass
npm 安裝
node scripts/build -f # 使用 -d 開關進行調試發布# 如果成功，它將產生並移動 # 供應商目錄中的二進位。

命令列介面

在此階段，命令列使用介面相當簡單，如以下使用部分所示。

如果省略--output標誌，輸出將會被送到 stdout。

用法

node-sass [options] [output]或： cat | node-sass > output

例子：

node-sass src/style.scss dest/style.css

選項：

    -w, --watch 監視目錄或文件
    -r, --recursive 遞歸地監視目錄或文件
    -o, --output 輸出目錄
    -x, --omit-source-map-url 從輸出中省略來源映射 URL 註釋
    -i, --indented-syntax 將來自 stdin 的資料視為 sass 程式碼（與 scss 相對）
    -q, --quiet 禁止日誌輸出，錯誤除外
    -v, --version 列印版本訊息
    --output-style CSS輸出樣式（巢狀|擴充|緊湊|壓縮）
    --indent-type 輸出 CSS 的縮排類型（空格 | 製表符）
    --indent-width 縮排寬度；空格或製表符的數量（最大值：10）
    --linefeed 換行樣式 (cr | crlf | lf | lfcr)
    --source-comments 在輸出中包含調試訊息
    --source-map 發出來源映射
    --source-map-contents 在地圖中嵌入包含內容
    --source-map-embed 將 sourceMappingUrl 嵌入為資料 URI
    --source-map-root 基本路徑，將按原樣在 source-map 中發出
    --include-path 尋找導入檔案的路徑
    --follow 關注符號連結目錄
    -- precision 十進制數允許的精度
    --error-bell 出現錯誤時輸出響鈴字符
    --importer 包含自訂導入器的 .js 檔案的路徑
    --functions 包含自訂函數的 .js 檔案的路徑
    --help 列印使用訊息

input可以是單一.scss或.sass ，也可以是一個目錄。如果輸入是目錄，則也必須提供--output標誌。

另外，請注意--importer採用 js 檔案的（絕對或相對於 pwd）路徑，該檔案需要將預設的module.exports設定為導入函數。例如，請參閱我們的測試裝置。

--source-map選項接受布林值，在這種情況下，它將用.css.map取代目標擴展名。它也接受.map檔案的路徑，甚至是所需目錄的路徑。編譯目錄時--source-map可以是布林值或目錄。

二進位配置參數

node-sass 支援不同的設定參數來變更與 sass 二進位檔案相關的設置，例如二進位檔案名稱、二進位檔案路徑或備用下載路徑。 Node-sass 支援以下參數：

變數名.npmrc 參數過程參數價值
SASS_BINARY_NAME sass_binary_name --sass-二進位名稱小路
SASS_BINARY_SITE sass_binary_site --sass-二進位站點網址
SASS_BINARY_PATH sass_二進位_路徑--sass-二進位路徑小路
SASS_BINARY_DIR sass_binary_dir --sass-二進位-dir小路
SASS_REJECT_UNAUTHORIZED sass_reject_unauthorized --sass-拒絕-未經授權價值

這些參數可以用作環境變數：

  • 例如export SASS_BINARY_SITE=http://example.com/

作為本地或全域 .npmrc 設定檔：

  • 例如sass_binary_site=http://example.com/

作為過程參數：

  • 例如npm install node-sass --sass-binary-site=http://example.com/

如果您對二進位檔案使用自簽名證書，則SASS_REJECT_UNAUTHORIZED將覆蓋 (rejectUnauthorized)[https://nodejs.org/docs/latest/api/tls.html#tls_tls_createserver_options_secureconnectionlistener]。

安裝後建置

安裝僅執行兩個 Mocha 測試，以查看您的電腦是否可以使用預先建置的 LibSass，這將在安裝過程中節省一些時間。如果任何測試失敗，它將從原始程式碼建置。

維護者

此模組由以下人員提供給您並由以下人員維護：

  • Michael Mifsud - 專案負責人（Github / Twitter）

  • 安德魯·內斯比特（Github / Twitter）

  • 毛院長（Github / Twitter）

  • 布雷特·威爾金斯（Github / Twitter）

  • 基斯·西克爾（Github / Twitter）

  • 洛朗·戈德爾（Github / Twitter）

  • 尼克·舍寧（Github / Twitter）

  • 阿迪爾·穆賈希德（Github / Twitter）

貢獻者

我們 <3 位貢獻者！特別感謝所有為此專案付出開發時間的人們，我們非常感謝你們的辛勤工作。您可以在此處找到這些人的完整清單。

關於補丁/拉取請求的注意事項

查看我們的貢獻指南

版權

版權所有 (c) 2015 安德魯·內斯比特。有關詳細信息，請參閱許可證。

展開
附加信息
相關版本
爲您推薦
相關資訊 全部
網友評論