tq-mreset
_function.scss
集成了所有的基础功能,并且不输出任何样式,而_core.scss
则在function的基础上加入了重置样式。
如何使用
npm 调用
安装
npm install tq-mreset --save-dev
调用
@import 'node_modules/tq-mreset/core';
@import 'node_modules/tq-mreset/function';
普通使用
// webpack
开发
克隆项目
git clone ssh://git@gitlab.hztianque.com:22016/f2e/mobile-reset.git
项目build
npm run dist
项目发布
npm run pub
文件简述
两个集合文件(core,function)导入的都是core中的文件,区别在于core除了提供基本功能之外还会生成一份reset样式,而function则只提供基本功能。
core文件
variables
负责基础变量的文件,如常用的颜色,字体等变量。
media-queries
负责响应式断点判断的文件,来自paranoida的sass-mediaqueries。
mixin
负责功能方面的文件。这里我们大概分成三个部分,一个是混合部分即mixin(主要定义了一些常用的flex
,translate
等),一个是placeholder选择器部分即%,最后就是我们的function函数部分。常用的include及extend就是在这里定义的。
animation
提供六组简单实用动画:fade-in/out, shrink-in/out, up-in/out, down-in/out,left-in/out,right-in/out。默认不产生样式,通过include调用
reset
在normalize的基础上,根据目前我们大家的使用习惯进行了一些归零行动,及基础文字颜色,clearfix,box-sizing等。
字体重置规则,见文档字体设置