ASP.NET MVC:利用ASP.NET MVC4的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有一周了,今天做个网站试试。
转载于:https://www.cnblogs.com/happyframework/p/3216326.html
ASP.NET MVC:利用ASP.NET MVC4的IBundleTransform集成LESS相关推荐
- npoi的mvc怎么ajax导出,asp.net mvc利用NPOI导入导出Excel解决方法
asp.net mvc利用NPOI导入导出Excel 导出Excel 2003没有问题,导出Excel2007老是出现无法访问已关闭的流,请帮忙解决,或是哪位有mvc导入导出excel的工具类能提供, ...
- 七天来学习ASP.NET MVC (两)——ASP.NET MVC 数据传输
通过第一天的学习之后,我们相信您已经对MVC有一些基本了解. 本节所讲的内容是在上节的基础之上.因此须要确保您是否掌握了上一节的内容. 本章的目标是在今天学习结束时利用最佳实践解决方式创建一个小型的M ...
- 返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API
返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API 原文:返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 ...
- asp.net mvc 点滴 一 asp.net mvc vs asp.net web forms
MVC模式是一个大家很熟悉的设计模式,微软的asp.net mvc framework是给asp.net web forms提供了一个可替换的asp.net方案. Models:Model对象是程序的 ...
- ASP.NET MVC和ASP.NET Web API跨域请求问题解决方案【最全】
无论是ASP.NET MVC和ASP.NET Web API跨域请求大致分成2种方式 第一种:web.config 配置 第二种:用HttpContext.Response.AppendHeader设 ...
- 【译】Asp.net MVC 利用自定义RouteHandler来防止图片盗链 (转)
你曾经注意过在你服务器请求日志中多了很多对图片资源的请求吗?这可能是有人在他们的网站中盗链了你的图片所致,这会占用你的服务器带宽.下面这种方法可以告诉你如何在ASP.NET MVC中实现一个自定义Ro ...
- [ASP.NET MVC] 利用自定义的AuthenticationFilter实现Basic认证
很多情况下目标Action方法都要求在一个安全上下文中被执行,这里所谓的安全上下文主要指的是当前请求者是一个经过授权的用户.授权的本质就是让用户在他许可的权限范围内做他能够做的事情,授权的前提是请求者 ...
- asp.net mvc 利用过滤器进行网站Meta设置
过去几年都是用asp.net webform进行开发东西,最近听说过时了,同时webform会产生ViewState(虽然我已经不用ruanat=server的控件好久了 :)),对企业应用无所谓,但 ...
- mvc npoi导出excel ajax,ASP.Net MVC利用NPOI导入导出Excel
因近期项目遇到所以记录一下: 首先导出Excel: 首先引用NPOI包 http://pan.baidu.com/s/1i3Fosux (Action一定要用FileResult) /// /// 批 ...
最新文章
- arcengine遍历属性表_【程序之坑】小程序云开发导出数据到excel表
- Java Date Time 教程-java.sql.Timestamp
- jquery学习之重要知识点
- 普通java跑到linux上,JAVA在linux下open too many files
- python 网络连接_python网络连接之tcp通信
- python 微信_wxpy: 用 Python 玩微信
- urlencode python_python爬虫之url中的中文问题
- 孤掌难鸣-------堵水眼
- leetcode350. 两个数组的交集 II
- Lambda 表达式详解~Streams API~规约操作
- 微信 for Mac 3.1.0 测试版发布(附安装包),新增「发朋友圈」功能
- 计算机科学与技术专题,专题四 计算机科学与应用技术.ppt
- (22)System Verilog按时间顺序的通知需求(事件驱动)
- express中的错误处理
- [elixir! #0016] 在 phoenix 项目里配置 elm
- SAP 严重漏洞可导致供应链攻击
- BIEE叙述图导航实例
- An Introduction to Unstructured Mesh Generation Methods and Softwares for Scientific Computing
- 使用redis作为缓存,数据还需要存入数据库中吗?
- 企业员工人事管理系统(数据库课设)