workspace - Chapter 13

Another hidden feature that is interesting is the ability to change the values in the browser and the same gets saved permanently in the stylesheets ( as long as the source is in your local system and not in a server ).

We need to create a workspace, and once that workspace is mapped to our folder, any change on our partials in the browser debugging will be saved back in the original partial stylesheets.

Select the "Enable CSS Source maps" along with the "Auto reload generated css" feature.
Once done, select the workspace tab on the left. Click "Add folder" & Navigate to the local path where your application folder exists and select them. Click Ok.

Once done, it will be asking for a confirmation. Click Allow.

Then go to the "Sources tab" , Select the app.scss which is the scss that is converted to css, Right click and select "Map to File system resource"..

And then it will pop up the name of the scss ( app.scss ) once more. Hit the Enter key.
Thats it!

Now go to your browser debugging, change the values there and see that the change is reflected in the browser as well as the latest is updated back in the scss partial.

Cool indeed! But wait..there is a problem. CHeck the app.css stylesheet and we can see that the css is updated with the new color "Goldenrod". But the scss stylesheet is still the old initial color.

To avoid this confusion, take the corresponding scss file in the Sources tab, and make the required changes.

Now, if we go back to the scss file, the same, as well as the compiled css will be in sync.

Source maps - Chapter 12

One silent , but very handy feature when it comes to debugging is the source mapping.
We write a pre-processing language- scss, but thats alien to browsers. It understands only css stylesheets. Our compiler converts the scss into css.

But what about debugging?
When we take our browser debugging tools, it points to our css file only right? But then with pre-processors, we are not touching css at all. So there is no point in knowing the line corresponding to css, but would have been awesome it pointed out to "this particular line in this partial." . That is what source maps does for us.

The command line based options, or a pre-processing complier, all provides the corresponding css source maps when the scss file is compiled. Usually both will be in the same folder, same name, but with a .map extension.

We get a css file, along with its map file when we compile the scss. ( Here, i have used the "Prepros" tool which compiled my scss to create the map as well as css stylesheet )

See the difference in the below figure.

With the source map, it pointed out the exact line number along with the corresponding partial name. (header.scss ) instead of the app.css which we see without sourcemap.

Highlighting codes

This was done with : http://markup.su/highlighter/

.hero{
   width:100%;
   height:auto;
   overflow:hidden;   
   .banner{
      max-width:100%;   
   }
}
.main-section-wrapper{
    background-color:$white;
    padding: 10px 70px;
    padding-bottom: 30px;
}
.banner-description{    
    margin-bottom: 20px;        
     h2{
       @extend .caps-heading;
    }
    p{
       color:$black;
    }
}