Razor syntax in <style>

Question

What is the correct syntax for using Razor syntax inside a presentation style tag? I tried two different ways:

 <style scoped> .test1 { background-color: @Model.bgColor; } .test2 { background-color: @(Model.bgColor); } </style> 

Both versions violate syntax highlighting and code indentation in Visual Studio 2012 (version 11.0.60610.01 Update 3).

Any idea? Thanks!

Answer 1

Try the following:

 @{ var mystyle = string.Concat("<style scoped> .test1 { background-color: ", Model.bgColor, "; } .test2 { background-color: ", Model.bgColor, "; } </style>"); } @MvcHtmlString.Create(mystyle) 

Edit

@IngmarBobe sorry, but I tested these two examples in the same version of VS2012 and worked fine.

 <style scoped> .test1 { background-color: @Model.BgColor; } .test2 { background-color: @(Model.BgColor); } </style> 

and

 @{ <style scoped> .test1 { background-color: @Model.BgColor; } .test2 { background-color: @(Model.BgColor); } </style> } 

What data type is "BgColor" ?. In my tests, "BgColor" is defined this way and it works well:

 public string BgColor { get { return "#611546"; } } 

Answer 2

Because @ significant in CSS, the editor is likely to have difficulty defining CSS or the Razor context.

Use a partial view to prevent splitting the syntax highlighting for your main view.

 public class StyleModel { public string BgColor { get; set; } } 

main view

 @model MainViewModel @Html.Partial("BgStylePartial", new StyleModel { BgColor = Model.BgColor }) 

BgStylePartial

 @model StyleModel <style> .test1 { background-color: @Model.BgColor; } </style> 

The backlight is still broken, but it is limited to a much smaller partial view.

Answer 3

Since Visual Studio has not (or never intends to) implement any support for this kind of much needed solution to the Razor problem, here is something that really works ...

Instead of starting to encode your CSS directly inside the views (or partial views), just create a .css file created in Visual Studio, solely for you to do all the CSS coding first. Then just cut / copy and paste the CSS code, when done, into the views where you need them, and, of course, are enclosed in <style> and </style> . Then you can use all your Razor variables and more.

You will not have IntelliSence support for CSS code in views, as you notice when they mix with Razor, and will have problems with things like CSS ' @media and the like. But as soon as the CSS code is in the view, just find and replace all @media with @@ media , and the like, avoiding @ 's. You can use Razor foreach material to implement repetitive materials. And when you need to edit the CSS code again, repeat the process described above.

Personally, I [will never use LESS or SASS unless the client explicitly requires this. The razor is much better than both of them. You can use Razor to seamlessly and seamlessly use database data in your CSS code and do much more. I will continue to use Razor until the W3C implements something to solve this problem of CSS variables and the like.

Answer 4

Unable to recognize the @ symbol in the middle of the CSS declaration. Got it to work with string.Format .

 <style type="text/css"> @foreach(ColorScheme colorScheme in Model.ColorSchemes) { @string.Format(".colorScheme_{0} {{ background-color:#{1}; color:#{2}; }}\r\n", colorScheme.ID, colorScheme.BackgroundColor, colorScheme.ForegroundColor) } </style>