关于 layout 模块的 mixin API 的讨论

[Justineo]

目前我采取的方式如下： 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 还没最后确定，想听听大家的意见。

[errorrik]

1. class name和mixin name建议都＋est 前缀
2. 布局框架建议不要用id选择器

[Justineo]

@errorrik 这个#container只是个例子，在实际使用的时候，不管什么方式指定要应用布局的元素，加上.xxx-layout的mixin就行。外层容器不直接用className，而内部的结构需要满足一定className上的规约。都加上est-前缀没问题，主要还是调用的时候怎么写参数我比较纠结。

[errorrik]

举个你郁结摇摆不定的栗子？

[Justineo]

@errorrik 比如.est-full-height-layout现在可以设置一个固定高度header和一个固定高度footer，那我在调用的时候可以这么写：

//只有header，高90px
.est-full-height-layout(header, 90px);

//只有footer，高80px
.est-full-height-layout(footer, 80px);

//都有，header高90px，footer高80px
.est-full-height-layout(90px, 80px);

我现在想加上一个设置，让header/footer都可以分别设置是否fixed在视口，这个参数还没找到很舒服的写法。

[Justineo]

@errorrik 我把上面说的这个API改成了这个样子：

.est-full-height-layout(@header-config [, @footer-config])

config格式为[<length> <style>] | <length> | <style>，<style>可以是normal/fixed/none。

支持这样写：

// header高60px，footer高30px并且内容不足一屏时置底
.est-full-height-layout(60px, 30px);

// 没有header，footer高90px且fixed定位
.est-full-height-layout(none, 90px fixed);

// header高60px，没有footer
.est-full-height-layout(60px normal);

不过内部实现感觉就脏了不少...

[firede]

@Justineo 我觉得实现纠结是因为让.est-full-height-layout做了太多事了。 看了注释，分 只有页头, 只有页脚, 有页头和页脚 三种情况。 能不能抽成三个mixin对外提供呢？分开之后API会简单点，用起来应该更舒服。

[Justineo]

@firede 其实不只是注释里写的这些，页头和页脚都可以是normal/fixed/none，即使除掉两个都是none的情况也有8种组合...都描述清楚的话mixin名字没法起了。页头页脚在这种布局下面不同设置会互相影响，所以也不太适合把页头页脚分作两个mixin。

[errorrik]

@Justineo

虽然你的设计看起来包含了很多东西，但是还是覆盖不了所有的case。比如：没有header和footer，没有header只有footer。

我个人建议和 @firede 一样，分mixin。

.est-layout-header-footer( @header-config, @footer-config, @layoutType ) .est-layout-header( @header-config, @layoutType ) .est-layout-footer( @footer-config, @layoutType )

layoutType可以是full-height | auto

[errorrik]

我懒了，应该是

.est-layout-header-body-footer .est-layout-header-body .est-layout-body-footer

[errorrik]

layoutType不符合命名style，应该是layout-type

[Justineo]

@errorrik 目前的实现header和footer都可以是none/normal/fixed中的一种，也就是有9种可能的组合。

[errorrik]

如果是这样的设计风格，那我有两个建议

1. footer config就不要可选了，应该必填
2. full-height这事按风格来讲应该进参数控制，不要通过mixin name说明

在 2013-7-11，下午4:02，GU Yiling notifications@github.com 写道：

@errorrik 目前的实现header和footer都可以是none/normal/fixed中的一种，也就是有9种可能的组合。

— Reply to this email directly or view it on GitHub.