使用手冊取消

在 Dreamweaver 中使用 CSS 預處理器

搜尋

上次更新時間 2021年4月29日

Dreamweaver

開啟應用程式

了解如何在 Dreamweaver 中處理及編譯 CSS 預處理器檔案。

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

尤其，預處理器可讓您使用變數、mix-in、函式以及許多其他在 CSS 中不可能的技巧。
您可以使用 CSS 預處理器一次定義所有項目，並重複使用這些項目以產生可維護及可延伸的 CSS。

使用 CSS 預處理器，您還可以產生更清晰且易於維護的 CSS。如果您要建立參考一些 CSS 檔案的網站，則使用像 Sass 或 Compass 這樣的 CSS 預處理器可以減少手動編碼和複製/貼上動作。

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

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 檔案。這些變更也會反映在所有開啟的 HTML 檔案 (其中連結或附加了此編譯的 CSS) 中。

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

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

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

確定自動編譯已啟用。然後按「儲存」以更新 CSS 檔案。
(選擇性) 在使用了產生的 css 的所有 HTML 頁面中，檢視反映在「即時」檢視或「即時預覽」中的變更。

Dreamweaver 2015 和 CSS 預處理器

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

下載及安裝編譯器。
為編譯器設定 grunt (Gruntfile.js) 工作以讀取您的 Sass/LESS/SCSS 檔案。
設定另一個 grunt 工作以將檔案編譯為 CSS，然後將其帶入 Dreamweaver 中。

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

註解：

若要了解如何使用預處理器來增強 CSS，請觀看此教學課程影片。

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

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

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

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

設定 CSS 預處理器偏好設定

您可以使用「網站 > 管理網站」對話方塊，設定網站特有的 CSS 預處理器偏好設定。

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

註解：

依據預設，「一般」和「來源和輸出」子區段中的設定適用於 Ruby-Saas 架構。

若要設定 Compass 的偏好設定，您必須在「Compass」區段中選取「使用 Compass」核取方塊。

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

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

啟用存檔時的自動編譯

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

LESS 選項

啟用嚴格數學

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

啟用嚴格單位

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

.class {
  property: 1px * 2px;
}

在此情況下，長度乘以長度等於面積，但 css 並不支援指定面積。Dreamweaver 會假設用戶意指其中一個值是數值，而不是長度的單位。

當啟用嚴格單位時，Dreamweaver 會假設它是一個計算錯誤，並且會擲回錯誤。

將 URL 重寫為相關 URL

這個選項可讓您重寫產生的 CSS 檔案中的 URL，因此 URL 會總是與產生的檔案相關。

產生來源對應

建立來源對應。來源對應是一個檔案，此檔案可橋接如 Sass 與 LESS 等高階語言，以及它們編譯成的 CSS 等低階語言。

Sass/SCSS 選項

輸出檔案樣式

指定 CSS 輸出檔案的樣式：

巢狀 - 以已知、模組化結構格式化已編譯的 CSS。
精簡 - 以精簡結構格式化已編譯的 CSS，其佔用的空間小於「巢狀」或「展開」。
壓縮 - 以平面結構輸出 CSS。
展開 - 以展開的方式輸出 CSS，每個屬性和規則都佔用一行。規則內的屬性會縮排，但是規則不會有任何形式的縮排。

建立來源註解

在將 CSS 程式碼對應至來源程式碼行的輸出 CSS 檔案中建立註解。

產生來源對應

建立來源對應 (此檔案可橋接如 Sass 與 LESS 等高階語言，以及它們編譯成的 CSS 等低階語言)。

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

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

註解：

根據預設，「來源和輸出」區段中的選項適用於 Saas。若要為 Compass 啟用這些選項，您必須在「Compass」區段中選取「使用 Compass」核取方塊。

在修改這些設定並安裝 Compass 後，所有設定都會遷移至 config.rb。之後，如果您想要修改任何設定，請直接編輯 config.rb 檔案中的設定。此外，在「網站設定」對話方塊中所做的變更並不會影響編譯。

您可以在「網站 > 管理網站」對話方塊中，設定下列來源和輸出 CSS 預處理器設定。

CSS 輸出

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

和來源相同的資料夾中

如果您想要將產生的 CSS 檔案儲存在與來源 Sass 和 LESS 檔案相同的資料夾中，請選取此選項。

定義輸出資料夾

請選取此選項，並指定資料夾，您要將產生的 CSS 檔案儲存在其中。

取代輸入路徑區段

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

來源資料夾

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

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

使用 Compass 架構

Compass 是開放原始碼 CSS 撰寫架構，可讓您使用 Sass 來建立 CSS3 樣式表。

Dreamweaver 支援 Compass。如果您使用 Compass 來建立樣式表，就可以在 Dreamweaver 中編譯這些樣式表並產生 CSS 檔案。

使用 Compass 檔案。

如果您尚未安裝 Compass，可以在 Dreamweaver 中進行安裝。

在「網站設定」對話方塊中，選取「CSS 預處理器 > Compass」。選取「使用 Compass」，然後按一下「安裝檔案」。

安裝 Compass 檔案

所有的 Compass 檔案和 *.rb 設定檔都安裝在您的網站資料夾內，您可以在「檔案」面板中查看。

已安裝 Compass 檔案
指定現有以 Ruby 為基礎的設定檔

如果您的電腦中已安裝 Compass，並且有 Compass *.rb 檔案設定，請在 Dreamweaver「網站設定」對話方塊中，指定 Compass *.rb 檔案在目前網站根目錄中的路徑。
1. 在「網站設定」對話方塊中，選取「CSS 預處理器 > Compass」。
2. 選取「使用 Compass」核取方塊。
3. 按一下「指定以 Ruby 為基礎的設定檔」，並瀏覽至檔案位置。
4. 完成時按一下「儲存」。
指定現有以 Ruby 為基礎的設定檔

註解：

這個檔案必須位於您的網站根資料夾中。
手動指定設定選項

如果您沒有現有的設定選項，您可以手動指定設定。
1. 在「網站設定」對話方塊中，選取「CSS 預處理器 > Compass」。
2. 選取「使用 Compass」核取方塊。
3. 按一下「手動指定設定選項」。指定下列設定選項，然後按一下「儲存」。
下列欄位是自動填入的，不過您可以依據您的需求來變更︰

註解：

在這些選項中，所有選取的路徑都必須在網站根目錄內。

HTTP 路徑

在網頁伺服器內執行時的專案路徑。預設為「/」。

影像目錄

存放影像的目錄，此目錄相對於 project_path。

產生的影像目錄

存放產生的影像的目錄，此目錄相對於 project_path，並預設為 images_dir 的值。

字體目錄

存放字體檔案的目錄。

相對資源

指定 compass helper 函式應該產生從所產生的 CSS 到資源的相對 URL，或是產生使用該資源類型之 http 路徑的絕對 URL。
如果您已在「網站 > 管理網站 > CSS 預處理器」對話方塊中選取「啟用存檔時的自動編譯」，則每次將變更儲存至 Sass 檔案時，Dreamweaver 都會產生 CSS 檔案。

您也可以在瀏覽器視窗中即時預覽這些變更。如需有關在瀏覽器即時預覽變更的詳細資訊，請參閱「即時預覽」。
如果您不想要自動編譯，可以執行下列其中一項作業來手動編譯 CSS 檔案︰
- 以滑鼠右鍵按一下「檔案」面板中的 Sass、LESS 或 SCSS 檔案，然後按一下「編譯」。
- 按一下「工具 > 編譯」以編譯目前的檔案。
然後便可將編譯好的 CSS 檔案附加至網站中的 HTML 檔案。如需詳細資訊，請參閱「連結至外部 CSS 樣式表」。

使用 Bourbon 架構

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

以下是支援的 Bourbon 類別：

Bourbon - 簡單的輕量型 Sass 混合程式庫
Bourbon Neat - Sass 和 Bourbon 適用的輕量型語意格線架構
Bourbon Bitters - Bourbon 專案適用的 Scaffold 樣式、變數和結構

您可以在程式碼中新增下列其中一項，以匯入 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 預處理器 > Bourbon、Bourbon Neat 或 Bourbon Bitters」。
按一下「安裝檔案」，在網站中指定的網站根資料夾位置安裝檔案。

安裝 Bourbon 檔案

所有的 Bourbon 檔案都安裝在您的網站資料夾內，您可以在「檔案」面板中查看。

已安裝 Bourbon 檔案

如果失敗，錯誤會顯示在「輸出」面板 (「視窗 > 結果 > 輸出」) 中，且狀態列圖示會變成紅色。

編譯 CSS 預處理器檔案

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

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

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

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

在「網站設定」對話方塊中，選取「CSS 預處理器 > 一般 > 啟用存檔時的自動編譯」。

啟用自動編譯
按一下「CSS 預處理器 > 來源和輸出」。
為產生的 CSS 檔案指定儲存位置。您可以選擇以下任一選項：

和來源相同的資料夾中

如果您想要將產生的 CSS 檔案儲存在與來源 Sass 和 LESS 檔案相同的資料夾中，請選取此選項。

定義輸出資料夾

選取此選項，並指定您要儲存產生的 CSS 檔案的資料夾。

取代輸入路徑區段

此選項可讓您使用「從」和「到」字串取代一部分的路徑。
指定包含 Dreamweaver 所追蹤的 Sass 或 LESS 檔案的資料夾。

如果您對所追蹤資料夾內的任何檔案進行變更，Dreamweaver 會在您儲存之後自動編譯這些檔案。

來源和輸出 CSS 預處理器設定

註解：

即使您在 Dreamweaver 之外進行變更 (例如使用文字編輯器)，Dreamweaver 仍然會監控及編譯這些檔案。

成功完成編譯之後，「輸出」面板 (「視窗 > 結果 > 輸出」) 會顯示訊息。狀態列中的狀態圖示會以綠色顯示。如果要開啟已編譯的 CSS，請按兩下面板中的成功訊息。

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

註解：

「輸出」面板會停駐在工作區的底部。如果面板關閉，請按一下「視窗 > 輸出」面板。

您也可以使用狀態圖示 (當狀態為紅色時)，切換「輸出」面板 (顯示/隱藏)。

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

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

手動編譯 CSS 預處理器檔案

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

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

如果要手動編譯 CSS 預處理器，請以滑鼠右鍵按一下「檔案」面板中的檔案，並按一下「編譯」。

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

更快、更輕鬆地獲得協助

新的使用者？