在 Dreamweaver 中使用 CSS 預處理器

CSS 是一種描述 HTML 文件樣式的語言。 CSS 預處理器會將前置處理過的語言所撰寫的程式碼編譯為最熟悉的 CSS。 預處理語言將 CSS 提升到更接近程式設計語言的層次。

具體而言，預處理器可讓您使用變數、混入、函式，以及許多其他在 CSS 中
無法實現的技術。使用 CSS 預處理器，您可以定義一次所有內容並重複使用，從而產生可維護且可擴充的 CSS。

使用 CSS 預處理器，您還可以產生更清晰且易於維護的 CSS。 如果您正在建立參考多個 CSS 檔案的網站，使用 Sass 或 Compass 等 CSS 預處理器可以減少手動編碼和複製貼上的動作。

Dreamweaver 會使用內建的 Ruby-Saas 編譯器來編譯 SCSS 和 LESS 檔案。 Dreamweaver 也支援 Compass 和 Bourbon 框架來編譯 Sass 檔案。 

LESS 是以 JavaScript 為基礎，而 Sass 則是以 Ruby 為基礎。 但是，您不必了解這些語言中的任何一種。 您也不必使用命令列來將檔案編譯為 CSS。 當您載入、編輯或儲存這些檔案時，Dreamweaver 會使用 less.js JavaScript 資料庫自動將這些檔案編譯為 CSS。

支援的版本：

• Sass：3.4.25
• LESS：2.7.2
• Compass：1.0.3
• Bourbon：4.2.6
• Bourbon Neat：1.7.3
• Bourbon Bitters：1.2.0

Dreamweaver 如何處理 CSS 預處理器

Dreamweaver 處理 CSS 預處理器的方式會依您是否已定義網站而有所不同。 如果您定義網站，即可設定 CSS 預處理器偏好設定，也可以從 Dreamweaver 內使用 Compass 和 Bourbon 框架。

當您定義網站時，可以設定網站特有的 CSS 預處理器偏好設定，以自訂 CSS 預處理器在 Dreamweaver 中的運作方式。 設定網站特有的 CSS 預處理器偏好設定可讓您以網站為基準，指定編譯選項。 您也可以自訂 Sass 和 CSS 檔案的位置，以及各個網站的特定預處理器選項。

請繼續閱讀以了解如何將 Dreamweaver 與 CSS 預處理器搭配使用：

Dreamweaver 2017 和 CSS 預處理器

在 Dreamweaver 2017 中，CSS 預處理器支援已內建在 Dreamweaver 中。 也就是說，您可以在 Dreamweaver 中使用 Sass/LESS/SCSS 檔案。 使用簡單的 Ctrl+S 或 Cmd+S 即可在 Dreamweaver 中自動編譯 CSS。 您也可以使用「工具 > 編譯」(或 F9 鍵)，手動編譯個別的 CSS 檔案。 變更也會反映在所有已開啟且連結或附加此編譯 CSS 的 HTML 檔案中。

以下是使用 CSS 預處理器時涉及之作業的高階工作流程：

• 如果您想要在 Dreamweaver 中使用 Compass 或 Bourbon，請安裝適當的編譯器。 此安裝作業是一鍵式程序。 設定您的 CSS 預處理器設定。

請只在需要架構檔案 (Bourbon) 的副本時，或是想要產生預設的 scss 檔案和基於 Ruby 的設定檔案 (Compass) 時，才安裝編譯器。 建議保留架構檔案的副本。 如果製作框架中的特定 mixin 或函式在之後的修訂中被移除，您仍然可以存取網站內的預處理器檔案。

• 確定自動編譯已啟用。 然後按一下 儲存 來更新 CSS 檔案。
• （選用）在即時檢視或即時預覽中檢視變更，這些變更會反映在所有使用產生之 css 的 HTML 頁面中。

Dreamweaver 2015 和 CSS 預處理器

在 Dreamweaver 2015 和較早的 CC 版本中，您可以將 Sass、LESS 和 SCSS 檔案與 Dreamweaver 搭配使用。 不過，您必須在 Dreamweaver 應用程式外自行編譯這些檔案。
您的工作流程會類似以下步驟：

1. 下載並安裝編譯器。
2. 設定 grunt (Gruntfile.js) 工作，讓編譯器讀取您的 Sass/LESS/SCSS 檔案。
3. 設定另一個 grunt 工作將檔案編譯為 CSS，然後匯入 Dreamweaver。

每次變更 Sass/LESS/SCSS 檔案時，您都必須執行這些步驟。

如果您沒有定義的網站，則可選擇手動編譯您的 Sass 和 LESS 檔案。 不過，不支援 Compass 和 Bourbon 架構。

如何在 Dreamweaver 中使用 CSS 預處理器？

以下是使用 CSS 前置處理器時涉及工作的高層工作流程：

1. 在 Dreamweaver 中定義網站。 確定您嘗試編譯的 Sass 或 LESS 檔案已包含在網站根資料夾中。 如果您已定義網站，且 Sass/LESS 檔案包含在網站根目錄中，請繼續執行下一步。 如需有關設定 Dreamweaver 網站的詳細資訊，請參閱關於 Dreamweaver 網站。
2. 設定 CSS 預處理器的偏好設定 (例如定義所產生的 CSS 檔案的位置)。 這些偏好設定是網站特有的。 如需詳細資訊，請參閱設定網站專用的 CSS 前置處理器偏好設定。
3. 如果您想要使用 Compass 或 Bourbon 等特定架構，可以指定這些架構的設定。 如需詳細資訊，請參閱使用 Compass 框架或使用 Bourbon 框架。
4. 設定自動編譯，或手動編譯您的 Sass 和 LESS 檔案。 如需詳細資訊，請參閱編譯 CSS 前置處理器檔案。

設定 CSS 預處理器偏好設定

您可以使用地點 > 管理地點對話框為 CSS 前置處理器設定地點專用的偏好設定。

保留 CSS 預處理器的網站特有偏好設定，可讓您以網站為基準來管理 CSS 預處理器。 此動作也可讓您控制各個網站的 CSS 前置處理器，無需每次切換網站時都更新偏好設定。

設定一般的 CSS 預處理器設定

您可以在「網站 > 管理網站 > CSS 預處理器」對話方塊中，設定下列一般的 CSS 預處理器設定。 預設情況下，這些設定適用於 Saas 框架。

請選取此核取方塊，以啟用 CSS 預處理器的自動編譯。 如果選取這個選項，Dreamweaver 就會在您儲存 Sass、LESS 或 SCSS 檔案時自動產生 CSS 檔案。 如果不選取此選項，您必須在每次變更時手動編譯檔案。

LESS 選項

只會處理在括號中的數學。 例如，(100px/25px) 會成功進行處理，而 20% + 10% (不含括號) 則不加以處理。 停用此選項時，會處理檔案中的所有數學運算。

如果未選取此選項，LESS 會在進行數學計算時嘗試猜測輸出單位。 例如：

.class {

property: 1px * 2px;

}

在此情況下，長度乘以長度等於面積，但 css 並不支援指定面積。 Dreamweaver 假設使用者希望其中一個為數值而非長度單位。

開啟嚴格單位時，Dreamweaver 會假設這是計算錯誤，並顯示錯誤。

此選項讓您能夠重新撰寫所產生 CSS 檔案中的 URL，使 URL 始終相對於產生的檔案。 

建立來源對應。 來源對應是一個檔案，可在 Sass 和 LESS 等高階語言與其編譯為的低階語言 (如 CSS) 之間建立橋樑。

Sass/SCSS 選項

指定 CSS 輸出檔案的樣式:

• 巢狀－ 以知名的模組化結構格式化編譯的 CSS。
• 精簡 - 以精簡結構格式化編譯的 CSS，比巢狀或展開格式佔用更少空間。
• 壓縮 - 以扁平結構輸出 CSS。
• 展開 - 以展開的方式輸出 CSS，每個屬性和規則都佔用一行。 屬性在規則內縮排，但規則本身不以任何方式縮排。 

在輸出 CSS 檔案中建立註解，將 CSS 程式碼對應到生成它的那一行。

建立來源對應 (連接高階語言 (如 Sass 和 LESS) 與其編譯到的低階語言 (如 CSS) 之間的橋樑檔案)。 

設定 CSS 來源和輸出偏好設定

您可以定義生成的 CSS 檔案應放置的位置，以及當使用外部編輯器修改路徑中的 Sass/LESS 檔案時，Dreamweaver 應監看和觸發自動編譯的路徑。

您可以在 地點 > 管理地點 對話框中設定下列來源和輸出 CSS 前置處理器設定。

CSS 輸出

指定生成的 CSS 輸出檔案的位置。

如果您希望生成的 CSS 檔案儲存在與來源 Sass 和 LESS 檔案相同的檔案夾中，請選取此選項。

選取此選項並指定您要儲存生成 CSS 檔案的檔案夾。

此選項可讓您使用「從」和「到」字串取代一部分的路徑。 例如，設定從：scss 和到：css 時，輸出檔案會在路徑中將 SCSS 取代為 css 後，放置在相同的樹狀結構內。

指定必須監控的網站根目錄內的子資料夾。 通常，此子檔案夾包含您所有的 SCSS 或 LESS 檔案。 

如果您已啟用一般設定中的「編譯」，Dreamweaver 就會自動觸發 CSS 預處理器。 當檔案夾內的任何檔案從外部修改或從 Dreamweaver 內修改時，Dreamweaver 會觸發自動編譯。

使用 Compass 架構

Compass 是開放原始碼 CSS 製作框架，讓您能使用 Sass 建立 CSS3 樣式表。

Dreamweaver 支援 Compass。 如果您使用 Compass 建立樣式表，您可以編譯這些樣式表並從 Dreamweaver 內生成 CSS 檔案。

使用 Bourbon 架構

Dreamweaver 支援 Bourbon 的系列產品。 如果您使用 Bourbon 建立樣式表，您可以在 Dreamweaver 中編譯這些樣式表並產生 CSS 檔案。

支援下列 Bourbon 類型：

• Bourbon - 適用於 Sass 的簡單輕量級混合資料庫
• Bourbon Neat - 適用於 Sass 和 Bourbon 的輕量級語義拼貼框架
• Bourbon Bitters - 為 Bourbon 專案的支架樣式、變數和結構

您可以在程式碼中加入以下其中之一來匯入 Bourbon 框架：

• @import "bourbon" - 匯入 Bourbon
• @import "neat" – 匯入 Bourbon Neat
• @import "base" – 匯入 Bourbon Bitter

Dreamweaver 在編譯預處理器檔案時會使用預先封裝的 Bourbon 版本。

或者，您可以將 Bourbon 架構檔案安裝到您的網站，讓 Dreamweaver 的更新不會影響您的編譯工作流程。 Bourbon 架構檔案會複製到您的網站。 當對匯入框架的任何檔案觸發編譯時，會使用 Bourbon 框架。

安裝 Bourbon、Bourbon Neat 或 Bourbon Bitters 檔案

安裝 Bourbon 或其任何變體：

編譯 CSS 預處理器檔案

您可以透過下列其中一種方式編譯 CSS 預處理器檔案：

• 設定 CSS 預處理器檔案的自動編譯
• 手動編譯 CSS 前處理器檔案

設定 CSS 預處理器檔案的自動編譯

您可以在 Dreamweaver 中設定選項，將在 Sass 或 LESS 檔案中完成的變更自動編譯為相等的 CSS。 您也可以指定在網站根目錄內要儲存所產生 CSS 的位置。

成功編譯後，輸出面板會顯示一則訊息（視窗 > 結果 > 輸出）。狀態列中的狀態圖示會以綠色顯示。若要開啟編譯的 CSS，請在面板中按兩下成功訊息。

如果找到任何錯誤，則表示 CSS 編譯不成功。 狀態圖示會以紅色顯示，而且「輸出」面板會列出所有錯誤和警告。 您可以按兩下面板中的錯誤訊息，快速跳至發生錯誤的程式碼行。 到所有錯誤都解決之前，CSS 檔案不會成功編譯。

取得已編譯的 CSS 檔案之後，您可以將網頁連結至樣式表。 當您變更 CSS 預處理器時，會自動更新對應的已編譯 CSS 檔案。 網頁在即時檢視中也會自動重新整理。

如需將網頁連結至樣式表的詳細資訊，請參閱「連結到外部 CSS 樣式表」。

手動編譯 CSS 預處理器檔案

在某些情況下 (例如您尚未定義 Dreamweaver 網站)，您可能會想要手動編譯 CSS 預處理器檔案。

在這種情況下，請在網站設定對話框的CSS 預處理器 > 一般面板中停用檔案儲存時啟用自動編譯。

若要手動編譯 CSS 預處理器，請在「檔案」面板中以滑鼠右鍵按一下檔案，然後按一下「編譯」。

您也可以按一下「工具」>「編譯」來編譯目前的檔案。