Chrome開(kāi)發(fā)工具 使用 CSS 預(yù)處理器

使用 CSS 預(yù)處理器

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

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

如果要跳轉(zhuǎn)到源文件：

• 在源面板中點(diǎn)擊相應(yīng)鏈接可打開(kāi)（可編輯的）源文件。
• Control + 鼠標(biāo)左鍵（或者在Mac上用 Command + 鼠標(biāo)左鍵）點(diǎn)擊 CSS 屬性名或者屬性值可以打開(kāi)源文件并且跳轉(zhuǎn)到相應(yīng)的行。

當(dāng)你通過(guò) DevTools 來(lái)保存對(duì) CSS 預(yù)處理器做出的更改時(shí)，CSS 預(yù)處理器會(huì)重新生成 CSS 文件。然后 DevTools 會(huì)重新加載新生成的 CSS 文件。

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

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

要求

使用 CSS 預(yù)處理器的時(shí)候有一些要求需要滿(mǎn)足：

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

python -m SimpleHTTPServer

啟用 CSS 源映射

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

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

• 打開(kāi) DevTools 設(shè)置，然后點(diǎn)擊 General。
• 打開(kāi) Enable CSS source maps 和 Auto-reload generated CSS。

利用 CSS 源映射來(lái)使用 Sass

要在 Chrome 中實(shí)時(shí)編輯 Sass 文件，你需要3.3以上的 Sass，因?yàn)橹挥羞@樣才支持源映射。

gem install sass

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

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

CSS 預(yù)編譯器支持

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

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

源映射是如何工作的

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

/*# sourceMappingURL=<url> */

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

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

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

Sass 會(huì)生成一個(gè) styles.css 文件并且在后面添加源文件路徑映射的注釋?zhuān)?/p>

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

下面是關(guān)于源映射文件的例子：

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

參考資源

很多開(kāi)發(fā)者會(huì)在使用 CSS 預(yù)處理器的過(guò)程中形成自己的工作流。有關(guān)教程和備用工作流的內(nèi)容請(qǐng)參照下面的文章：

• 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

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

以上內(nèi)容適用于 CC-By 3.0 license