Editing and debugging your Sass code in a browser_Sass and Compass Designer's Cookbook-QQ阅读男频玄幻网

上QQ阅读APP看书，第一时间看更新

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 CSS source maps to debug your code recipe first before starting with the current recipe. Of course, you will also need Ruby Sass; refer to the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass, to find out how to install Ruby Sass.

How to do it...

Copy the source files from the Using CSS Source maps to debug your code recipe. Follow these steps:

Use the following command to compile your Sass code:
```
 sass sass/main.scss css/main.css
```
Then, start watching the Sass and CSS files by running the following command:
```
 sass --watch sass:css
```
Open your index.html file in Google Chrome with the file:// protocol.
Right-click with your mouse and choose the Inspect Element option to open Chrome's Developer Tools.
Click on the Settings icon in the upper-right corner; the setting panel should open now. In the Settings panel, you can add a folder to your workspace. Add the folder that contains both the sass and css folders of your project. The following screenshot will show you how the workspace's settings should look:
Make sure that both the Enable CSS source maps and Auto-reload generated CSS options in the Settings panel are enabled, as is shown in the following screenshot:
Then, in the Element tab of the developer tools, select an element of your HTML page and click on the hyperlink to the .scss file on the right-hand side. This should open your .scss file in the file editor.
Now, you will see your file and folder structure twice under the Sources tab, as seen in the next screenshot:

The first folder group represents the files under the file:// protocol, while the second group is your file system.
Now, you will have to link your filesystem files to the files served under the file:// protocol by the browser. Right-click on a .scss file of your filesystem. Choose the Map to network resource… option and connect the file with the same file under the file:// protocol. You can see how this step should look in the following screenshot:
Restart the developer tools when the browser asks you to do so. Now, both file structures should be merged under the Sources tab, as seen in the following screenshot:
Now you can edit the .scss files in the file editor. Use Ctrl + s or right click on the mouse menu to save your files.
After saving your changes, the browser will reload the newly compiled CSS code, and you can immediately see how your new style rules will look.

How it works...

When you save your file in the browser, the changes are saved to your local filesystem due to the mapping done in the tenth step of this recipe with the network resources.

The Sass compiler, which runs with the --watch option, watches for file changes and recompiles the CSS code when a file change is detected. The browser in turn automatically reloads the linked CSS files when changes are detected.

As you have already read in the Using CSS source maps to debug your code recipe of this chapter, you do not have to explicitly set the required source map option. Sass creates source maps by default.

There's more...

In this recipe, you have linked the resource using the file:// protocol with your local filesystem; you can also run a local web server and connect your resource via the http:// protocol with your local filesystem. You can even use an external web server. When using an external web server, you should realize that changes are only saved on your local filesystem.

When using a browser other than Google Chrome, the first step is to compile and check whether your files of this recipe will not differ. Further steps may differ depending on your browser.

In the Getting grunt watch for Sass, and LiveReload to work recipe of Chapter 16, Setting up a Build Chain with Grunt, you can read how to watch your files with the gulp-watch plugin. With the gulp-watch plugin and live reload, you can use an external text editor to change your files and see the effects in your browser without having to reload your page. Instead of the Gulp build chain, you can also use the compilation process described in this recipe together with live reload.

In the Installing Compass recipe of Chapter 1, Getting Started with Sass, you can read about how you can install Compass. After installing Compass, you can use the Compass mixins in your code by using the --compass option. When running Sass to watch your files, you should specify both the options, as follows:

sass --watch sass:css --compass

In the same way, you can load other libraries by using the --require option.