Using less in asp.net applications

Everyone is talking about how cool less is, and if you're not sure what less is, then you're probably out. Less extends CSS to provide dynamic behavior such as variables, mixes, functions, namespaces, and so on. With less, you just have to write a CSS once to use it in multiple places, which I've always wanted, and now it's coming.

There are some CSS frameworks that implement the same functionality, such as SASS, but I'm still used to less, and this article describes how to use less in asp.net.

Because I met some problems using Visual Studio 11, in the following example we used Visual Studio 2010.

running less on the client

Less can be run on a pure client, that is, the conversion of less to CSS is done directly on the browser.

The following three steps are required: the introduction of less JavaScript file to modify the rel= "Stylesheet/less" in the CSS is added on the page. Introduction of Less

As shown below:

<link href= "styles/my.less" rel= "stylesheet/less"/> <script src=
"Http://lesscss.googlecode.com/files" /less-1.3.0.min.js "></script>

Then we create less files, name them here as my.less, and write some simple styles:

@oschina-back-color: #000;
@oschina-font-color: #fff;
Body {
  background-color: @oschina-back-color;
  Font-size:. 85em;
  font-family: "Trebuchet MS", Verdana, Helvetica, Sans-serif;
  margin:0;
  padding:0;
  Color: @oschina-font-color;
}

We do not introduce specific less syntax, if you look at the browser's developer tools, you see only CSS code

running less on the server side

There are many ways to make less run on the server, the easiest way is through NuGet, and then you can use the following command to install a package named dotless:

After the installation is successful, you can remove the JavaScript introduction from the page and remove the ref attribute in the less:

The package will add some entries to your Web.config file, as follows:

<configSections>
  <section name= "dotless" type= "dotless". Core.configuration.DotlessConfigurationSectionHandler, dotless. Core "/>
</configSections/>
<dotless minifycss=" false cache= "true" web= "false"/>

A new HTTP processor was added to handle the. Less request

<system.webServer>
  
 
This thing can also automatically compress CSS code, remove some useless space and line, you said you see the CSS is like this:



This is the way to use less on the server side.

when to use. 


The previous introduction is the way to use less in the development process, but if you want our site to be very fast, there is no need to compile less every time you request it. The good news is that the dotless installation will be shipped with the Dotless compiler, located in the Packages\dotless1.3.0.0\tool directory of your site project.

You can add it to the Pre-build event in the Build Property tab.

"$ (SolutionDir) packages\dotless.1.3.0.0\tool\dotless. Compiler.exe "" $ (ProjectDir) content\my.less "$ (projectdir) content\my.css"



This is the best way to handle it.

Append: vs2015 in Build Events edit Lesse to generate CSS considerations:




$ (SolutionDir) packages\dotless.1.5.2\tool\dotless. Compiler.exe   $ (ProjectDir) css\one.less  $ (ProjectDir) css\one.css
$ (solutiondir) packages\ Dotless.1.5.2\tool\dotless. Compiler.exe   $ (ProjectDir) css\two.less  $ (ProjectDir) css\two.css
 
In addition, Lessextension also offers some great extension tools, such as syntax coloring and so on you can try to see. Less's grammar

About less syntax you can read Oschina's previous article: a detailed comparison of three CSS preprocessor (framework): Sass, less, and Stylus

 There is also a PPT about less CSS please see here.