The question at hand fails to provide a complete picture of the situation. While I am familiar with Workspaces and SASS source-maps, I can already track the line in the scss file where the specific rule is located that I wish to modify, thanks to the Styles panel.
This capability marks an important milestone in my workflow, but what would truly enhance efficiency for me is the ability to visualize changes in real-time as I make them and have DevTools automatically save them. This way, I could adjust elements instantly.
This functionality is already achievable with plain CSS. In fact, DevTools updates the css file instantaneously even when SASS is running. However, any modification to the scss file prompts SASS to recompile, resulting in the loss of the change made by DevTools in the css file.
As the saying goes, "An image is worth more than 1000 words," so: https://i.sstatic.net/OuAKg.png
- I can adjust the left property of the red div on-the-fly using my arrow keys while visualizing the changes immediately. This eliminates the manual process of making tweaks, saving, checking the appearance, readjusting, saving again, and so forth.
- If I decide to alter the left property, I simply click on the scss file and make the necessary adjustments in the Sources panel. Upon saving the changes, I can view their effect. Yet, the instantaneous visualization feature seen with plain CSS remains unavailable.
Is there a method to replicate the instant update functionality observed with css files in the Styles panel for scss files?
This need not necessarily be addressed within DevTools. Perhaps there exists an option for SASS to monitor changes bidirectionally (not just from scss to css).
Despite searching for solutions in both directions, I have come up empty-handed. Any assistance would be greatly appreciated!