@alicloud/xconsole-less v2.0.0-alpha.6

ABOUT

阿里云控制台通用 LESS 常量及方法

参考规范 http://ued.aliyun.com/Console_Guideline/main.html

HOW TO USE

安装：

tnpm install @ali/wind-less-mixin --save

在 LESS 文件中引入和使用：

@import '~@ali/wind-less-mixin'; // 如果 webpack 报找不到，可以尝试加上 `/index`

// 使用值（只有以 @G_ 打头的是允许使用的）
.selector {
  color: @G_color_text_emphasis;
}
// 使用 mixin 方法
.some-error {
  #color.error(true); // 只能通过 namespace 来引用
}

代码规范说明

mixin 包含两部分，值和方法。

变量

全局可用的变量（其实叫「常量」可能更为妥当）。

由 src/_var.less 聚合位于 src/var/ 目录下的文件，一个文件定义一组相关的变量，如 color.less 定义颜色，size.less 定义宽高大小。

命名规范：

• 公有变量以 @G_ 打头，其余单词全小写，单词间以下划线 _ 链接
• 私有变量以 @_ 打头，其余跟公有的一样

关于「私有」：

less 没有「私有」的概念，所以事实上可以引用所有的变量，以 @_ 只是表明「你不要用，我不保证它不会变」。

方法

全局可用的 无输出 mixin 方法。

由 src/_fn.less 聚合位于 src/fn/ 目录下的文件，一个文件定义一个 namespace，所有 的方法都包裹在 namespace 中。

命名规范：

• namespace 全小写，单词之间用中划线 - 链接（尽可能只用一个单词）
• 方法名跟 namespace 的命名方式一样
• 方法参数遵循变量的命名规范
• 方法参数之间以 ; 分隔

关于「私有」：

跟变量一样，没有私有，但以 _ 打头的方法，切记不要随便引用。

API

由于维护的疏漏，这里有可能跟代码不同步，请查看源码

变量

color

文字颜色

code	值	预览	说明
@G_color_text_error	#f15533		最高级别：报错
@G_color_text_warn	#f15533		最高级别：警告
@G_color_text_emphasis	#ff8a00		第二级别：突出说明，如「金额」、「最重要链接」等
@G_color_text_info	#00c1de		第二级别：重要提示、重要连接
@G_color_text_positive	#35b34a		第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等
@G_color_text_heading	#373d41		第四级别：标题
@G_color_text_body	#73777a		第五级别：正文
@G_color_text_help	#9b9ea0		第六级别：最不重要的信息、最低级别的帮助信息
@G_color_text_hint	#c3c5c6		第七级别：水印、输入框中的提示文字
@G_color_link	#00c1de		第二级别：重要链接
@G_color_link_gray	#73777a		第三级别：次重要链接、列表型链接，如「公告」

背景色（浅色）

code	值	预览	说明
@G_color_bg_error	#feeeeb		最高级别：错误提示的底色
@G_color_bg_warn	#feeeeb		最高级别：警告提示的底色
@G_color_bg_emphasis	#fff3e6		第二级别：突出说明的底色
@G_color_bg_info	#e6f9fc		第二级别：重要说明的底色
@G_color_bg_positive	#ebf7ed		第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等
@G_color_bg_dark	#d7d8d9		强调需要严格强调模块之间差异的场景
@G_color_bg_heading	#ebecec		不可点按钮的底色，模块间的区分或模块中信息的层次区分，如「表头」、「卡片标题区」等
@G_color_bg_light	#f5f5f6		不可点输入框的底色，页面中用于区分不同区块时的背景底色，以及斑马条表单的底色

线条色（边框）

code	值	预览	说明
@G_color_line_error	#f15533		最高级别：报错
@G_color_line_warn	#f15533		最高级别：警告
@G_color_line_emphasis	#ff8a00		第二级别：突出说明，如「金额」、「最重要链接」等
@G_color_line_info	#00c1de		第二级别：重要提示、重要连接
@G_color_line_positive	#35b34a		第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等
@G_color_line_dark	#373d41		重线，强展示，突出可操作的组件的线 / 边框，如按钮
@G_color_line_heading	#c3c5c6		深线，次强展示，可操作的组件的线 / 边框，如「输入框」
@G_color_line_regular	#d7d8d9		常规线，常规展示的组件的线 / 边框，如「卡片」
@G_color_line_light	#ebecec		浅线，弱展示，区分段落或不可操作内容的线 / 边框

组件相关

方法

#color namespace

有些颜色需要组合使用，这里主要封装了颜色组合使用的情形。

其中的 @hoveActive 设为 true 表示需要 :hover 和 :active 状态。

@import '~@ali/wind-less-mixin/index';

.your-selector {
  .error-text {
    #color.error();
  }
  .error-text-with-ha {
    #color.error(true);
  }
  .error-bg {
    #color.error-bg();
  }
  .error-bg-with-ha {
    #color.error-bg(true);
  }
  .error-bg-light {
    #color.error-bg-light(); // 无 :hover :active 设置
  }
}

#glyph namespace

iconfont 工厂方法，默认生成以 glyph- 打头的 iconfont 样式。

例子：

@import '~@ali/wind-less-mixin/index';

// 你需要手动引入自己的 font-face
@font-face {
  font-family: '________'; // 字体名称
  // 这里写相关的 src
  // src: ...;
}

.your-selector {
  #glyph.base(________); // 对应上方的字体名称
  
  #glyph.type(xx; '\e600');
  #glyph.type(yy; '\e601'; 'another-prefix'); // 如果不想用默认的前缀
  // ...
}

在你的代码中使用形如 your-selector glyph-xx 的复合 className 即可。

#triangle namespace

八个方向的三角形生成器。

           up
            ▲
       ◤ tl - tr ◥
left ︎◀ |         | ▶ right
       ◣ bl - br ◢
            ︎▼
          down

例子：

@import '~@ali/wind-less-mixin/index';

.your-selector {
  #triangle.base();
  #triangle.top(30px; 20px; #f00);
}

#responsive namespace

简单的响应式封装方法。

例子：

@import '~@ali/wind-less-mixin/index';

.your-selector {
  #responsive.retina { // retina 屏幕
    // ...
  }
  #responsive.above(1024px; { // 超过 1024px 宽度
    // ...
  });
  #responsive.between(800px; 1023px; { // 在 [800px, 1023px] 宽度之间
    // ...
  });
  #responsive.below(799px; { // 小于 799px 宽度
    // ...
  });
}

#typo namespace

文字和排版。

例子：

@import '~@ali/wind-less-mixin/index';

.your-selector {
  .some-text {
    #typo.ellipsis();
  }
  a.very-important {
    #typo.link(1);
  }
}

#util namespace

杂项工具。

例子：

@import '~@ali/wind-less-mixin/index';

ul.your-selector {
  #util.clearfix();
  
  li {
    float: left;
    // ...
  }
}