Editing and debugging your Sass code in a browser

When you directly edit your Sass code in a browser, you will immediately see the effects of your changes. To save your change, the browser should have access to your local file system. Browsers cannot access your file system by default. In this recipe, you will read about the steps required to edit in a browser and save your files.

Getting ready

In this recipe, the Google Chrome browser has been used. Browser editing is also possible with the Mozilla Firefox web browser.

Browser editing and debugging requires CSS source maps. CSS source maps are discussed in the next recipe of this chapter. You can repeat the steps in this recipe with any web page that uses CSS code built with Sass.

For this recipe, the Sass and HTML files from the Using CSS source maps to debug your code recipe are used again. These files are included in the download source code of this book. For a better understanding of the code used, it is recommended that you read the Using...