紧跟科技步伐，与时俱进！

LESS确实不错，只是每次写完LESS都要手工编译一下有点麻烦（VS插件一直没有安装好），昨天在官方看到了如何用IBundleTransform集成LESS，今天就记录一下。

参考资料：http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification。

首先要添加NuGet包dotless到你的项目，添加完后如果是在iisexpress环境下可能会报错，报错的话请在web.config中加入以下设置：

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

LessTransform：

Public Class LessTransform
 Implements IBundleTransform

 Public Sub Process(context As BundleContext, response As BundleResponse) Implements IBundleTransform.Process
 response.Content = dotless.Core.Less.Parse(response.Content)
 response.ContentType = "text/css"
 End Sub
End Class

BundleConfig中增加如下代码：

Dim lessBundle = New Bundle("~/Content/css").Include(
			"~/Content/bootstrap.css",
			"~/Content/font-awesome.css"
		).IncludeDirectory("~/Content", "site.less", True)
		lessBundle.Transforms.Add(New LessTransform())
		lessBundle.Transforms.Add(New CssMinify())
		bundles.Add(lessBundle)

在模板中引用：

@Styles.Render("~/Content/less")

顺便说一下LESS的编码:

/*栅格的左边距*/
@span_margin: 20px;
/*栅格的的宽度*/
@span_width: 60px;
/*栅格数量*/
@span_length: 12;
/*像素单位*/
@px_unit: 1px;

/*固定栅格系统*/
.row
{
    margin-left: -@span_margin;/*抵消第一个栅格的左边距*/
    *zoom: 1;
}

[class*="span"]
{
    float: left;
    min-height:1px;
    margin-left: @span_margin;
}

.span (@index) when (@index > 0) 
{
    .span@{index}
    {
        width: (@index * @span_width + (@index - 1) * @span_margin) * @px_unit;
    }

    .span(@index - 1);
}

.span (0) {}

.span (@span_length);

.offset (@index) when (@index > 0) 
{
    .offset@{index}
    {
        margin-left: (@index * @span_width + (@index + 1) * @span_margin) * @px_unit;
    }

    .offset(@index - 1);
}

.offset (0) {}

.offset (@span_length);




/*自动栅格系统*/

/*栅格的宽度和左边距之比*/
@span_width_margin_scale: 3;
/*栅格的左边距比例*/
@span_margin_percentage: (1 / (@span_length * (@span_width_margin_scale + 1) - 1));

.row-fluid
{
    width: 100%;
    *zoom: 1;
}

.row-fluid [class*="span"]:first-child
{
    margin-left: 0;
}

.row-fluid [class*="span"]
{
    display: block;
    float: left;
    min-height: 30px;
    margin-left: percentage(@span_margin_percentage);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fluid_span (@index) when (@index > 0)
{
    .row-fluid .span@{index}
    {
        width: percentage((@index * (@span_width_margin_scale + 1) - 1) * @span_margin_percentage);
    }

    .fluid_span(@index - 1);
}

.fluid_span (0) {}

.fluid_span (@span_length);

.fluid_offset (@index) when (@index > 0)
{
    .row-fluid .offset@{index}
    {
        margin-left: percentage((@index * (@span_width_margin_scale + 1) + 1) * @span_margin_percentage);
    }

    .fluid_offset(@index - 1);
}

.fluid_offset (0) {}

.fluid_offset (@span_length);

如何利用CSS的智能提示呢？
添加文件的时候选择css，然后修改后缀名为less就行了。