author:setin
DT:2011-12-15
version:1.1
download:金山快盘共享地址
一、DW环境
文件名后缀建议使用.jcss区分.css文件。
使用.jcss文件后缀，DW中编辑时，会不支持.jcss后缀，需要添加新的后缀名称。DW的安装目录下的文件：
configuration/DocumentTypes/MMDocumentTypes.xml
打开文件，搜索字符css，找到：
<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" >
把 winfileextension="css" 改为 winfileextension="css,jcss"。
重启DW。
二、使用JCSS
新建HTML文档。
JCSS解析器的解析界面是用jQuery来控制的，所以需要引入jQuery：
<script src="jquery-1.7.1.js" type="text/javascript"></script>
引入JCSS的界面样式定义
<link rel="stylesheet" type="text/css" href="jcss.css" />
引入JCSS解析器：
<script src="jcss.1.1.js" compilationfile="command.php" type="text/javascript"></script>
src="jcss.1.1.js"
JCSS解析器。
compilationfile="command.php"
后台写文件接口，JCSS会向后台文件发送一个POST表单提交，
fileName:文件名；
content:文件内容。
三、解析JCSS
插入代码：
<link rel="stylesheet/jcss" type="text/css" href="jcss/SNS_module.jcss" output="css/SNS_module.min.css" zip="true" />
rel="stylesheet/jcss"
JCSS文件识别标记。
href="jcss/SNS_module.jcss"
JCSS文件路径。
output="css/SNS_module.min.css"
解析后CSS文件输出路径。
zip="true"
zip="true"：输出CSS高压缩标记；
zip="false"：输出CSS无压缩标记；
无zip属性：默认压缩。
四、JCSS语法
JCSS语法基本遵从CSS语法，在CSS语法上进行了扩展。
常量
JCSS的常量在现在的1.1版本中，只支持字符串。常量需要在JCSS的顶部进行申明。
常量申明：@conName = conValue;例：
@borderColor = #cdcdcd;
常量的使用：@conName例：
border:1px solid @borderColor;
1.函数
函数的申明：funName(args[]){[code]}例：
1 box-border(@width=100px,@color=#f63)
2 {
3 width:@width;
4 border:1px solid @color;
5 }
函数的使用：funName(args[]);例：
box-border(200px,#f00);
2.分块
JCSS代码：
1 .box{
2 font-size:12px;
3 p{
4 color:#999;
5 a{
6 color:#f36;
7 &:hover{ color:#f000;}
8 }
9 }
10 }
CSS代码：
1 .box { font-size:12px;}
2 .box p {color:#999;}
3 .box p a {color:#f36;}
4 .box p a:hover{ color:#f000;}
3.分组
直接使用,就可以实现分组。 JCSS代码：
1 #header,#warp{
2 .pa,.pb {
3 background:#cdcdcd;
4 p{
5 font-size:12px;
6 a{
7 color:#f63;
8 &:hover { color:#F33; }
9 }
10 }
11 }
12 }
CSS代码：
1 #header .pa, #header .pb, #warp .pa, #warp .pb { background:#cdcdcd; }
2 #header .pa p, #header .pb p, #warp .pa p, #warp .pb p { font-size:12px; }
3 #header .pa p a, #header .pb p a, #warp .pa p a, #warp .pb p a { color:#f63; }
4 #header .pa p a:hover, #header .pb p a:hover, #warp .pa p a:hover, #warp .pb p a:hover { color:#F33; }
4.保留内容
默认保留了/**到**/之间的内容，该内容为DZ的CSS模块样式定义标记
添加自定义保留内容，保留所有的注释块
<script type="javascript/text">
addRegExp(/\/\*[\s\S]*?\*\//);
</script>
