团队协同动态CSS开发[个人觉得比less方便]

今天终于总结出一个很方便的动态化开发方式。

 感觉比JSS,Less sass方便一些。

 需要用到的工具:

 Microsoft Visual Studio 2010
 Aptana Studio 3

 项目介绍:

 1、4个人协同编码,很多时候会多人同时修改同一文件。
 2、模块化
 3、具体见图片说明,有图有真相。

团队协同动态CSS开发[个人觉得比less方便]_第1张图片


 开始工作:
 问题1——如何减少重复代码书写?
 解决1——模块化

 问题2——如何减少书写copy重复的常见代码?如颜色值,边框等。
 解决2——动态程序化

 我们重点描述【问题2】的解决方法。

团队协同动态CSS开发[个人觉得比less方便]_第2张图片


 所有公用模块,我们都用html后缀。组装的就用aspx后缀。我们的目的就是利用aspx提供的一些基本的程序化功能。

团队协同动态CSS开发[个人觉得比less方便]_第3张图片


 如图,为什么我们在html文件里就可以定义变量呢?
 原因很简单,我们最终调用这些公共模块的是aspx。

团队协同动态CSS开发[个人觉得比less方便]_第4张图片


 有图有真相。

团队协同动态CSS开发[个人觉得比less方便]_第5张图片


 这些是对html的处理。
 接下来处理css。稍微复杂一些。

团队协同动态CSS开发[个人觉得比less方便]_第6张图片


 先看图——Aspx后缀的css文件,是不是有些怪异?其实不然,我们目的是为利用aspx的程序化功能来处理css。
 在head里就要这样来引用了。
 <link rel="Stylesheet" type="text/css" href="css/*****.aspx" />
 IE是微软的东西,它是绝对兼容的。
 谷歌就严格一些。在这个写着css代码的aspx文件的第一行要写这样一行代码。
 <%response.ContentType="text/css"%>
 然后看看aspx文件里面是什么样子。

团队协同动态CSS开发[个人觉得比less方便]_第7张图片


 函数、变量都是可以随便用的,什么循环之类更加不在话下!
 css能用到的也就这些了!
 
 细心的人可能发现了,代码并不高亮。我也很纠结,想在VS2010里配置一下,但是没有找到。有高手请告知!
 为了弥补,我用到了外部编辑器Aptana Studio 3。
 

 

团队协同动态CSS开发[个人觉得比less方便]_第8张图片

配置下高亮

团队协同动态CSS开发[个人觉得比less方便]_第9张图片

团队协同动态CSS开发[个人觉得比less方便]_第10张图片


 根据下列步骤,达到我满意的效果。


 但是我的页面都是aspx后缀的,移交工作肯定会很郁闷。
 我们最终需要的是全静态的。
 怎么办呢?

 很简单,生产html即可,于是写了一个很简单的生产工具。

团队协同动态CSS开发[个人觉得比less方便]_第11张图片

最终生成的html代码

团队协同动态CSS开发[个人觉得比less方便]_第12张图片


 鼠标轻轻一点,立刻实现!快下班了,先写到这里!

你可能感兴趣的:(less)