ASP. NET MVC: ASP. NET MVC 4 를 이용 한 IBundleTransform 통합 LESS

배경
LESS 는 정말 괜 찮 습 니 다. 다만 LESS 를 다 쓸 때마다 손 으로 컴 파일 하 는 것 이 좀 귀 찮 습 니 다. (VS 플러그 인 이 설치 되 어 있 지 않 습 니 다) 어제 공식 적 으로 IBundleTransform 으로 LESS 를 통합 하 는 방법 을 보 았 습 니 다. 오늘 기록 하 겠 습 니 다.
참고 자료:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification。
코드
LessTransform

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 using System.Web.Optimization;
 7 
 8 namespace LessStudy.Infrastructure
 9 {
10     public class LessTransform : IBundleTransform
11     {
12         public void Process(BundleContext context, BundleResponse response)
13         {
14             response.Content = dotless.Core.Less.Parse(response.Content);
15             response.ContentType = "text/css";
16         }
17     }
18 }

BundleConfig 에 다음 코드 추가

1             var lessBundle = new Bundle("~/Content/less").IncludeDirectory("~/Content/less", "*.less");
2             lessBundle.Transforms.Add(new LessTransform());
3             lessBundle.Transforms.Add(new CssMinify());
4             bundles.Add(lessBundle);

템 플 릿 에서 참조

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

그리고 LESS 코드 도 말씀 드릴 게 요.
주석 쓰기 와 통 일 된 포맷

  1 /*      */
  2 @span_margin: 20px;
  3 /*      */
  4 @span_width: 60px;
  5 /*    */
  6 @span_length: 12;
  7 /*    */
  8 @px_unit: 1px;
  9 
 10 /*      */
 11 .row
 12 {
 13     margin-left: -@span_margin;/*           */
 14     *zoom: 1;
 15 }
 16 
 17 [class*="span"]
 18 {
 19     float: left;
 20     min-height:1px;
 21     margin-left: @span_margin;
 22 }
 23 
 24 .span (@index) when (@index > 0) 
 25 {
 26     .span@{index}
 27     {
 28         width: (@index * @span_width + (@index - 1) * @span_margin) * @px_unit;
 29     }
 30 
 31     .span(@index - 1);
 32 }
 33 
 34 .span (0) {}
 35 
 36 .span (@span_length);
 37 
 38 .offset (@index) when (@index > 0) 
 39 {
 40     .offset@{index}
 41     {
 42         margin-left: (@index * @span_width + (@index + 1) * @span_margin) * @px_unit;
 43     }
 44 
 45     .offset(@index - 1);
 46 }
 47 
 48 .offset (0) {}
 49 
 50 .offset (@span_length);
 51 
 52 
 53 
 54 
 55 /*      */
 56 
 57 /*           */
 58 @span_width_margin_scale: 3;
 59 /*        */
 60 @span_margin_percentage: (1 / (@span_length * (@span_width_margin_scale + 1) - 1));
 61 
 62 .row-fluid
 63 {
 64     width: 100%;
 65     *zoom: 1;
 66 }
 67 
 68 .row-fluid [class*="span"]:first-child
 69 {
 70     margin-left: 0;
 71 }
 72 
 73 .row-fluid [class*="span"]
 74 {
 75     display: block;
 76     float: left;
 77     min-height: 30px;
 78     margin-left: percentage(@span_margin_percentage);
 79     -webkit-box-sizing: border-box;
 80     -moz-box-sizing: border-box;
 81     box-sizing: border-box;
 82 }
 83 
 84 .fluid_span (@index) when (@index > 0)
 85 {
 86     .row-fluid .span@{index}
 87     {
 88         width: percentage((@index * (@span_width_margin_scale + 1) - 1) * @span_margin_percentage);
 89     }
 90 
 91     .fluid_span(@index - 1);
 92 }
 93 
 94 .fluid_span (0) {}
 95 
 96 .fluid_span (@span_length);
 97 
 98 .fluid_offset (@index) when (@index > 0)
 99 {
100     .row-fluid .offset@{index}
101     {
102         margin-left: percentage((@index * (@span_width_margin_scale + 1) + 1) * @span_margin_percentage);
103     }
104 
105     .fluid_offset(@index - 1);
106 }
107 
108 .fluid_offset (0) {}
109 
110 .fluid_offset (@span_length);

어떻게 CSS 의 스마트 힌트 를 이용 합 니까?
파일 을 추가 할 때 css 를 선택 하고 접미사 이름 을 less 로 수정 하면 됩 니 다.
비고
HTML + CSS 를 배 운 지 일주일 이 되 었 습 니 다. 오늘 웹 사 이 트 를 만들어 보 세 요.