est: Grace; favour.
From Middle English este, from Old English ēst (“will, consent, favour, grace, liberality, munificence, bounty, kindness, love, good pleasure, harmony, liberal gifts, luxuries”).
est 是一个基于 Less 的样式工具库,帮助您更轻松地书写 Less 代码。
est 提供了一系列方便快捷的 mixin,只在调用时才输出代码。est 不希望提供直接给 HTML 调用的类名,用「样式类」污染 HTML 代码的语义。当然您也可以根据自己的项目需求基于 est 搭建样式类库,提供类名接口来进行快速开发。
快速开始
想先试试?在 estFiddle 抢先体验一下吧!
est 可以以两种方式引入您的项目:
-
Less 代码中引入:
下载最新版本(
.zip
/.tar.gz
)或使用 Git 获取代码:git clone https://github.com/ecomfe/est.git
然后在 Less 代码中引入。
// quick import @import "est/src/all.less"; // override global variables @support-ie-version: 10; @default-font-size: 14px; // ...your own awesome less code starts here...
-
使用 Less 插件在编译时引入:
安装插件
npm install -g less-plugin-est
调用插件
在 Less 代码中无需额外
@import
,只需要在编译时加载 est 即可自动注入样式库。lessc styles.less --est
Autoprefixer
引入 est 后,就可以开始简单快速地书写样式文件了。但需注意的是,est 自 2.0.0 版本起不再推荐使用自带的前缀兼容 mixin(compatibility
模块下的多数 mixin),而建议采用 Autoprefixer 进行按需生成厂商前缀。Less 也已提供对应的插件 less-plugin-autoprefix,这样安装后在编译时只要额外加载一个插件就能解决厂商前缀带来的困扰了。
lessc styles.less --est --autoprefix
贡献
est 已经提供超过 100 个帮助您进行快速开发的 mixin,也欢迎您提供更多新的功能需求!欢迎提交 issue 发表反馈意见或直接发送 pull request。
单元测试
单测用例在 test/specs
目录下,每个模块一个目录,下面可能拆成多个 spec 文件,也可能只含一个。
在 est 项目目录下,运行如下命令即可开始测试:
npm install
npm test
API 详述
本文档剩余部分详细描述了每个预定义变量和 mixin 的使用方法。需要注意的是,给出的编译后代码非基于全局预定义变量默认值,而是基于如下设置:
@support-ie-version: 7;
@use-autoprefixer: false;