Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

.LESS together with Razor

Is it possible to use Razor View Engine (ASP.NET MVC) together with .LESS (similar to SASS - http://lesscss.org/ for .NET), since they're both using "@blah"?

What I want to achieve is to create .LESS css files, mixed with Razor.

UPDATED:

Sorry for being a bit unspecific. What I want to do is to use Razor View Engine WITHIN the .less (dotlesscss) css files. This would be nice in order to e.g. pass site-settings like Theme customized from an admin into the css file.

Problem is that the syntax will crash.

An alternative is to use C# or some other View Engine instead.

like image 398
olemarius Avatar asked Nov 02 '10 18:11

olemarius


People also ask

Can you mix MVC and Razor pages?

You can add support for Pages to any ASP.NET Core MVC app by simply adding a Pages folder and adding Razor Pages files to this folder. Razor Pages use the folder structure as a convention for routing requests.

Does .NET framework support Razor pages?

Razor Pages is included within . NET Core from version 2.0 onwards, which is available as a free download as either an SDK (Software Development Kit) or a Runtime. The SDK includes the runtime and command line tools for creating . NET Core applications.

Which is better MVC or Razor?

Razor pages are better organized, it groups files by purpose and design for the problem it solves. It has a tightly integrated code behind each class it defines for the functionality. They are perfect for simple pages for basic data input and are read-only.

Does MVC use Razor?

Razor is one of the view engines supported in ASP.NET MVC. Razor allows you to write a mix of HTML and server-side code using C# or Visual Basic.


2 Answers

You should consider using Justin Etheredge's SquishIt library. Not only does it include the dotlesscss library, it will combine and minify your CSS and Javascript with ease!

  • Blog post regarding SquishIt
  • Source code on GitHub

Here's an example of how I use SquishIt in Razor.

The following code will combine, minify and LESSify all the CSS files referenced into one CSS file. It will do the same with the Javascript files.

@MvcHtmlString.Create(
  SquishIt.Framework.Bundle.Css()
    .Add("~/media/css/reset.css")
    .Add("~/media/css/style.less")
    .Add("~/media/css/handheld.css")
    .Render("~/media/css/combined_#.css"))

@MvcHtmlString.Create(
  SquishIt.Framework.Bundle.JavaScript()
    .Add("~/media/js/geo.js")
    .Add("~/media/js/jquery-1.4.4.js")
    .Add("~/media/js/jquery.unobtrusive-ajax.js")
    .Add("~/media/js/jquery.validate.js")
    .Add("~/media/js/jquery.validate.unobtrusive.js")
    .Render("~/media/js/combined_#.js"))

Output looks like this:

<link rel="stylesheet" type="text/css" href="/media/css/combined_312454.css" />
<script type="text/javascript" href="/media/js/combined_312454.js"></script>

UPDATE (Over 1 year later)...
Another project you might want to look at is Cassette which pretty much does everything SquishIt does (and more).

like image 184
jessegavin Avatar answered Oct 03 '22 18:10

jessegavin


LESS and the Razor engine are not related.

If you are interested in using LESS, check out dotlesscss. See its Git repository and wiki. For some reason, its main website is down since august and they haven't brought it back up.

like image 29
Pierre-Alain Vigeant Avatar answered Oct 03 '22 18:10

Pierre-Alain Vigeant