Nuke - Core

简介

职责

能力

为 Nuke UI Mobile 的所有 UI 组件提供全局基础样式的变量定义, 包括 颜色, 边角, 文本, 边线, 阴影, 动画, 多语言, 以及其他全局变量定义等; 全局 Mixins, Functions, Placeholders; 以及浏览器基础样式重置和全站文本样式声明.

约定

所有 UI 组件也必须引用 nuke-core 作为全局默认的变量使用, 且定义方式, 书写规范也必须和 core 保持一致. 除 theme-xxx 外, 不允许有其他全局公共变量对 @alife/next-core 复写.

使用方法

$ tnpm ii  [email protected] --save

index.scss
@import "~nuke-core/nuke.scss";

目录结构

next-core
    |- src/
        |- util
            |- mixins.rxscss
            |- functions.rxscss
        |- variables/
            |- global.rxscss
            |- color.rxscss
            |- corner.rxscss
            |- font.rxscss
            |- icon.rxscss
            |- line.rxscss
            |- shadow.rxscss
        nuke.scss   // 兼容性配置
        nuke.rxscss  //

内容说明

• util 全局 Mixins, Functions, Placeholders: mixins, funcitons, placeholder
• variables 为 Next UI PC 和 Mobile 的所有 UI 组件提供全局基础样式的变量定义, 包括 颜色, 边角, 文本, 边线, 阴影, 动画, 多语言, 以及其他全局变量定义等.

变量命名规范

• 变量统一小写，单词用中划线连接。
• 变量名统一以文件名为前缀, 例如: color.scss -> $color-n1-1
• 全局变量和基础变量必须在变量后添加 !default 声明
• 变量定义扁平化, 不要采用 list 或者 map, 这样便于配置和调用.
• 变量名称以聚类方式增加前缀, eg:

  $corner-sides-base: "base" !default;
  $corner-sides-top: "top" !default;
  $corner-sides-right: "right" !default;
  $corner-sides-bottom: "bottom" !default;
  $corner-sides-left: "left" !default;

• 所有需要被配置平台配置的变量都必须写单个值, 不能写组合值, eg:

  // right
  $btn-size-margin-left: $s1;
  
  //wrong
  $btn-size-margin: 0 $s1;
  //wrong
  $btn-shadow: 1px 1px #333;

注释

依赖配置平台的注释要求注释.(后续添加)