Visual Studio (2012 and Lower) Deletes CSS Properties

Visual Studio (2012 and lower) deletes CSS properties

Okay I found a temporary workaround for this:

The existence of the "filter:" style is what's causing all of the "background-image:" styles to disappear except the last one listed. It's not that it's removing what it doesn't know, it's just removing all but the last "background-image" style listed. Must be Microsoft (intended) way of making filter and an MS specific background-image style play nicely together, however they didn't code it up very well. Definitely a MS VS defect. To repro, just right click in the CSS class that has code similar to this:

background-color: #EBEBEB; /* Fallback background color for non supported browsers */  
background-image: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#DAD6E7));  
background-image: -webkit-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -moz-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -ms-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -o-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: linear-gradient(left, #FFFFFF, #DAD6E7);  
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */

and then select "Build Style...". Then click "OK" without changing anything and watch it remove all but the last background-image left. Try changing the order of the "background-image styles and leave webkit last and then see for yourself.

You'll notice that if you remove the "filter:" style the problem goes away, however we need that (for this example) so the solution seems to be moving the "filter:" style above all the "background-image:" lines. Once you do that, it leaves them alone and the problem goes away.

Changing the above CSS to this seems to aleviate the problem:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */
background-color: #EBEBEB; /* Fallback background color for non supported browsers */  
background-image: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#DAD6E7));  
background-image: -webkit-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -moz-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -ms-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -o-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: linear-gradient(left, #FFFFFF, #DAD6E7);  

---

UPDATE:
The workaround above only works for when VS applies formatting when you're using the "Build Style..." --> "Modify Style" dialog because I just saw it again with the fix above in place so it must be from somthing else.

How can I get .less compiler support in Visual Studio 2012 Release 2?

Visual studio doesn't have an auto-compilation feature for less files. It only provides syntax-highlighting for .less files.

You can compile your LESS files using a plugin like Web Workbench or Web Essentials 2012

how can I compile less files

I used a different approuch, I did make use of Web Essentials

for every theme i created a file themex.less where I

1. import main variables (this is not in main file because of error with webessentials)
2. import main file
3. import theme variables which ovverrides the main variables

thats it, pretty simple and straightforward.

How to make Visual Studio stop compiling .js and .css files

Enter the options through

Tools > Options

If it isn't checked, check the "Show all settings" box at the bottom of that window.

In the tree to the left, choose:

Text Editor > CSS > CSS Specific

Uncheck "Detect Errors". Then, choose:

Text Editor > JScript > Miscellaneous

Uncheck "Show syntax errors".

You can also change how it indents each type of code too, in the various settings in those "Text Editor" sub-options.

Can Visual Studio 2013 generate CSS files from .less files?

Yes. While Visual Studio 2013 doesn't come with a LESS compiler built-in (so you'll need to bring your own), you can either use an external compiler, or install an extension so you can compile your LESS files from within the IDE.

---

Related Topics