How to reflect updates to CSS at runtime in Visual Studio 2012?


Tags: css,sass,microsoft-metro,compass-sass,visual-studio-2012

Problem :

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.



Solution :

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.


    CSS Howto..

    Having Two HTML issues with PHP DOM: 1.) DOMDocument::createEntityReference $name values and 2.) how to add multiple CSS classes an element?

    how to align text input in Angular-Material tool bar?

    How to write regular expressions in CSS

    How to put inline circles made in CSS under each other when screen scales?

    How to send CSS to the client using HTTP response headers?

    How can mono social icon work without a class per icon?

    How to set div height to 100% of chosen print paper?

    How to change text direction of every line of text using javascript/jquery?

    showing
    inside :before element

    How to achieve this diagonal drop down effect with CSS?

    How to disable css warning “Unknown property” in Eclipse Mars?

    How to call am (image) div inside of a list?

    How do I target a first-child that is visible (after children that are set to display:none), with only CSS

    Jquery Toggle Button image and Div Show/Hide

    how to specify background text rectangle color in CSS

    How to include a google map in an application

    how to horizontally center a div of 10000px (wider than full screen) in CSS?

    How to make a close button for each image inside the div using CSS and js

    How to contain a scrollable div element completely within another?

    How to use CSS in XML and XSL

    How to organize user's shares to easily add comments to that particular post?

    how to alter a css class directly?

    How to align two images in html/css

    How to reset input element style

    How to achieve a left and right background split leaving middle div visible?

    how to stick the footer to the bottom of the page while moving it upward in a parallax-like effect?

    I am not sure how to convert my webpages Table over to divs instead

    How to include library files (css/js) in angular-fullstack based app

    How to position one element relative to a separate element in CSS

    jQuery UI sortable: how to leave css values of changed items untouched?