使用手冊 取消

在 Dreamweaver 中使用 CSS 預處理器

  1. Dreamweaver 使用手冊
  2. 簡介
    1. 多方互動網頁設計基本概念
    2. Dreamweaver 的新增功能
    3. 使用 Dreamweaver 開發網頁 - 總覽
    4. Dreamweaver / 常見問題
    5. 鍵盤快速鍵
    6. Dreamweaver 系統需求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 將 Dreamweaver 設定與 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 檔案
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 從資料庫擷取網頁最佳化的 SVG 檔案
  4. Dreamweaver 工作區和檢視
    1. Dreamweaver 工作區
    2. 最佳化視覺開發的 Dreamweaver 工作區
    3. 根據檔案名稱或內容搜尋檔案 | Mac OS
  5. 設定網站
    1. 關於 Dreamweaver 網站
    2. 設定網站的本機版本
    3. 連線到發佈伺服器
    4. 設定測試伺服器
    5. 匯入和匯出 Dreamweaver 網站設定
    6. 將現有網站從遠端伺服器帶入本機網站根目錄
    7. Dreamweaver 中的輔助功能
    8. 進階設定
    9. 設定網站偏好設定以傳送檔案
    10. 在 Dreamweaver 中指定 Proxy 伺服器設定
    11. 將 Dreamweaver 設定與 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理檔案
    1. 建立和開啟檔案
    2. 管理檔案和資料夾
    3. 下載和上傳伺服器檔案
    4. 存回和取出檔案
    5. 同步化檔案
    6. 比較檔案差異
    7. 遮罩 Dreamweaver 網站中的檔案和資料夾
    8. 啟用 Dreamweaver 網站的設計備註
    9. 防止 Gatekeeper 遭到潛在惡意利用
  7. 版面和設計
    1. 使用視覺輔助以配置版面
    2. 關於使用 CSS 配置頁面
    3. 使用 Bootstrap 設計回應式網站
    4. 在 Dreamweaver 中建立及使用媒體查詢
    5. 以表格呈現內容
    6. 顏色
    7. 使用流變格線版面的互動設計
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解串接樣式表
    2. 使用 CSS 設計工具配置頁面
    3. 在 Dreamweaver 中使用 CSS 預處理器
    4. 如何在 Dreamweaver 中設定 CSS 樣式偏好設定
    5. 在 Dreamweaver 中移動 CSS 規則
    6. 在 Dreamweaver 中將行內 CSS 轉換為 CSS 規則
    7. 使用 div 標籤
    8. 套用漸層至背景
    9. 在 Dreamweaver 中建立與編輯 CSS3 轉變效果
    10. 格式化程式碼
  9. 頁面內容和資產
    1. 設定頁面屬性
    2. 設定 CSS 標題屬性和 CSS 連結屬性
    3. 處理文字
    4. 尋找和取代文字、標籤和屬性
    5. DOM 面板
    6. 在即時檢視中編輯
    7. 在 Dreamweaver 中進行文件編碼
    8. 在文件視窗中選取並檢視元素
    9. 在屬性檢視窗中設定文字屬性
    10. 檢查網頁拼字
    11. 在 Dreamweaver 中使用水平線
    12. 在 Dreamweaver 中新增和修改字體組合
    13. 使用資源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中建立和管理最愛資源
    16. 在 Dreamweaver 中插入及編輯影像
    17. 新增媒體物件
    18. 在 Dreamweaver 中加入視訊
    19. 插入 HTML5 視訊
    20. 插入 SWF 檔
    21. 新增音效效果
    22. 在 Dreamweaver 中插入 HTML5 音效
    23. 使用圖庫項目
    24. 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
  10. 連結和導覽
    1. 關於連結和導覽
    2. 連結
    3. 影像地圖
    4. 連結疑難排解
  11. jQuery Widget 和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和 Mobile Widget
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 撰寫網站程式碼
    1. 關於在 Dreamweaver 中撰寫程式碼
    2. Dreamweaver 的程式碼撰寫環境
    3. 設定程式碼撰寫偏好設定
    4. 自訂程式碼色彩標示
    5. 撰寫和編輯程式碼
    6. 程式碼提示和程式碼完成
    7. 收合和展開程式碼
    8. 利用片段重複使用程式碼
    9. Lint 程式碼
    10. 最佳化程式碼
    11. 在設計檢視中編輯程式碼
    12. 使用頁面的檔頭內容
    13. 在 Dreamweaver 中插入伺服器端包含
    14. 在 Dreamweaver 中使用標籤資料庫
    15. 匯入自訂標籤到 Dreamweaver
    16. 使用 JavaScript 行為 (一般說明)
    17. 套用內建的 JavaScript 行為
    18. 關於 XML 與 XSLT
    19. 在 Dreamweaver 中執行伺服器端 XSL 轉換
    20. 在 Dreamweaver 中執行用戶端 XSL 轉換
    21. 在 Dreamweaver 中新增 XSLT 字元實體
    22. 格式化程式碼
  13. 跨產品工作流程
    1. 安裝與使用 Dreamweaver 的擴充功能
    2. Dreamweaver 中的應用程式內更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文件 (僅適用於 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 編輯 Dreamweaver 網站的內容
    6. Dreamweaver-Business Catalyst 整合
    7. 建立個人化的電子郵件行銷活動
  14. 範本
    1. 關於 Dreamweaver 範本
    2. 辨識範本和以範本為架構的文件
    3. 建立 Dreamweaver 範本
    4. 建立範本的可編輯區域
    5. 在 Dreamweaver 中建立重複區域和表格
    6. 使用範本中的選擇性區域
    7. 在 Dreamweaver 中定義可編輯的標籤屬性
    8. 如何在 Dreamweaver 中建立巢狀範本
    9. 編輯、更新和刪除範本
    10. 在 Dreamweaver 中匯出及匯入 XML 內容
    11. 對現有的文件套用或移除範本
    12. 編輯 Dreamweaver 範本的內容
    13. Dreamweaver 中範本標籤的語法規則
    14. 設定範本區域的標示偏好設定
    15. 使用 Dreamweaver 範本的好處
  15. 行動裝置和多螢幕
    1. 建立媒體查詢
    2. 為行動裝置變更頁面方向
    3. 使用 Dreamweaver 為行動裝置建立網頁用程式
  16. 動態網站、網頁和網站表單
    1. 了解網頁用程式
    2. 設定您的電腦以進行應用程式開發
    3. 疑難排解資料庫連線
    4. 在 Dreamweaver 中移除連線 Script
    5. 設計動態網頁
    6. 動態內容來源總覽
    7. 定義動態內容的來源
    8. 將動態內容新增至頁面
    9. 在 Dreamweaver 中變更動態內容
    10. 顯示資料庫記錄
    11. 在 Dreamweaver 中提供即時資料及進行疑難排解
    12. 在 Dreamweaver 中新增自訂伺服器行為
    13. 使用 Dreamweaver 建立表單
    14. 使用表單向使用者收集資訊
    15. 在 Dreamweaver 中建立及啟用 ColdFusion 表單
    16. 建立網站表單
    17. 加強對 HTML5 表單元素的支援
    18. 使用 Dreamweaver 開發表單
  17. 以視覺化方式建立應用程式
    1. 在 Dreamweaver 中建立主要和細節頁面
    2. 建立搜尋及結果頁面
    3. 建立記錄插入頁面
    4. 在 Dreamweaver 中建立更新記錄頁面
    5. 在 Dreamweaver 中建立記錄刪除頁面
    6. 在 Dreamweaver 中使用 ASP 命令修改資料庫
    7. 建立註冊頁面
    8. 建立登入頁面
    9. 建立唯有授權用戶才能存取的頁面
    10. 使用 Dreamweaver 保護 ColdFusion 中的資料夾
    11. 在 Dreamweaver 中使用 ColdFusion 組件
  18. 測試、預覽和發佈網站
    1. 預覽頁面
    2. 在多部裝置上預覽 Dreamweaver 網頁
    3. 測試 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 應用程式之外自行編譯這些檔案。
您的工作流程將與下列步驟類似:

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

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

註解:

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

如果您沒有定義的網站,則可選擇手動編譯您的 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 預處理器,而無需在每次切換網站時更新偏好設定。

註解:

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

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

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

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

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

啟用存檔時的自動編譯

請選取此核取方塊,以啟用 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 檔案中的設定。此外,在「網站設定」對話方塊中所做的變更並不會影響編譯。

為 Compass 設定「來源和輸出」設定
為 Compass 設定「來源和輸出」設定

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

來源和輸出 CSS 預處理器設定
來源和輸出 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 檔案。

  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 為基礎的設定檔」,並瀏覽至檔案位置。
    4. 完成時按一下「儲存」。
    指定現有以 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、Bourbon Neat 或 Bourbon Bitters 檔案

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

  1. 在「網站設定」對話方塊中,選取「CSS 預處理器 > BourbonBourbon NeatBourbon 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 檔案的資料夾。

    取代輸入路徑區段

    此選項可讓您使用「從」和「到」字串取代一部分的路徑。

  4. 指定包含 Dreamweaver 所追蹤的 Sass 或 LESS 檔案的資料夾。

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

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

    註解:

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

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

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

註解:

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

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

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

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

手動編譯 CSS 預處理器檔案

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

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

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

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

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

Adobe 標誌

登入您的帳戶

[Feedback V2 Badge]