首页 > 常用软件 > 应用软件 > CSS预处理器 ExtCss 1.0.2下载

CSS预处理器 ExtCss 1.0.2下载

软件类型:国产软件 下载地址: 授权方式:共享软件 界面语言:简体中文 文件类型:.exe 运行环境:Win2003,WinXP,Win2000,Win9X 软件等级:★★★☆☆ 发布时间:2016-04-29 网友评论:发表评论 温馨提示:该软件已通过安全检测




绿色安全软件

软件介绍

前言
 
CSS语言是一门非常弱的描述性语言,简单优雅,使得其入门门槛极低。
但是正因为CSS如此弱的表达能力,在某些场景下,Web重构者开发的工作十分的重复,并且十分吃力。
于是,非常有必要扩展CSS的一些表达能力!正因为如此,LESS、SASS等预处理器顺势而生。
我开发的ExtCSS也是一个CSS预处理器,原理就是把一个文本文件编译成一个CSS文件。
为什么要开发ExtCSS?
 
项目开发过程中,因为CSS的弱表达能力所引起的开发效率低下
LESS、SASS等处理器某些程度是提高了一些开发效率,但是很多场景仍不符合期望
 
为什么需要ExtCSS
这一节我将叙述为什么我们需要一个这样的预处理器!
 
场景一、CSS3特性-浏览器兼容
 
写一个CSS3的圆角:
 
 
#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来解决:
 
 
$br($s) {
  border-radius:$s;
  -moz-border-radius:$s;
  -webkit-border-radius:$s;
}
#id{
  $br(2px);
}
.clr{
  $br(5px);
}
场景二、引用写好的样式
 
已经写好了一个按钮的样式.btn,但是你还想书写红色的按钮.btn-red,他们只是差在背景颜色里边。
 
 
.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可以这样:
 
 
.btn{
  border:1px solid #ccc;
  cursor:pointer;
  display:inline-block;
  text-align:center;
}
.btn-red{
  .btn;/*引用.btn的样式,相当于编译后拷贝到这里!*/
  background-color:red;
}
场景三、导入另一个文件写好的样式
 
 
/* 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,是如下书写:
 
 
@import "a.extcss";
/* b.extcss */
/* 同时,这里会输出.btn的内容,这有时候跟我们的模块化概念是相反的! */
.btn-red{
  .btn;/* 引用a文件中的.btn样式 */
  background-color:red;
}
如果你用ExtCSS,如下:
 
 
@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。如下代码:
 
 
.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的功能:
 
css
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是一个刚性的需求!
 
网上下了一个CSS文件保存到download.txt,觉得压缩过特别难看懂,需要解压才能很好阅读。
产品上线前需要把CSS文件style.txt压缩成一行减小体积
上述两个需求只需要执行一下命令:
 
java -jar extcss.jar “download.txt”
java -jar extcss.jar “style.txt” min
场景六、缩写单词
 
在我们项目中,有时候为了偷懒跟书写速度加快,经常需要缩写一些单词,例如width缩写成w、height缩写成h。
这些由ExtCSS来帮你实现,你只需要自己配置一个abbr.conf的文件,如下
 
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支持)
 
执行以下命令:
 
java -jar extcss.jar “style.txt” normal
java -jar extcss.jar “style.txt” line
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的文件,如下
 
conf
1
2
w = width
h = height
输出的规则的属性就可以用w、h这些缩写,编译后会生成width、height单词。
 
 
ExtCSS是由java编写,支持多平台移植,运行时需要本地的java环境,如果本地没有java环境,请从官网下载安装。
 
 
 
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文件。

标签: css

下载地址

下载说明

☉推荐使用QQ旋风下载本站软件,使用 WinRAR v3.10 以上版本解压本站软件。
☉如果这个软件总是不能下载的请联系我们(见页尾),谢谢合作!!
☉凡本站资源经过站长查毒后上传,以防万一,如发现问题请立刻联系我们。
☉如果遇到什么问题,请到本站论坛去咨询,我们将在那里提供更多 、更好的资源!
☉本站提供的外挂资源均来自网络,本站只做收集汇总工作,由外挂导致的任何问题与本站无关!

顶一下
(74)
98.7%
踩一下
(1)
1.3%