mm-sass-base v1.0.2

mm-sass-base

主要功能

• 设置项目基本环境如变量, 常用minxin, 函数, 编译不会产生css, 可根据需要引入或_base.scss全部引入
• 包含常用工具类和设置, 编译会产生css, 可根据需要引入或通过_all.scss全部引入

兼容性: IE8+

• 使用了box-sizing: border-box;

如何使用

1. 通过npm install mm-sass-base --save-dev安装到项目
2. 在项目中新建_base.scss, 通过@import node_modules/mm-sass-base/base获取项目提供的环境配置, 根据项目情况设置所需变量, 项目中的sass文件引入项目中的_base.scss即可具有相同的设置
3. 根据需要引入工具类sass文件

示例项目

fe-sass-base使用mm-sass-base作为基础sass环境

partials文件

partials类型文件设置项目基本环境如变量, 常用minxin, 函数, 编译不会产生css

• _base.scss: 包含目录下全部资源, 任意sass文件只需引入_base.scss即可具备统一的环境设置.
• _flex.scss: flex相关浏览器兼容处理的mixin
• _functions.scss: 常用函数如px2rem根据$rem-base将px单位长度转换为rem单位
• _mixin.scss: 常用mixin, 方便开发如text-overflow, mq, background-image, clearfix
• _variable.scss: 项目常用变量设置, 如$color-brand, $rem-base, $font-family-base

generic文件

generic类型文件包含常用工具类和设置, 编译会产生css, 可根据需要引入或通过_all.scss全部引入, 这些文件可能依赖于_base.scss, 所以必须在_base.scss之后引入

• _all.scss: 包含目录下全部资源, 直接引入后包含全部通用工具类
• _color.scss: 常用颜色类定义, 如.color-3, .color-brand
• _common.scss: 通用工具类定义, 如.clearfix, .hide, .show
• _dimension.scss: 尺寸工具类定义, 如.w10, .w100, .h10, .h100
• _fontsize.scss: 字号类定义, 如.f12,.f14
• _grid.scss: pc first的栅格系统, 十二等分, 包含.col-*, .col-pad-*, .col-h5-*三个级别的设备尺寸切换
• _page.scss: 在body上设置页面默认字体, 字号, 行高, 颜色
• _spacing.scss: 内外边距工具类, 如.mt10, .pb10
• _neat.scss: https://github.com/thx/cube/blob/gh-pages/src/scss/neat.scss