mm-sass-base
主要功能
- 设置项目基本环境如变量, 常用minxin, 函数, 编译不会产生css, 可根据需要引入或
_base.scss
全部引入 - 包含常用工具类和设置, 编译会产生css, 可根据需要引入或通过
_all.scss
全部引入
兼容性: IE8+
- 使用了
box-sizing: border-box;
如何使用
- 通过
npm install mm-sass-base --save-dev
安装到项目 - 在项目中新建
_base.scss
, 通过@import node_modules/mm-sass-base/base
获取项目提供的环境配置, 根据项目情况设置所需变量, 项目中的sass文件引入项目中的_base.scss
即可具有相同的设置 - 根据需要引入工具类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