sass sourcemap詳細使用

時間 2019-11-14

標籤 sass sourcemap 詳細使用简体版

原文原文鏈接

新發布的Sass 3.3版本，將Source Maps正式歸入了Sass中。這也成爲Sass新版本的一大亮點，一大新功能。讓廣大Sass愛好者能夠直接在瀏覽器中更容易調試本身的代碼和Debug相關操做。其實早在2013年七月份Umar Hansa在《Developing With Sass and Chrome DevTools》就詳細介紹瞭如何使用Sass的Source Maps功能幫助你們在瀏覽器中更好的調試SCSS(或Sass)代碼。文中有一張gif的動畫演示圖，能夠一展Source Maps的魅力：css

若是你不太喜歡閱讀英文，或以移步閱讀早前發佈的一篇有關於Sass調試的教程。html

雖然中英文教程都有，但在羣裏不時會有不少同窗問，如何在瀏覽器中調試？如何開啓瀏覽器的Source Maps功能？個人瀏覽器爲何不能開啓？個人瀏覽器爲何沒有Source Maps的功能？等等一系列的問題。那麼今天我就老調重談，經過本身在Chrome和Firefox測試版本中的實戰和你們聊聊如何使用Sass Source Maps功能。web

什麼是Source Maps?

在當今天現代化的工做流程中，咱們在開發環境中編寫代碼已經有了很大的變化。而Source Maps又發揮了其具大的做用，可能在生產代碼中直接精確映射出原始開發的代碼。而Source Maps並不單一的僅爲Sass這樣的預處理器語言服務。咱們來看一個對Source Maps的簡單描述：chrome

Source maps offer a language-agnostic way of mapping production code to the original code that was authored.vim

我對Source Maps簡單的理解就是，我能夠在生產代碼中直接找到對應的原始開發代碼，並且還能實現精確的映射。這樣咱們在瀏覽器查看渲染出來的代碼時，我能夠找到對應的代碼，而後精確映射到原始的開發代碼中。這樣提供了一個優點，開發人員更便於閱讀代碼和調試代碼。瀏覽器

上面彷佛說的有些囉嗦，那麼我在這裏僅拿一個示例來演示Source Maps在使用Sass進行開發項目時，給開發者帶來的優點。至於Source Maps其餘功能的應用，你要是感興趣能夠閱讀Sayanee Basu寫的教程《Source Maps 101》。sass

接下來，咱們仍是回到Sass的Source Maps當中來吧。app

瀏覽器

到目前爲止，支持Soure Maps的瀏覽器並非全部的都支持，在寫這篇文章之時，我僅知道Chrome v23+、Chrome Canary v29+和Firefox 29測試版本。本文如下測試所使用的瀏覽器版本爲：less

Google Chrome 版本號：33.0.1750.149
Firefox Aurora 版本號：29.0a2
Google Chrome Canary 版本號：35.0.1886.0

因爲Google Chrome和Google Chrome Canary操做步驟同樣，因此在下文中主要使用Google Chrome和Firefox Aurora兩個瀏覽器作爲案例演示。如沒有特別進行聲明，其版本號都是以上面所列版本號。編輯器

特別注意，下載安裝Firefox Aurora瀏覽器以後，在運行之時須要先退出Firefox瀏覽器，不然將提示沒法運行Firefox Aurora。

配置環境與建立測試項目

在使用Sass的Source Maps功能，須要確保你有Sass 3.3的運行環境。在此首先默認你已安裝了Sass的運行環境，若是你不清楚你如今Sass的版本，你能夠在你的命令終端掃行：

[airen@airen:/Applications/XAMPP/htdocs/Sites/]$ sass -v
Sass3.3.1 (MaptasticMaple)

若是你的版本號不是上面所示，請先使用：

$ gem update sass

確認更新Sass成功。

一但環境配置OK，爲了能在瀏覽器下測試Sass Source Maps功能，我建議在本身的電腦中建立一個測試項目。例如我這裏簡單的寫了一個測試用例：

HTML

<!doctype html>
<htmllang="en">
    <head>
        <metacharset="UTF-8">
        <title>Sass Source Map實戰</title>
        <linkrel="stylesheet"href="test.css">
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

結構就不作過多解說了，我用在項目中建立了一個test.scss文件，其編譯出來將會是test.css文件，而且在頁面中經過link調用。

SCSS

@charset "UTF-8";

$gap: 5px !default;
$background-color: #f36 !default;$color: lighten($background-color,50%) !default;

ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;

    li {
        width: $gap * 20;
        height: $gap * 10;
        float: left;
        margin: $gap * 2;
        padding: 0;
        background: $background-color;

        &:hover {
            background: darken($background-color, 10%);
        }
    } 
}

用例很是簡單。你們能夠複製這裏的代碼，也能夠按照本身的習慣建立。

用例有了，接下來咱們分別來看看瀏覽器中如何使用Source Maps功能。

Chrome中的Sass Source Maps使用

首先咱們來看一下Chrome瀏覽器中的Source Maps功能。爲了頁面能調用CSS樣式，咱們首先在命令終端經過：

$ sass --watch test.scss:test.css

將test.scss文件中的SCSS代碼編譯成test.css。這個時候在Chrome瀏覽打開建立的html頁面。此時你用開發者工具Firebug查看，並未看到對應的.scss：

特別聲明：爲了後續演示，我建立了一個未開啓Sass Source Maps功能的測試用例，HTML和SCSS代碼都徹底同樣，只是文件命名不同。

形成這種現像其實主要有兩點：

瀏覽器未開啓Source Maps功能；
SCSS文件編譯時未啓用--sourcemap參數

能夠說，這二者缺一不可。

瀏覽器開啓Source Maps功能

在Chrome瀏覽器中，咱們須要進行一些額外的設置，這樣才能啓用Source Maps功能。

首先啓動您的Chrome瀏覽器，並在地址欄中輸入chrome://flags,將「開發者工具實驗」選項選取：

完成這一步以後重啓您的瀏覽器。重啓以後緊接在開發者面板中按下面的步驟進行設置：

打開「Chrome Developer Tools」: View -> Developer -> Developer Tools。或者你直接在頁面中任何地方右鍵點擊，選擇「審查元素」菜單項，這樣也能開啓開發者工具。
點擊打開的開發者工具面板，選擇「設置」，並在"General"中按下圖所示開啓Soure Maps功能

雖然瀏覽器的Source maps功能開啓了，但你仍是沒法如願以嘗在瀏覽器中找到對應的SCSS代碼，你看到的效果依然以下圖所示：

Sass編譯開啓Source Maps功能

前面也提到過，開啓瀏覽器的Source Maps功能，只是其中的一步，咱們還須要在編譯代碼的時候加上--sourcemap參數。如此咱們按這樣的方式進行代碼從新編譯：

$ sass --sourcemap --watch test.scss:test.css

這個時候在你的項目中會自動添加一個叫作test.css.map的文件，其對應的內容：

{
"version": 3,
"mappings": "AAMA,EAAG;EACF,UAAU,EAAE,iBAAiB;EAC7B,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EAEV,KAAG;IACF,KAAK,EAAE,KAAU;IACjB,MAAM,EAAE,IAAS;IACjB,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAQ;IAChB,OAAO,EAAE,CAAC;IACV,UAAU,EAdO,OAAI;IAgBrB,WAAQ;MACP,UAAU,EAAE,OAA8B",
"sources": ["test.scss"],
"names": [],
"file": "test.css"
}

一大串的代碼，我也沒看懂是什麼意思，暫且忽略吧，知道有這麼一個文件產生就好了。此時你在用的你瀏覽器查看你的.html頁面，而且查看代碼，此時你就能看到test.scss文件在開發者工具中展現出來：

走到這一步的時候，你是否是有點激動了。若是是的話，下面的事情讓你更加的激動。你能夠在開發者工具中，找到對應的SCSS文件，點擊以後，能夠在編輯器當中進行編輯：

編輯完成後，點擊你的鼠標右鍵，在彈出的菜單項中，你能夠選擇「保存」或者「保存爲」任一菜單項，你只要將你修改的文件保存到你的項目對應的路徑下：

點擊保存這後，還會提示你是否須要覆蓋之前的文件：

若是你確認替換以後，再次刷新你的瀏覽器，你就能看到對應的變化。這裏須要特別提示，若是你沒有開啓SCSS代碼的watch功能，你刷新瀏覽器是無效的。在此例中，我已開啓了--watch功能。

到這裏，你就完成了在Chrome瀏覽器中使用Source Maps功能，測試和調試你的SCSS。固然除了這種方法設置以外，還有另一種方法。Tim LucasTim Lucas在《Getting started with CSS sourcemaps and in-browser Sass editing》一文中作過詳細描述。感興趣的同窗能夠點擊進去仔細閱讀。

Firefox中的Sass Source Maps使用

在Firefox中實現Sass的Source Maps功能，相對來講較爲簡單一些。你須要知足如下幾個條件：

確認你使用的是Firefox Aurora瀏覽器，若是不是能夠點擊下載。聽說Firefox V29會具備這個功能。
確認你編譯SCSS文件時開啓了--sourcemap

和Chrome瀏覽器相比，在Firefox瀏覽器中省去了瀏覽器的設置這一步，你只須要安裝了對應版本的瀏覽器，那麼瀏覽器的Source Maps功能就開啓了。但在編譯的時候依舊須要開啓Source Maps功能。

在這裏，默認你編譯SCSS文件時開啓了--sourcemap參數。接下來你只須要打開你的Firefox瀏覽器，在地址欄中輸入你要訪問的頁面。當頁面加載成功以後，在頁面任何地方點擊您的鼠標「右鍵」，並選擇「查看元素」菜單項：

友情提示：選擇「查看元素」菜單項，並非選擇「使用Firefbug查看元素」菜單項，由於咱們的工程師平時都使用慣了Firebug。調試CSS之類都是選擇這個，但在使用Sass Source Maps可不是。可得記住了。

此時你會看到這樣的一個面板：

此時你可能會失望，在面板中看到的依舊是test.css文件，和之前的沒有兩樣。其實不用太着急，繼續往下看。你在彈出的面板上，點擊鼠標「右鍵」，在彈出的菜單項中選擇「顯示原始來源」：

激動人心的一刻又來了，你在面板中看到的再也不是test.css文件，而是test.scss文件：

接下來，要問的就是怎麼編輯了，其實很簡單，你只須要按下圖所示進行操做：

在右邊你就能夠進行代碼的調試，修改。而後點擊左邊對應文件旁邊的「保存」按鈕，就能夠保存你在瀏覽器修改的SCSS文件：

保存按鈕點擊以後，在Firefox瀏覽器中不會像Chrome瀏覽器那樣，彈出對話框，他會直接保存項目中對應的文件源。這個時候你在你的編輯器中查看你的test.scss文件，你會看到代碼已作修改：

你也能夠直接刷新你的瀏覽器，在瀏覽器之中，你就能看到對應的修改效果。

到此，那在Firefox使用Sass Source Maps功能也介紹完了。這個旅程也將結束，是否是讓你激動一回了呢？

擴展閱讀

總結

這篇文章主要經過圖解的方式，向你們演示瞭如何在Chrome和Firefox中實現Source Maps的功能，幫助你們直接在瀏覽器中編輯和調式你的SCSS(Sass)文件。據我所瞭解，在Firefox中也能夠經過Source Maps功能調試和編輯LESS文件，若是你是一位LESS愛好者，這也將讓你大大提升你的工做效率。固然若是你對Sass Source Maps有其餘的體驗或技術，歡迎在下面的評論中與咱們一塊兒分享。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。