Homepage: http://csslab.cc
csslab是一个动态css依赖库,它由一些自定义函数组成,可快速书写一些常用的css片段并自动进行计算,同时提供一些IE6/7兼容hack和简写,以便能更快捷高效地完成网页重构工作。
例如,常见的让文本禁止换行,溢出的部分处理为显示"...":
.textline{ .nobreak; } //编译后输出为 .textline{ white-space:nowrap; word-wrap:normal; word-break:keep-all; text-overflow:ellipsis; overflow:hidden; }
例如,让一个已知尺寸的元素总是自动绝对居中定位:
.fixwindow{ .size(400px,300px); .ct(400px,300px); } //编译后输出为 .fixwindow{ width:400px; height:300px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px; }
传入参数指定动画的时间,并且只有调用该动画时生成对应keyframes,不会因需使用动画库中一个定义帧而要引入全部内容或繁琐地剪切粘贴:
.animate-element{ .fadeIn(2s); } //编译后输出为 //94900655为随机数 .animate-element{ -webkit-animation-name: fadeIn_94900655; animation-name: fadeIn_94900655; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } @keyframes fadeIn_94900655 { 0% { opacity: 0; } 100% { opacity: 1; } }
安装nodejs,并使用npm安装less/sass; 也可以使用koala等可视化编译器。 同时建议安装autoprefixer插件,以生成相应浏览器前缀。
将文件下载至指定工作目录,通过正确的路径引入。
//单独引入指定子函数库 @import url('base.less'); @import url('animation.less');