使用 CSS 預處理器

許多開發(fā)者使用 CSS 預處理器來產(chǎn)生 CSS 樣式表，比如 Sass， Less 或者 Stylus。因為 CSS 文件是生成的，直接修改 CSS 文件是沒有用的。

對于支持 CSS 源映射（source maps）的預處理器， DevTools 允許你在源面板中實時編輯預處理器的源文件，并且不需要離開 DevTools 或者刷新頁面就能查看結果。當你審查生成的 CSS 文件提供的樣式元素時，元素面板會顯示一個鏈接到源文件的鏈接，而不是生成的 .css 文件。

如果要跳轉到源文件：

• 在源面板中點擊相應鏈接可打開（可編輯的）源文件。
• Control + 鼠標左鍵（或者在Mac上用 Command + 鼠標左鍵）點擊 CSS 屬性名或者屬性值可以打開源文件并且跳轉到相應的行。

當你通過 DevTools 來保存對 CSS 預處理器做出的更改時，CSS 預處理器會重新生成 CSS 文件。然后 DevTools 會重新加載新生成的 CSS 文件。

在外部編輯器中做出的修改不會被 DevTools 偵測到，除非 Source 選項卡包含的相關源文件重新獲得了焦點。而且，手動編輯由 Sass/LESS/ 其他編譯器 產(chǎn)生的 CSS 文件將會中斷源映射的關聯(lián)，直到重新加載頁面為止。

如果你正在使用 Workspaces（工作空間），你需要確認產(chǎn)生的文件是否映射到了 Workspace 中。你可以在源面板右側的樹中來查看并驗證源自本地的 CSS。

要求

使用 CSS 預處理器的時候有一些要求需要滿足：

• 如果要使用該工作流，你的 CSS 預處理器必須支持 CSS 源映射，特別是源映射 v3 協(xié)議。CSS 源映射必須和 CSS 文件一同建立，所以 DevTools 可以將每個 CSS 屬性映射到源文件中的正確位置。（比如，.scss 文件）
• 為了讓你改動源文件時， DevTools 會自動加載樣式，你的預處理器必須設置為當源文件發(fā)生變動時就重新生成 CSS 文件的模式。否則，你只有手動創(chuàng)建新的 CSS 文件并重新加載頁面后才能查看到生效后的更改。
• 你必須從 web 服務器來訪問你的站點或者應用（不是一個類似于 file:// 的 URL），而且服務器必須能夠支持 CSS 文件以及源映射（source map）（.css .map）和源文件（.scss）。
• 如果你沒有使用工作空間的特性，那么 web 服務器也必須能夠提供上次修改的文件頭。Python SimpleHTTPServer 模塊默認會提供這個文件頭。你可以像這樣啟動一個 web 服務來服務當前目錄：

python -m SimpleHTTPServer

啟用 CSS 源映射

默認情況下，CSS 源映射是啟用的。你可以選擇是否要啟用自動重新加載生成的 CSS 文件模式。

如果想要啟用 CSS 源映射，重載 CSS 文件，請參照以下步驟：

• 打開 DevTools 設置，然后點擊 General。
• 打開 Enable CSS source maps 和 Auto-reload generated CSS。

利用 CSS 源映射來使用 Sass

要在 Chrome 中實時編輯 Sass 文件，你需要3.3以上的 Sass，因為只有這樣才支持源映射。

gem install sass

當 Sass 安裝好以后，開啟 Sass 編譯器來監(jiān)測你的 Sass 源文件的改變并為每個產(chǎn)生的 CSS 文件創(chuàng)建源映射文件，例如：

sass --watch --sourcemap sass/styles.scss:styles.css

CSS 預編譯器支持

DevTools 支持 Source Map Revision 3 proposal。該協(xié)議在幾個 CSS 預編譯器中實施（2014年8月更新）：

• Sass：如上面所說的，在 Sass 3.3 以后支持。
• Compass：--sourcemap 標簽在 Compass 1.0 后開始使用。你可以在 config.rb 文件中加入 sourcemap: true 來選擇是否啟用。這里有一份 Demo 可供參考。開發(fā)日志在 issue 1108。
• Less：從1.5.0中開始實現(xiàn)。參考 issue #1050 來了解詳細信息和使用模式。
• Autoprefix：從 1.0 中開始實現(xiàn)。Autoprefixer docs 說明了怎么使用它，以及怎么（從另一個預處理器中）接收一個輸入的源映射。
• Libsass：詳細。
• Stylus：已支持，最新的信息請見 issue #1655。

源映射是如何工作的

對于每個生成的 CSS 文件，預處理器另外為編譯的 CSS 生成一個源映射文件（.map）。源映射是一個 JSON 格式的文件，它定義了每個生成的 CSS 聲明和在原文件中相應行的映射。每個 CSS 文件的最后一行都會含有一個說明其源文件路徑的特別注釋。

/*# sourceMappingURL=<url> */

例如，給定一個名為 styles.css 的 CSS 文件：

$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass 會生成一個 styles.css 文件并且在后面添加源文件路徑映射的注釋：

h2 {
  font-size: 26px;
  color: red;
  background-color: whitesmoke;
}
/*# sourceMappingURL=styles.css.map */

下面是關于源映射文件的例子：

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK"
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

參考資源

很多開發(fā)者會在使用 CSS 預處理器的過程中形成自己的工作流。有關教程和備用工作流的內容請參照下面的文章：

• Getting Started with CSS sourcemaps and in-browser Sass editing
• Faster Sass debugging and style iteration with source maps, Chrome Web Developer Tools and Grunt

注意：外部資源可能不是有關最新版 Chrome 的資料。

以上內容適用于 CC-By 3.0 license