Merge pull request #8 from F-happy/V1.3.0

V1.3.0

CHANGELOG.md

@@ -0,0 +1,7 @@
+# 更新记录
+
+> 以下带有 [update] 前缀的为不兼容更新，需要注意。而带有 [fix] 前缀的更新为异常修复。
+
+## 1.3.0
+* 补充完整的文档
+* [fix] 修正积累的错误

README.md

@@ -1,12 +1,18 @@
 # nuts-scss
 [![Build Status](https://travis-ci.org/F-happy/nuts-scss.svg?branch=master)](https://travis-ci.org/F-happy/nuts-scss)
-[![npm](https://img.shields.io/npm/v/nuts-scss.svg?style=flat)](https://www.npmjs.com/package/nuts-scss)
-[![npm](https://img.shields.io/npm/l/nuts-scss.svg?style=flat)](https://www.npmjs.com/package/nuts-scss)
-> 我的 scss 样式库
+[![npm](https://img.shields.io/npm/v/nuts-scss.svg?style=flat-square)](https://www.npmjs.com/package/nuts-scss)
+[![npm](https://img.shields.io/npm/l/nuts-scss.svg?style=flat-square)](https://www.npmjs.com/package/nuts-scss)
+[![npm](https://img.shields.io/npm/dt/nuts-scss.svg?style=flat-square)](https://www.npmjs.com/package/nuts-scss)
+> node-sass 下的一个 scss 基础样式库
+
+## 特点：
+* nuts-scss 严格控制样式冗余。使用开关变量来做到按需加载，按需开启，避免样式冗余。
+* nuts-scss 有两种调用方式，一种是只调用功能，不产生任何多余的css代码；另一种是包含了些重置样式。
+
 
 ### 安装：
 ```
-npm install --save-dev nuts-scss
+npm install --save nuts-scss
 ```
 接下来你就可以在 node-sass 中配置 scss 库了。
 
@@ -25,3 +31,7 @@ gulp.task('test', ()=> {
         .pipe(gulp.dest('./test/'));
 });
 ```
+
+## [文档 API](./doc/doc.md)
+
+## [更新日志](./CHANGELOG.md)

doc/animate.md

@@ -0,0 +1,64 @@
+# 动画模块说明
+
+* ```animation($value)``` 动画模块
+
+```scss
+$prefix-list: webkit;
+@include animation(down .3s ease-out 0s 1);
+编译为：
+// 消除 transition 闪屏
+-webkit-transform-style: preserve-3d;
+// 设置内嵌的元素在 3D 空间如何呈现：
+// 保留 3D（设置进行转换的元素的背面在面对用户时是否可见：隐藏）
+-webkit-backface-visibility: hidden;
+-webkit-animation: down 0.3s ease-out 0s 1;
+animation: down 0.3s ease-out 0s 1;
+```
+
+* ```transform($value)``` transform模块
+
+```scss
+$prefix-list: webkit;
+@include transform(translate3d(0, 0, 0));
+编译为：
+-webkit-transform: translate3d(0, 0, 0);
+transform: translate3d(0, 0, 0);
+```
+
+* ```keyframes($value)``` keyframes模块
+
+```scss
+$prefix-list: webkit;
+@include keyframes(down) {
+    0% {
+        @include transform(translate3d(0, -100%, 0));
+    }
+    100% {
+        @include transform(translate3d(0, 0, 0));
+    }
+}
+编译为：
+@-webkit-keyframes down {
+  0% {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0); 
+  }
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0); 
+  } 
+}
+
+@keyframes down {
+  0% {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0); 
+  }
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0); 
+  } 
+}
+```
+
+[返回](./doc.md)

doc/doc.md

@@ -0,0 +1,20 @@
+# 文档
+
+## 如何使用？
+
+在通过 npm 安装之后便可成为一个模块来通过 ```require``` 的方式加载近你的构建工具中。
+然后通过 ```includePaths``` 方法获取全部的路径。
+
+# API 目录
+
+[reset 说明](./reset.md)
+
+[设置说明](./setting.md)
+
+[补丁模块说明](./prefix.md)
+
+[函数说明](./function.md)
+
+[mixin说明](./mixin.md)
+
+[动画模块说明](./animate.md)

doc/function.md

@@ -0,0 +1,27 @@
+# 函数说明
+
+* ```pxToRem()``` 将px转换成rem
+
+```scss
+pxToRem(像素)		// 会被编译为对应的 rem
+
+pxToRem(32) => 1rem
+```
+
+* ```tint()``` 为颜色添加白色，以百分比形式
+
+```scss
+tint($color, $percent)
+
+color: tint(#f96f13, .3); => color: #f96f14;
+```
+
+* ```shade()``` 为颜色添加黑色，以百分比形式
+
+```scss
+shade($color, $percent)
+
+color: shade(#f96f13, .3); => color: #f86f13;
+```
+
+[返回](./doc.md)

doc/mixin.md

@@ -0,0 +1,93 @@
+# mixin 说明
+
+* ```backgroundImg($value)``` 背景图片处理
+
+```scss
+@include backgroundImg($image);
+编译为：
+background: url($image) no-repeat;
+background-size: 100% auto;
+```
+
+* ```ellipsis($width)``` 出多少宽度则显示省略号
+
+```scss
+@include ellipsis(200px);
+编译为：
+width: 200px;
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+```
+
+* ```box($align, $pack)``` 盒子布局函数, 默认上下左右居中显示
+
+```scss
+@include box();
+编译为：
+display: -webkit-box;
+-webkit-box-align: center;
+-webkit-box-pack: center;
+
+@include box(start, center);
+编译为：
+display: -webkit-box;
+-webkit-box-align: start;
+-webkit-box-pack: center;
+```
+
+* ```prefixer($property, $value, $prefixes)``` 用于在属性上加前缀,可通过 setting 设置前缀列表 $prefixes
+
+```scss
+$prefix-list: webkit;
+@include prefixer(border-radius, 30px);
+编译为：
+-webkit-border-radius: 30px;
+border-radius: 30px;
+```
+
+* ```border-box($value)``` 将元素变为圆形
+
+```scss
+@include border-box(100px);
+编译为：
+width: 100px;
+height: 100px;
+-webkit-border-radius: 50%;
+border-radius: 50%;
+```
+
+* ```clearfix()``` 清除浮动
+
+```scss
+.test {
+	@include clearfix();
+}
+编译为：
+.test:before, .test:after {
+  content: "";
+  display: table; 
+}
+.test:after {
+  clear: both; 
+}
+```
+
+* ```box-emboss($opacity, $opacity2)``` 内阴影和外阴影
+
+```scss
+@include box-emboss(#fff, #000);
+编译为：
+box-shadow: white(#fff) 0 1px 0, inset black(#000) 0 1px 0;
+```
+
+* ```opacity($opacity)``` 透明度
+
+```scss
+@include opacity(1);
+编译为：
+opacity: 1;
+filter: alpha(opacity=100);
+```
+
+[返回](./doc.md)

doc/prefix.md

@@ -0,0 +1,11 @@
+# 补丁模块说明
+
+在 scss 文件中通过 ```@extend``` 命令可以引入一些公共代码块。
+
+```scss
+@extend %border-1px 		// 在移动端上线上一像素的线
+
+@extend %not-user-select 	// 禁止用户选中文字
+```
+
+[返回](./doc.md)

doc/reset.md

@@ -0,0 +1,69 @@
+# reset 说明
+
+nuts-scss 是移动优先设计的，所以在默认情况下会通过 ```@media``` 属性来设置页面的基础字体大小，从而可以使用 ```rem``` 单位来进行移动端的自适应。
+
+```css
+@media screen and (min-width: 640px) and (max-width: 1023px) {
+    html {
+        font-size: 32px
+    }
+}
+@media screen and (min-width: 424px) and (max-width: 639px) {
+    html {
+        font-size: 21.2px
+    }
+}
+@media screen and (min-width: 414px) and (max-width: 423px) {
+    html {
+        font-size: 20.7px
+    }
+}
+@media screen and (min-width: 384px) and (max-width: 413px) {
+    html {
+        font-size: 19.2px
+    }
+}
+@media screen and (min-width: 375px) and (max-width: 383px) {
+    html {
+        font-size: 18.75px
+    }
+}
+@media screen and (min-width: 360px) and (max-width: 374px) {
+    html {
+        font-size: 18px
+    }
+}
+@media screen and (min-width: 320px) and (max-width: 359px) {
+    html {
+        font-size: 16px
+    }
+}
+```
+同时会重置一部分基础的 HTML5 标签，生成的 CSS 如下：
+> iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。
+> 中文字体设置为华文黑体STHeiTi。需补充说明，华文黑体并不存在[iOS的字体库](http://support.apple.com/kb/HT5484?viewlocale=en_US)中，
+> 但系统会自动将华文黑体STHeiTi兼容命中系统默认中文字体黑体-简或黑体-繁：
+> 原生Android下中文字体与英文字体都选择默认的无衬线字体。
+> 4.0之前版本英文字体原生Android使用的是Droid Sans，中文字体原生Android会命中Droid Sans Fallback。4.0+ 中英文字体都会使用原生Android新的Roboto字体。
+> 其他第三方Android系统也一致选择默认的无衬线字体。
+
+```css
+html {
+    -webkit-text-size-adjust: none;
+    -webkit-appearance: none
+}
+html, body, div, p, header {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    font-size: 100%;
+    vertical-align: baseline
+}
+html {
+    line-height: 1;
+    font-family: Helvetica, sans-serif
+}
+```
+
+[返回](./doc.md)

doc/setting.md

@@ -0,0 +1,14 @@
+# 设置说明
+
+```scss
+// 前缀列表, 只会自动添加列表中的前缀
+$prefix-list: webkit, moz !default;
+
+// 判断是否需要前缀
+$prefixNo: true !default;
+
+// px 转成 rem 的基础值
+$remBase: 32 !default;
+```
+
+[返回](./doc.md)

nuts-scss-lib/library/_animate.scss

@@ -25,15 +25,18 @@
             @-webkit-keyframes #{$value}{
                 @content;
             }
-        } @else if $prefix == moz {
+        }
+        @if $prefix == moz {
             @-moz-keyframes #{$value}{
                 @content;
             }
-        } @else if $prefix == ms {
+        }
+        @if $prefix == ms {
             @-ms-keyframes #{$value}{
                 @content;
             }
-        } @else if $prefix == o {
+        }
+        @if $prefix == o {
             @-o-keyframes #{$value}{
                 @content;
             }

nuts-scss-lib/library/_reset.scss

@@ -30,7 +30,7 @@ html {
 }
 
 body {
-    //clear click shadow in ios
+    // clear click shadow in ios
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 
     // 使前端列表也可以实现客户端的滚动效果