在 ASP.NET 应用中使用 LESS

天马3798

于 2015-08-27 21:53:14 发布

阅读量2.4k

点赞数

分类专栏： CSS&Less 文章标签： less css框架

CSS&Less 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

大家都在谈论 LESS 是多么的酷，如果你还不清楚什么是 LESS ，那你可能已经 out 了。LESS 扩展了 CSS 提供动态的行为例如变量、混入、函数、命名空间等等。使用 LESS ，你只需要编写一次 CSS 就可以在多个地方使用，这是我一直都想要的，而现在它来了。

有一些实现同样功能的CSS框架，例如　SASS，但我还是习惯 LESS，本文将介绍如何在 ASP.NET 中使用 LESS。

因为我在使用 Visual Studio 11 会遇见一些问题，在下面的例子中我们使用的是 Visual Studio 2010。

在客户端运行 LESS

LESS 可在纯客户端上运行，也就是直接在浏览器上完成 LESS 到 CSS 的转换。

需要以下三个步骤：

引入 LESS JavaScript file
修改 CSS 中的写法为 rel=”stylesheet/less”
在页面上添加 .less 的引入

如下所示：

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

然后我们创建 LESS 文件，在这里命名为 my.less，编写一些简单的样式：

@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;
}

我们不介绍具体的 LESS 语法，如果你在浏览器的开发者工具上查看，你看到的只是 CSS 代码

在服务器端运行 LESS

有很多方法可以让 LESS 在服务器端运行，最简单的方法就是通过 NuGet，然后你可以使用如下命令来安装名为 dotless 的包：

安装成功后你可以删除页面中的 JavaScript 引入，同时移除 LESS 中的 ref 属性：

<link href="styles/my.less" rel="stylesheet" />

该包将会添加一些条目到你的 web.config 文件中，如下所示：

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

同时添加了一个新的 HTTP 处理器来处理 .less 的请求

<system.webServer>
  <handlers>
   <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
  </handlers>
</system.webServer>

这个东西还可以自动的对 CSS 代码进行压缩，去除一些无用的空格和换行，你说看到的 CSS 是这样的：

这就是在服务器端使用 LESS 的方法。

什么时候使用？

前面介绍的是在开发过程中使用 LESS 的方法，但如果希望我们的网站非常快，没必要每次请求的时候都编译 LESS。好消息是 dotless 安装完会附带上 dotless 编译器，位于你的网站项目的 packages\dotless1.3.0.0\Tool 目录下。

你可以将它添加到构建属性 tab 中的 pre-build 事件中。

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

这是最佳的处理方式！

追加：vs2015 中在生成事件中编辑lesse生成css注意事项：

$(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

另外 LessExtension 还提供一些很棒的扩展工具，例如语法着色之类的你可以尝试看看。