// Global variables @ns: ~"M_"; // 文档索引 /* 1. Font Family 定义字体 * 2. Font Size 定义文字大小 * 3. Line Height 定义文字行高 * 4. Font Colors 定义文字颜色 * 5. Border Color 定义边框颜色 * 6. Background Color 定义背景颜色 * 7. Spacing 定义间距和边距值 * 8. Z-index 定义优先级 * 9. Border radius 定义圆角 */ // 1. Font Family @global-font-family: "微软雅黑","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; @f-family: @global-font-family; // 2. Font Size @global-font-size: 1.4rem; // 14px @f-size: @global-font-size; // 14px @f-size-xs: @global-font-size - 0.2; // 12px @f-size-sm: @global-font-size + 0.2; // 16px @f-size-md: @global-font-size + 0.4; // 18px @f-size-lg: @global-font-size + 0.8; // 22px @f-size-xl: @global-font-size + 1.6; // 30px @f-size-xxl: @global-font-size + 2.6; // 40px @f-size-xxxl: @global-font-size + 3.2; // 46px // 3. Line Height @global-line-height: 1.428571429; @lh: @global-line-height; // 1.428571429; @lh-xs: 30px; @lh-sm: 35px; @lh-md: 40px; @lh-lg: 45px; @lh-xl: 50px; @lh-xxl: 55px; @lh-xxxl: 60px; @lh-xxxxl: 65px; @lh-xxxxxl: 70px; // 4. Font Colors @global-color: #666666; @c-gray: @global-color; @c-gray-dark: #333333; @c-gray-light: #999999; @c-gray-lighter: #cccccc; @c-white: #ffffff; @c-black: #000000; @c-red: #ff0000; @c-red-light: #ff6868; @c-red-lighter: #f88b76; @c-red-dark: #d3361a; @c-red-darker: #f8626d; @c-red-darker-light: #ff4040; @c-blue: #76a7f8; @c-blue-light: #296dec; @c-blue-lighter: #139578; @c-blue-darker: #33475f; @c-white-blue: #3d9ce9; @c-yellow: #f8ea76; @c-yellow-light: #faec7d; @c-black-yellow: #f6c34b; @c-green: #00a918; @c-black-green: #00cdcb; @c-black-blue: #296dec; @c-green-light: #7dd43c; @c-orange: #eb641a; // 5. Border Color @global-border: #adadad; @b-light: #f0f0f0; @b-white: #ffffff; @b-gray-thin: #d2d2d2; @b-gray-light: #999999; @b-red: #ff0000; @b-red-dark: #c91010; @b-red-darker: #e32b2b; @b-blue: #2de8e6; @b-gray: #edf0f0; @b-gray-dark: #d2d2d2; @b-gray-darker: #cccccc; @b-gray-light: #999999; @b-gray-lighter: #e5e5e5; @b-black-light: #a6a6a6; @b-black-green: #00cdcb; // 6. Background Color @bg-global: #edf0f0; @bg-header: #f1f7fb; @bg-gray: #d2d2d2; @bg-gray-light: #f5f5f5; @bg-gray-lighter: #e5e5e5; @bg-gray-dark: #e9e9e9; @bg-gray-darker: #cccccc; @bg-white: #ffffff; @bg-yellow-lighter: #faf9f4; @bg-black: #020202; @bg-blacker: #2b2b2b; @bg-black-blue: #296dec; @bg-black-green: #00cdcb; @bg-blue: #5c86a8; @bg-blue-light: #e4f0fa; @bg-blue-lighter: #b2f0ef; @bg-blue-dark: #4c7596; @bg-blue-darker: #01cdcc; @bg-red: #ff0000; @bg-red-light: #fe3770; @bg-red-darker: #ff1a1a; @bg-none: none; @bg-transparent: transparent; // 7. Spacing @s-none: 0; @s-xs: 5px; @s-sm: 10px; @s-lg: 20px; @s-xl: 30px; @s-xxl: 40px; @s-xxxl: 50px; @s-xxxxl: 60px; // 8. Z-index @global-z-index: 1000; @z-header: @global-z-index + 30; @z-main: @global-z-index + 10; @z-footer: @global-z-index + 20; @z-select: @global-z-index + 10; @z-select-header: @global-z-index / 10; @z-select-header-open: @z-select-header + 1; // 9. Border radius @global-radius: 2px; @r-none: 0; @r-xl: 5px; @r-lg: 4px; @r-sm: 3px; @r-xs: 1px;