ExtCss-1.0

前言

CSS语言是一门非常弱的描述性语言，简单优雅，使得其入门门槛极低。
但是正因为CSS如此弱的表达能力，在某些场景下，Web重构者开发的工作十分的重复，并且十分吃力。
于是，非常有必要扩展CSS的一些表达能力！正因为如此，LESS、SASS等预处理器顺势而生。
我开发的ExtCSS也是一个CSS预处理器，原理就是把一个文本文件编译成一个CSS文件。
为什么要开发ExtCSS？

1. 项目开发过程中，因为CSS的弱表达能力所引起的开发效率低下
2. LESS、SASS等处理器某些程度是提高了一些开发效率，但是很多场景仍不符合期望

为什么需要ExtCSS

这一节我将叙述为什么我们需要一个这样的预处理器！

场景一、CSS3特性-浏览器兼容

写一个CSS3的圆角：

1
2
3
4
5
6
7
8
9
10

#id{
  border-radius:2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
}
.clr{
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}

如果叫我每次都想以上这样书写CSS，我会很郁闷，这些完全可以由ExtCSS中function来解决：

1
2
3
4
5
6
7
8
9
10
11

$br($s) {
  border-radius:$s;
  -moz-border-radius:$s;
  -webkit-border-radius:$s;
}
#id{
  $br(2px);
}
.clr{
  $br(5px);
}

场景二、引用写好的样式

已经写好了一个按钮的样式.btn，但是你还想书写红色的按钮.btn-red，他们只是差在背景颜色里边。

1
2
3
4
5
6
7
8
9
10
11
12
13

.btn{
  border:1px solid #ccc;
  cursor:pointer;
  display:inline-block;
  text-align:center;
}
.btn-red{
  border:1px solid #ccc;
  cursor:pointer;
  display:inline-block;
  text-align:center;
  background-color:red;
}

像这样重复复制代码的事情，我也比较郁闷，所以用ExtCSS可以这样：

1
2
3
4
5
6
7
8
9
10

.btn{
  border:1px solid #ccc;
  cursor:pointer;
  display:inline-block;
  text-align:center;
}
.btn-red{
  .btn;/*引用.btn的样式，相当于编译后拷贝到这里！*/
  background-color:red;
}

场景三、导入另一个文件写好的样式

1
2
3
4
5
6
7
8
9
10
11
12

/* a.extcss */
.btn{
  border:1px solid #ccc;
  cursor:pointer;
  display:inline-block;
  text-align:center;
}
/* b.extcss */
.btn-red{
  .btn;/* 想要引用a文件中的.btn样式，但是又不想把a文件的内容输出到b文件中 */
  background-color:red;
}

如果是LESS，是如下书写:

1
2
3
4
5
6
7

@import "a.extcss";
/* b.extcss */
/* 同时，这里会输出.btn的内容，这有时候跟我们的模块化概念是相反的！ */
.btn-red{
  .btn;/* 引用a文件中的.btn样式 */
  background-color:red;
}

如果你用ExtCSS，如下：

1
2
3
4
5
6
7

@require "a.extcss";
/* b.extcss */
/* 这里完全没有输出a文件的任何内容 */
.btn-red{
  .btn;/* 引用a文件中的.btn样式 */
  background-color:red;
}

当然如果你还想要LESS那样import的语法，那你也可以用ExtCSS中的@include “a.extcss”;
这种就是我们模块化CSS的概念所在，维护一个基本的CSS样式库，只要后续项目需要，完完全全可以通过ExtCSS来引入这些历史样式。

场景四、CSS Sprite

为了性能，或者页面在下载图片时发生跳动，所以很多时候我们都需要自己把小icon合并成一个大图，也即是CSS Sprite。如下代码：

1
2
3
4
5
6
7
8
9

.add_icon{
  background : url("../imgs/out.png") 0px 0px;
}
.del_icon{
  background : url("../imgs/out.png") 0px -167px no-repeat;
}
.edit_icon{
  background : url("../imgs/out.jpg") 0px -340px repeat-x #eee;
}

但是当你想要修改add_icon图标时，你会非常郁闷的重新去拼接图片，然后去算position，虽然有在线工具可以帮你完成，但是最后生成的代码仍然需要你手工粘贴到CSS文件中去。
因此ExtCSS推出CSS Sprite的功能：

1
2
3
4
5
6
7
8
9

.add_icon{
  background:sprite("../imgs/add.png", "../imgs/out.png");
}
.del_icon{
  background:sprite("../imgs/del.png", "../imgs/out.png") no-repeat;
}
.edit_icon{
  background:sprite("../imgs/edit.png", "../imgs/out.png") repeat-x #eee;
}

书写如上的语法，便可自动拼接好所有png小图（也支持jpg跟静态的gif）。
暂时，ExtCSS1.0版本只支持竖向拼接图片，以后再考虑是否扩展sprite语法，如果你有好的建议，欢迎发邮件给我（raphealguo[@]qq.com）

场景五、压缩解压CSS文件

显然压缩CSS跟解压CSS是一个刚性的需求！

1. 网上下了一个CSS文件保存到download.txt，觉得压缩过特别难看懂，需要解压才能很好阅读。
2. 产品上线前需要把CSS文件style.txt压缩成一行减小体积

上述两个需求只需要执行一下命令：

1. java -jar extcss.jar “download.txt”
2. java -jar extcss.jar “style.txt” min

场景六、缩写单词

在我们项目中，有时候为了偷懒跟书写速度加快，经常需要缩写一些单词，例如width缩写成w、height缩写成h。
这些由ExtCSS来帮你实现，你只需要自己配置一个abbr.conf的文件，如下

1
2

w = width
h = height

把这个配置文件放在config目录下即可。

场景七、八……

后续更新…

ExtCSS的语法

变量(ExtCSS-1.0.0支持)

 变量定义赋值： $color:eee; 或者 $color=#eee; 变量引用： #id{ color:$color; } 

函数(ExtCSS-1.0.0支持)

 函数定义： $br($s=5px){ border-radius:$s; -moz-border-radius:$s; -webkit-border-radius:$s; } 函数调用： $br(5px); 

嵌套(ExtCSS-1.0.0支持)

 #id{ color:#ff0; .clr{ font-size:12px; } &:hover{/* &表示父亲“#id” */ color:#f00; } } 输出： #id{ color:#ff0; } #id .clr{ font-size:12px; } #id:hover{ color:#f00; } 

引用语法(ExtCSS-1.0.0支持)

 在b.extcss中通过以下语法，可以包含另一个文件a.extcss中的函数、变量、样式等 @include "a.extcss";/* 引入a.extcss，同时输出a文件的样式 */ @require "a.extcss";/* 引入a.extcss，但是不输出a文件的样式 */ 

ExtCSS的CSS Sprite功能(ExtCSS-1.0.1支持)

 在background属性对应的值中把以前的 url("<icon path>") 修改成： sprite("<icon path>", "<output icons path>") 即可，其中<icon path>表示小图片路径，<output icons path>表示拼接后的大图的路径。样例如下： .icon_add{ background:sprite("../imgs/add.png", "../imgs/out.png") no-repeat #ccc; } 

压缩解压CSS文件(ExtCSS-1.0.2支持)

执行以下命令：

1. java -jar extcss.jar “style.txt” normal
2. java -jar extcss.jar “style.txt” line
3. java -jar extcss.jar “style.txt” min

分别输出的CSS文件就是：
1、正常模式normal（默认模式），就是每条属性会换行，每一层嵌套会缩进一个tab
2、行模式line，每条规则为一行，例如：#id{color:#eee;font-size:12px;}
3、压缩模式min，所有的规则压缩成一行。

缩写单词(ExtCSS-1.0.2支持)

新建/修改config目录下的abbr.conf的文件，如下

1
2

w = width
h = height

输出的规则的属性就可以用w、h这些缩写，编译后会生成width、height单词。

如何获取ExtCSS

ExtCSS是由java编写，支持多平台移植，运行时需要本地的java环境，如果本地没有java环境，请从官网下载安装。
解压以下ExtCSS版本：

• ExtCSS-1.0.2.zip
• ExtCSS-1.0.1.zip
• ExtCSS-1.0.0.zip

Change Log:

2013/02/25 ======================================================
ExtCss1.0.0：
1.支持原生CSS语法，有可能不支持（*color _color这类hack语法）
2.支持变量、函数
3.支持嵌套语法
4.支持新增的include require语法

2013/02/27 ======================================================
ExtCss1.0.1：
1.修复重大的一个bug：#id { a:hover{}; } 与 #id { a:hover; }的二义性！
2.修复函数内无法调用另一个函数的bug
3.兼容LESS通过选择器名字来引用规则
4.修复不能以*_开头的CSS hack的bug

2013/02/28 ======================================================
ExtCss1.0.2：
1.修复解析的bug:IE对于filter存在的一些特殊函数，例如，filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = ‘#82000000′,endColorstr = ‘#82000000′);
2.修复IE8的hack的bug：xxx:xxx\9;
3.修复@media等一些特殊的hack，例如，@media screen and (-webkit-min-device-pixel-ratio:0)
4.修复一些特殊的选择器，如，::-webkit-scrollbar 有双冒号的选择器。
5.添加缩写特性，修改config/abbr.conf文件，可以自己定义一些缩写，例如，w=width
6.增加CSS文件输出模式：正常模式（normal模式）、压缩成一行(min模式)、每个规则集单独一行（line模式）

（初期阶段还没完成自动安装解压配置等功能，需要自行解压修改命令：java -jar extcss.jar “”）
然后在里边的test目录书写对应的.txt | .ext | .extcss文件，然后运行run.cmd脚本。（你可以修改run.cmd脚本可以编译别的目录，如果是Linux版本，请执行java -jar extcss.jar “test”，最后一个参数是你需要编译的 目录/文件 的 绝对/相对路径）
详细的ExtCSS语法还可以参见test目录下的.txt文件。

后续

当然，我并不会使ExtCSS满足于现状，但是那些都应该是ExtCSS在目前的场景下已经能有效工作之后才会推出。如果你有任何好的建议或者是发现ExtCSS的bug，欢迎留言或者发邮件给我：raphealguo[@]qq.com
如果你希望跟我交流一些ExtCSS的问题，欢迎加入群：178292578

PS：调查一下CSS的使用情况（两个小问题只需要1分钟）：http://www.sojump.com/report/2182783.aspx