ecomfe/est

EFE Styling Toolkit based on Less

est (EFE Styling Toolkit)

From Middle English este, from Old English ēst (“will, consent, favour, grace, liberality, munificence, bounty, kindness, love, good pleasure, harmony, liberal gifts, luxuries”)

Est is a mixin library based on Less which helps you write Less code more efficiently.

Est provides over 100 handy mixins which generate style rules only when you call them. Est doesn't provide any styles for specific HTML classe names because such “visual classe names” may contaminate HTML semantics. You can build your own style library based on est to accelerate your development.

Quick Start

est can be included in three ways:

1. import in your Less code:

   Download the latest version: .zip or .tar.gz

   or just clone it:

   $ git clone https://github.com/ecomfe/est.git

   // 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...

2. include using compile options:

   • install Less plugin:

     $ npm install -g less-plugin-est

   • use the plugin:

     $ lessc styles.less --est

     If you are using Less version >= 3.0.0, you have to enable JavaScript evaluation with an extra argument:

     $ lessc styles.less --est --js

3. use it programatically in Node.js apps:

   var less = require('less');
   var Est = require('less-plugin-est');
   
   var src = '.box { .clearfix(); }';
   
   less.render(src, {
       plugins: [
           new Est()
       ],
       javascriptEnabled: true // essential for Less version >= 3.0.0
   }).then(function (result) {
       // handle compiling result
   });

Plugin Features & Options

Est Less plugin can take two arguments for now:

• autoImport

  Automatically import est code before everything. true by default. Only works from Less 2.4.0.

• uniqueDirectives

  Eliminate duplicate named at-rules (Less calls them directives). This enables you to define @keyframes inside mixins and don't have to worry about duplicate output if you call those mixins for several times. true by default.

You can specify arguments like this to turn off unwanted features:

$ lessc style.less --est="autoImport=false&uniqueDirectives=false"

Headsup

When used as a plugin, est requires Less to be 2.0.0 or above. When included using @import in a Less file, the minimal Less version is 2.3.0.

Less supports auto import by plugins only after version 2.4.0. So if you are using older versions, you have to import est using @import directive in your Less code.

When used as a plugin, est provides isruleset function (which est used) which is not supported by Less before 2.3.0.

Docs & Demos

• API Docs (zh_Hans)
• Typography demos (zh_Hans)
• Effects demos (zh_Hans)

Contribution

Please feel free to submit issues or just make pull requests.

Unit Test

Test cases are under test/specs. One directory for each module and each module can have one or more spec files.

Run this under est project directory:

$ npm install
$ npm test

est's Issues

.margin-rem的问题（.padding-rem同样存在）

.margin-rem(10 0);

编译后输出：===》

.margin:10 10;

我觉得应该是.
.margin:10 0;吧

看了下源码：
.margin-rem(@px-size) {
@margin-top: ~Number('@{px-size}'.match(/(\d+|\d*\.\d+)+/g)[0]);
@margin-right: ~Number('@{px-size}'.match(/(\d+|\d*\.\d+)+/g)[1]) || @{margin-top};
@margin-bottom: ~Number('@{px-size}'.match(/(\d+|\d*\.\d+)+/g)[2]) || @{margin-top};
@margin-left: ~Number('@{px-size}'.match(/(\d+|\d*\.\d+)+/g)[3]) || @{margin-right} || @{margin-top};
@top-rem-size: @margin-top / @default-font-size;
margin-top: ~"@{margin-top}px";
margin-top: ~"@{top-rem-size}rem";

@right-rem-size: @margin-right / @default-font-size;
margin-right: ~"@{margin-right}px";
margin-right: ~"@{right-rem-size}rem";

@bottom-rem-size: @margin-bottom / @default-font-size;
margin-bottom: ~"@{margin-bottom}px";
margin-bottom: ~"@{bottom-rem-size}rem";

@left-rem-size: @margin-left / @default-font-size;
margin-left: ~"@{margin-left}px";
margin-left: ~"@{left-rem-size}rem";

}

是因为把空值和0值，统一当成了false判断了，不知是有意为之还是bug，不过使用起来不太方便
需要.margin:10 0;的情况，我都得拆出来写，不太科学，望采纳

clockhand 这个里面的内容能否归在 util 里呢？

R；T
个人认为 clockhand 这个分类有些模糊，为啥不放入 util ，想知道一下你的想法。😀

在gulp里应该怎么用?

我想在gulp里引用est,下面是我的写法:

var gulp = require('gulp');
var less = require('gulp-less');
var Est = require('less-plugin-est');
var est = new Est({});

gulp.task('compile-less', function() {
    gulp.src('./pages/css/*.less')
        .pipe(less({plugins: [est]}))
        .pipe(gulp.dest('./pages/css'));
});

运行的时候报错了,我第一行写了一个 .global-normalize(); ,运行报错是:

Potentially unhandled rejection [2] .global-normalize is undefined in file e:\project\web\pages\css\someless.less line no. 6

请问应该怎么正确的在gulp里使用est?

祝越办越好!

@import edp 中 Less 包的功能

对应于 npm 中，require(package) 后定位到 node_modules 中package 这个包的 package.json 中 main 模块的功能。

初步设想效果如下：

@import "esf";

则自动找到 dep/esf 中的 package.json，找到 main 字段对应的 Less 文件如 theme/main.less，并进行引入。

同时，也可以引入该包下的任意模块文件：

@import "esf/button.less";

理想的话，路径的查找都借由 module.conf 中的配置进行，这样 edp 会自动管理当前依赖的包&版本。

一些问题

1. est 目前是 npm 包和 Less mixin 在同一个 package 中管理，main 字段声明为给 Node.js 使用的 lib/index.js。需要在 package.json 中有额外字段描述样式的入口文件（比如 stylemain），并且 edp 相关功能需要能够识别这个字段并且写入 module.conf。
2. module.conf 的 path 目前均指向 src 目录，但 esf 入口在 src/../theme/main.less，是否最好也调整到 src 目录内部。
3. 像 ESUI 这样前端既有 JS 又有 Less 的 package，需要在 module.conf 同时提供 JS 和 Less 的入口。
4. 这个功能需要由 Less 插件实现，直接集成在 est 目前的 Less 插件中是否合适？另外如果需要读取 module.conf，那就会和 edp 的逻辑耦合；如果是自己在插件参数中写模块路径配置的话，又享受不到 edp update 带来的便利（layout: v1 那种多版本共存时自动更新当前版本）。
5. 目前的 Less 编码规范规定 @import 必须带文件后缀，需要随此功能更新。

---

@errorrik @otakustay @firede @chriswong @leeight

支持padding、margin之类的font-size-rem和font-size-em

能不能提供支持padding、margin之类的，可提供1-4个px值的.font-size-rem和.font-size-em

目测.font-size-em因为有1个额外参数，因此事实上可能是1-5个参数，且1-4个的时候是有歧义的，比较麻烦。但是感觉这个更重要，不少业务系统是固定一个字体大小的，也就是用rem和用em在大部分情况下等效，为了最好的兼容性会追求em

Flex 很多属性前缀冗余

比如最明显的 -moz-flex-wrap 属性，Firefox并未实现带有前缀版本。

也就是说所有多行相关的属性， Firefox 28 之前均为实现带有前缀版本。

.flex-wrap(@wrap) {
    @ms-wrap: ~`"@{wrap}".replace(/nowrap/ig, "none")`;
    -webkit-flex-wrap: @wrap;
       -moz-flex-wrap: @wrap;
        -ms-flex-wrap: @ms-wrap;
            flex-wrap: @wrap; 
}

est-layout-sidebar问题

body {
    .est-layout-sidebar(left, 200px, "#main", ".sidebar");
}

上面的代码编译结果是：

body {
  position: relative;
}
body > "#main" {
  overflow: hidden;
  margin-left: 200px;
}
body > ".sidebar" {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
}

这样不能用吧，因为编译出来的body的子代选择器带有""，应该是没有冒号的。

首字下沉的命名

@zmmbreeze
http://en.wikipedia.org/wiki/Initial
首字母效果有好几种，下沉的样式改叫drop-cap吧。

请问如何在node中使用est？

  less.render(lesssource, {
    depends: false,
    compress: false,
    max_line_len: -1,
    lint: false,
    paths: lesspath,
    color: true,
    strictImports: false,
    insecure: false,
    rootpath: '',
    relativeUrls: false,
    ieCompat: true,
    strictMath: false,
    strictUnits: false,
    globalVars: null,
    modifyVars: null,
    urlArgs: '',
    plugins: [require('less-plugin-functions')],
  })

这样配置下来 报错

TypeError: plugin.install is not a function {stack: (...), message: "plugin.install is not a function"}
message: "plugin.install is not a function"
stack: (...)
get stack: function () { [native code] }
set stack: function () { [native code] }
__proto__: Error

另外再问个额外的问题，对于 less 不支持 sass 中 @function 的功能

@function rem($x) {
  @return $x / 40 * 1rem;
}

我找到一个插件 less-plugins-functions ，
但是还想问一下，有没有更好的解决 @function 缺失的办法呢？

添加和文字垂直居中有关的mixin

有很多这样的代码：

height: 24px;
line-height: 24px;

是不是可以提供个.vertical-centered-text(24px)这样的mixin？

颜色值编译后为什么不对？

编译前：颜色值是 #ccc
@support-ie-version: 8;
@use-autoprefixer: false;

.comment:after {
.triangle(top left, #cccccc, 10px, corner);
}
编译后：颜色值是 #666
.comment:after {
position: absolute;
width: 0;
height: 0;
border: #666666 solid 10px;
border-bottom-color: transparent;
border-right-color: transparent;
}

增加sublime及vim的自动补全支持

@default-base-font-family 的值为何只有"Helvetica Neue", Arial, sans-serif?

中文字体都采用sans-serif 处理吗？ 合理性在哪里？

增加 Live demo

增加一个类似 less2css.org 这样的效果演示。后续在 ecom 的主页上面给个链接。

Gulp 中使用est

R;T

今天在使用 gulp 编译 est 的时候遇到的问题，记录一下。
首先，est 是 less 的插件而不是 gulp 的插件。一开始，我将 est 当作gulp 的插件了，所以有如下的这种写法：

var est = require('less-plugin-est');

gulp.task('less2css', function() {
    ....
    .pipe(est())
})

结果报错。
其次，有的项目中可能使用 gulp-autoprefixer ，那么，下面这种写法也是错误的：

var autoprefixer = require('gulp-autoprefixer');
var Est = require('less-plugin-est');
var est = new Est();

gulp.task('less2css', function() {
    .......
    .pipe(autoprefixer({....}))
    .pipe(less({
       plugins: [est] 
    }))
});

最后，正确的写法：

var autoprefixer = require('gulp-autoprefixer');
var Est = require('less-plugin-est');
var est = new Est();

gulp.task('less2css', function() {
    ........
    .pipe(less({
         plugins: [est]
    }))
    .pipe(autoprefixer())

});

最后的最后，可能细心点区分插件类型就会发现正确的解决方案。

过不了edp-dev build

edp WARN Compile less failed, file = [dep/est/1.1.0/example/example.less], msg = [Error: error evaluating function unit: the first argument to unit must be a number]

关于 layout 模块的 mixin API 的讨论

目前我采取的方式如下：
layout.less:

.xxx-layout(@params) {
    .est-yyy {
        // styles
    }
}

HTML:

<div id="container">
    <div class="est-yyy"><!-- content --></div>
</div>

LESS:

#container {
    .xxx-layout(zzz);
}

layout.less已有的布局：

• 自动撑满页面高度的header/body/footer布局
• 左/右指定宽度sidebar布局
• 定宽居中布局
• 浮层上/下/左/右/中定位布局（可以用来做 @otakustay 前段时间说的类似Gmail notification的东西）

还想增加header/footer fixed定位的设置，参数怎么加也感觉比较纠结。目前这些东西的 mixin API 还没最后确定，想听听大家的意见。

优化文档和 demo

现在的文档和 demo 可读性有点差，查 API 也不太方便。Demo 的代码高亮最好不使用 Google Code Prettify，因为要从 google-code-prettify.googlecode.com 加载 CSS，墙内比较慢 :(

estFiddle的某些js文件无法加载了

请大侠处理一下呗。 另外这个库是最晚的更新都是3年前的了，有没有什么需要与时俱进的吗？

支持在创建插件的时候指定全局变量

对于在变量章节中列出的内容，希望都可以在new Est()的时候通过JavaScript传递，这样就不需要再单独维护一个控制的.less文件并在各处均要引用了

另外 @support-ie-version的值为多少可以完全无视IE？

CSS animation相关的mixin

CSS animation

单位转换功能使用插件来实现

例如

.x {
  .padding-rem(10px) 
}

可以考虑用

.x {
  .padding: rem(10px);
}

既然已经用了 autoprefix 插件了，再多一个应该也无妨吧。
相关插件: https://www.npmjs.com/package/less-plugin-functions

img-replace的使用问题

根据 https://github.com/ecomfe/est/blob/master/src/typography.less#L124 ，img-replace默认使用了url()格式，所以我现在有这样的情况：

.my-class { .img-replace("../img/abc.png"); }

最后编译后，会变成相对于est所在目录的地址，而不是定义.my-class的css所在目录为基准

不太懂less，可能是由于编译时用了啥参数还是因为加了冒号导致的，正确的用法应该是啥？

增加画三角形的功能

目前搞了一下，生成的效果如下，只支持直角三角形（兼容 IE）。
http://jsbin.com/koviyoke

如此调用：

/**
 * @direction 方向 top / top-right / right / bottom-right / ...
 * @color 颜色
 * @size 直角边长度
 */
.triangle(@direction, @color, @size);

用的 border 实现，没有用伪类，不支持额外边框颜色。如果两条直角变需要额外的边框色，可以用伪元素生成两个三角形叠加。

如果没啥问题准备加到 1.3.0 里面。

est 构想的讨论

定位

作为一个样式的解决方案，est 需要提供的主要是可以复用的样式以及屏蔽浏览器兼容性的差异。落实到使用上，我考虑到主要有两种方式：

1. 使用预定义的 className 作为接口，用户在书写 HTML 代码时直接通过调用相应的 className 就可以完成样式的设定，例如：

   <!-- Bootstrap -->
   <button class="btn btn-large" type="button">Large button</button>

   这种方式的主要特点是“脏”且快速，首次书写可能会比较爽快（仅写 HTML 就可以完成大部分的工作），适合用于快速搭建站点或原型系统。但是语义正确性较差，HTML 和样式有耦合，容易在同一个元素上写多个和样式相关的 className。Bootstrap 采取的更接近于这种方式。

2. 接口更低层次一些，使用 mixin 作为接口，用户在书写 HTML 代码时根据内容的含义书写语义正确的 className，并在样式中通过调用 mixin 的形式来设定样式，例如：

   HTML:

   <button class="accept-button" type="button">Accept</button>

   LESS:

   .large-button() {
       .size(120px, 30px);
       .linear-gradient(top, #FFF, #CCC);
       .border-radius(30px);
   }
   
   .accept-button {
       .large-button();
   }

   这种方式更为清晰、HTML 和样式的耦合很小，但是必须书写一些额外的 LESS 代码来将语义 className 和 est 提供的 mixin 挂钩，定位更偏向一个较底层的类库，方便开发人员书写 LESS 代码，而非直接拿来用的样式集合（定位类似 nib）。

我个人比较倾向于第二种定位。

模块划分

基于上面的定位 2，我初步划分如下，希望大家补充或修订：

• normalize

  样式的归一化，屏蔽浏览器默认样式差异，提供基本的可用性

• layout

  布局相关支持，grid、fluid 等等

• compatibility

  提供用来解决兼容性问题的方法

• typography

  文字排印相关

• effect

  color / background / transform / transition / animation 等相关

• util

  各个模块可以共用的一些工具方法

代码组织

每个模块一个.less文件，发布时 concat 到一起。使用时通过@import 'est.less'引入。

浏览器支持

待讨论

---

希望大家一起讨论一下，也考虑一下自己感兴趣研究的方向。

给新手留条活路，建议重写Readme

文档搞得简洁，过于高大上。

国人不少还使用koala，建议写直接能用 Koala的文档。

需要安装nodejs，npm 什么的，无疑拒绝了一堆人使用est这么优秀的less库。

.hide-text方法对于有padding的容器，文字不能完全hide掉

.hide-text方法对于有padding的容器，文字不能完全hide掉。原因是使用100%的缩进。

est 全局插件安装后编译含有grid下mixin时报错

问题R;T：

E.g：

layout.less

.main {
    .make-column(2/3, 5%);
}

lessc layout.less --est --autoprefix throw NameError: .make-column is undefined in layout.less

est , autoprefix 都是以插件形式安装在全局的，即： npm install -g less-plugin-est less-plugin-autoprefix

环境说明：

lessc 2.5.0 (Less Compiler) [JavaScript]
node version v0.12.2
npm version 2.7.5

最新说明：查看了src/all.less中没有 @import 'grid.less'，vim src/all.less 修复此问题，也烦请你修改一下吧。😁

添加CSS Grid 相关的Mixin

添加CSS Grid 相关的Mixin

如果能增加一个 颜色处理的就更方便了！

单个动画参数的 `animation()` 会生成多余逗号

@DDDBear

能增加对渐变的支持不

处理参数中 `url()` 表达式时无法同时兼顾 `'` 和 `"`

JS 表达式中无论用 ' 还是 " 来生成字符串字面量都无法同时处理参数中不确定会带哪种引号的情况。之前无法解决，但 Less 1.7.0 起提供了一个 replace() 函数，可以帮助我们先把输入变量中的 ' 都替换为 "，JS 中再用 ' 包裹字符串字面量来处理。