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

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

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

Dreamweaver 支援最受歡迎的 CSS 預處理器 Sass 和 Less,而且 Dreamweaver 也支援用於編譯 Sass 檔案的 Compass 和 Bourbon 架構。

雖然 Less 是以 JavaScript 為基礎,Sass 是以 Ruby 為基礎,但是您不需要了解這些語言或使用命令列,也可以將檔案編譯為 CSS。當您載入、編輯或儲存這些檔案時,Dreamweaver 會使用 less.js JavaScript 程式庫將這些檔案自動編譯為 CSS。

Dreamweaver 如何處理 CSS 預處理器

Dreamweaver 處理 CSS 預處理器的方式會依您是否已定義網站而有所不同。Adobe 建議您定義網站,因為擁有網站可讓您隨意設定 CSS 預處理器偏好設定,也可在 Dreamweaver 中使用 Compass 和 Bourbon 架構。

如果您已定義網站,可以設定網站特有的 CSS 預處理器偏好設定,來自訂 CSS 預處理器在 Dreamweaver 中的運作方式。

設定網站特有的 CSS 預處理器偏好設定可讓您以網站為基準,指定編譯選項。您也可以自訂 Sass 和 CSS 檔案的位置,以及每個網站特有的預處理器選項。

當您定義網站時,Dreamweaver 也可讓您在 Dreamweaver 中使用 Sass 架構 – Compass、Bourbon、Bourbon Neat 和 Bourbon Bitters。

如果您沒有定義網站,則可選擇手動編譯您的 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 預處理器設定。

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

啟用存檔時自動編譯

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

Less 選項

啟用嚴格數學

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

啟用嚴格單位

在 CSS 中、在數學之後會輸出猜測的單位。例如,5px * 2px 會編譯為 10px 而不是 10px2。

停用此選項時,Less 會在處理數學時嘗試猜測輸出單位。

在此範例中,所產生的 CSS 如下所示:

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

在此情況中,猜測並不正確 - 長度乘以長度等於面積,但 CSS 並不支援指定面積。此處的假設是,用戶意指其中一個值是數值,而不是長度的單位,且 Dreamweaver 會輸出 10px。

如果啟用嚴格單位,所產生的這個 CSS 會被視為錯誤。

將 URL 重寫為相對 URL

重寫匯入的檔案中的 URL,使 URL 總是相對於基底匯入的檔案。因此,如果 Less 檔案匯入另一個 Less 檔案,後者在參考影像時,已編譯的 CSS 中會顯示相對 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 輸出

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

在與來源相同的資料夾中

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

定義輸出資料夾

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

取代輸入路徑區段

此選項可讓您使用 From 和 To 字串取代一部分的路徑。

以設定 From: scss 和 To:css 為例,在取代路徑 css 中的 SCSS 之後,會將輸出檔案放在相同的樹狀結構內。

來源資料夾

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

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

使用 Compass 架構

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

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

  1. 安裝 Compass 檔案。

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

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

    安裝 Compass 檔案
    安裝 Compass 檔案

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

    已安裝 Compass 檔案
    已安裝 Compass 檔案

  2. 指定現有以 Ruby 為基礎的設定檔

    如果您的電腦上已經有 Compass,並且有 Compass *.rb 檔案設定,請在 Dreamweaver「網站設定」對話方塊中,指定 Compass *.rb 檔案在目前網站根目錄中的路徑。

    1. 在「網站設定」對話方塊中,選取「CSS 預處理器 > Compass」。
    2. 選取「使用 Compass」核取方塊。
    3. 按一下「指定以 Ruby 為基礎的設定檔」,並瀏覽至檔案位置。完成時按一下「儲存」。
    指定現有以 Ruby 為基礎的設定檔
    指定現有以 Ruby 為基礎的設定檔

    註解:

    這個檔案必須位於您的網站根資料夾中。

  3. 手動指定設定選項

    如果您沒有現有的設定選項,可以選擇手動指定它們。

    1. 在「網站設定」對話方塊中,選取「CSS 預處理器 > Compass」。
    2. 選取「使用 Compass」核取方塊。
    3. 按一下「手動指定設定選項」。指定下列設定選項並按一下「儲存」。

    下列欄位是自動填入的,不過您可以依據您的需求來變更︰

    註解:

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

    HTTP 路徑

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

    影像目錄

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

    產生的影像目錄

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

    字體目錄

    存放字體檔案的目錄。

    相對資源

    指定 compass helper 函式應該產生從所產生的 CSS 到資源的相對 URL,或是產生使用該資源類型之 http 路徑的絕對 URL。

  4. 如果您已在「網站 > 管理網站 > CSS 預處理器」對話方塊中選取「啟用存檔時自動編譯」,則每次儲存 Sass 檔案的變更時,Dreamweaver 都會產生 CSS 檔案。您也可以在瀏覽器視窗中即時預覽這些變更。如需有關在瀏覽器即時預覽變更的詳細資訊,請參閱「即時預覽」。

    如果您不想要自動編譯,則可以執行下列其中一項作業來手動編譯 CSS 檔案︰

    • 以滑鼠右鍵按一下「檔案」面板中的 Sass、Less 或 SCSS 檔案,然後按一下「編譯」。
    • 按一下「工具 > 編譯」以編譯目前的檔案。
  5. 然後便可將編譯好的 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 Neat 或 Bourbon Bitters 檔案

如果要安裝 Bourbon 或任何其類別:

  1. 在「網站設定」對話方塊中,選取「CSS 預處理器 > Bourbon、Bourbon Neat 或 Bourbon Bitters」。

  2. 按一下「安裝檔案」,在您網站中指定的網站根資料夾位置安裝檔案。

    安裝 Bourbon 檔案
    安裝 Bourbon 檔案

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

    已安裝 Bourbon 檔案
    已安裝 Bourbon 檔案

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

編譯 CSS 預處理器檔案

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

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

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

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

    啟用自動編譯
    啟用自動編譯

  2. 在「網站設定」對話方塊中,選取「CSS 預處理器 > 來源和輸出」。

  3. 在「來源和輸出」對話方塊中,為產生的 CSS 檔案指定儲存位置。您可以選擇以下任一選項:

    在與來源相同的資料夾中

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

    定義輸出資料夾

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

    取代輸入路徑區段

    此選項可讓您使用 From 和 To 字串取代一部分的路徑。

  4. 指定包含 Dreamweaver 需要「監控」的 Sass 或 Less 檔案的資料夾。

    如果您對這個監控的資料夾內的任何檔案進行變更,Dreamweaver 會在您儲存之後自動編譯這些檔案。

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

    註解:

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

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

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

註解:

「輸出」面板通常停駐在工作區的底部。如果面板關閉,請使用「視窗 > 輸出」面板開啟它。

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

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

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

手動編譯 CSS 預處理器檔案

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

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

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

透過「檔案」面板手動編譯 CSS 預處理器檔案
透過「檔案」面板手動編譯 CSS 預處理器檔案

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

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策