团队协同动态CSS开发[个人觉得比less方便]
今天终于总结出一个很方便的动态化开发方式。
感觉比JSS,Less sass方便一些。
需要用到的工具:
Microsoft Visual Studio 2010
Aptana Studio 3
项目介绍:
1、4个人协同编码,很多时候会多人同时修改同一文件。
2、模块化
3、具体见图片说明,有图有真相。
开始工作:
问题1——如何减少重复代码书写?
解决1——模块化
问题2——如何减少书写copy重复的常见代码?如颜色值,边框等。
解决2——动态程序化
我们重点描述【问题2】的解决方法。
所有公用模块,我们都用html后缀。组装的就用aspx后缀。我们的目的就是利用aspx提供的一些基本的程序化功能。
如图,为什么我们在html文件里就可以定义变量呢?
原因很简单,我们最终调用这些公共模块的是aspx。
有图有真相。
这些是对html的处理。
接下来处理css。稍微复杂一些。
先看图——Aspx后缀的css文件,是不是有些怪异?其实不然,我们目的是为利用aspx的程序化功能来处理css。
在head里就要这样来引用了。
<link rel="Stylesheet" type="text/css" href="css/*****.aspx" />
IE是微软的东西,它是绝对兼容的。
谷歌就严格一些。在这个写着css代码的aspx文件的第一行要写这样一行代码。
<%response.ContentType="text/css"%>
然后看看aspx文件里面是什么样子。
函数、变量都是可以随便用的,什么循环之类更加不在话下!
css能用到的也就这些了!
细心的人可能发现了,代码并不高亮。我也很纠结,想在VS2010里配置一下,但是没有找到。有高手请告知!
为了弥补,我用到了外部编辑器Aptana Studio 3。
配置下高亮
根据下列步骤,达到我满意的效果。
但是我的页面都是aspx后缀的,移交工作肯定会很郁闷。
我们最终需要的是全静态的。
怎么办呢?
很简单,生产html即可,于是写了一个很简单的生产工具。
最终生成的html代码
鼠标轻轻一点,立刻实现!快下班了,先写到这里!