I am working on a Metro-app for Windows 8 and using MS Visual Studio 2012. Currently I’m using SASS and Compass to automatically convert SCSS to CSS when I save the SCSS-file.
What I want is to be able to change the CSS at runtime. That is; I want to have the SCSS-file open on my right screen and when I make changes to it the running application on the left screen shows the changes. Currently I have to refresh the app in visual studio, but that does not preserve state.
So to summerize:
- I have successfully installed Compass and SASS. When I change a SCSS file the CSS file (which is included in the project) is re-generated correctly
- My running app does not reflect the changes made in the CSS-file. I need to reload the app in order to show the changes.
- I want to be able to see the changes at runtime.
Any suggestion or help is much appreciated! I am willing to convert to LESS if needed.
Microsoft Visual Studio 11 comes with an application called Blend (previously Expression Blend). In Visual Studio you can open a project in blend by right-clicking it in the solutions explorer and choose “Open in Blend”.
In Blend it is possible to use something called “interactive mode” to switch states in the application and then freeze them to do CSS-changes. The CSS-changes made in Blend will automatically be displayed, even though the state is freezed.
One may also want to activate the option of reloading files in blend on changes without prompting. This will make it possible to watch changes done using SASS on the fly inside Blend. One downside is that Blend needs to get focus in order to reload the CSS-files. Up-side is that it does not reset state-information, thus making it possible to style pop-ups and dialogs with ease.
One can also choose to use the built-in GUI to change CSS with ease. The problem of doing this is that Blend do not support SCSS, so you will have to copy the modified CSS generated by use of Blend into the appropriate SCSS-files.
More on Blend and VS11 here.