27.lib.less一个加快css编写的less库
因为基于less,所以希望你对less有一定的了解。如果你懒,你也是可以不用了解的。因为本库只是借用了的less的语言特性,其用法是可以完全独立的。
27.lib.less目的在于减少你的css代码量,并提供尽可能多的代码片段来提升你的代码效率。
27.lib.less可以这样来写css
/* 输入 */
.box{
#wHlh(100px,40px);
#paTl(50%);
#mtL(-15px,25px);
#bcC(#000,#fff);
border:1px solid #ddd;
}
/* 编译输出 */
.box {
height: 40px;
width: 100px;
line-height: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: 25px;
background-color: #000000;
color: #ffffff;
border: 1px solid #ddd;
}
代码量减少了有没有?效率提高了有没有?是不是很神奇?
我知道你现在一脸懵B,粗看这个写法确实很难懂!没有关系,其实知道真相的你眼泪会掉下来,因为真的很简单,请听我慢慢道来。
.
|____ _27
| |____ _core.less --核心库,属性类
| |____ _grid --栅格布局
| | |____ _init.less --栅格布局参数和方法
| | |____ _obj.less --栅格布局入口
| |____ _reset.less --css reset 相关
| |____ _lib.less --常用样式
| |____ _oocss.less --面向对象
| |____ _init.less --总入口(此处调用了以上所有的库)
|***
|____ style.less --在此处引入_27/_init.less,并进行其他代码编写
27.lib.less 一共有1个核心文件_core
,4个拓展文件,以及一个入口文件_init
组成。除了入口文件有调用所有库文件以外,其它5个库文件相互独立。并且里面的方法都只是声明,直接引入项目只要不调用就不会生成任何代码,无污染,无残留。你也可以根据你实际的项目,添加自定义拓展库,只要遵循命名规则即可。
- 将_27文件夹放到你的项目目录中
- 在需要使用这个库的less文件顶部采用相对路径
@import
引入。
例:@import "_27/_init.less";
- 用less编译工具编译即可