Use Chrome to map the sass corresponding to the search Style

The newer version of sass (3.3 +) supports the source-map function, which can be used with Google Chrome or livestyle to map and find the corresponding style.

To generate a source-map, you can use the grunt-contrib-sass plug-in grunt. If ourcemap: 'none' is not configured in options, the matching is automatically generated by default during sass compilation. map file:

The following describes how to enable the sass file ing function in Google, as well as writing a memo to yourself.

First, enterChrome: // flagsGo to the experiment function configuration page and find"Enable developer tool labAnd click the "enable" link:

Then restart chrome. Open the developer tool (CTRL + shit + I) and click the gear icon (setting button) in the upper-right corner of the column ):

On the genneral tab, make sure that "enable CSS source maps" is selected:

A slightly older Chrome may also need to check support for sass on the experiments tab, but the new Google browser has canceled this item.

When you try to use the chrome developer tool to detect the element CSS style, you will find that it can help you map it to the corresponding sass file (even if your CSS file is compressed ):

 

Finished ~ Sharing ~

Use Chrome to map the sass corresponding to the search Style