diff --git a/.npmrc b/.npmrc
index b8db633..3a46f62 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,3 @@
 sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
+package-lock=false
+registry=https://registry.npm.taobao.org
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..8849e87
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,40 @@
+{
+  "trailingComma": "none",
+  "arrowParens": "always",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": ["*.json", ".eslintrc", ".tslintrc", ".prettierrc", ".tern-project"],
+      "options": {
+        "parser": "json",
+        "tabWidth": 2
+      }
+    },
+    {
+      "files": "*.{css,sass,scss,less}",
+      "options": {
+        "parser": "postcss",
+        "tabWidth": 2
+      }
+    },
+    {
+      "files": "*.ts",
+      "options": {
+        "parser": "typescript"
+      }
+    },
+    {
+      "files": "*.md",
+      "options": {
+        "trailingComma": "none",
+        "tabWidth": 2,
+        "parser": "json"
+      }
+    }
+  ]
+}
diff --git a/build/build.js b/build/build.js
deleted file mode 100644
index 33b76d9..0000000
--- a/build/build.js
+++ /dev/null
@@ -1,18 +0,0 @@
-(function() {
-
-  'use strict';
-
-  var gulp = require('gulp');
-  var config = require('./config');
-  var argv = require('yargs').argv;
-  var $ = require('gulp-load-plugins')({
-    pattern: ['gulp-*', 'gulp.*', 'del']
-  });
-
-  gulp.task('build', ['clean'], function() {
-    gulp.start(['styles']);
-  });
-
-
-
-}());
diff --git a/build/styles.js b/build/styles.js
index dcef975..8e77565 100644
--- a/build/styles.js
+++ b/build/styles.js
@@ -1,5 +1,4 @@
 (function() {
-
   'use strict';
 
   var gulp = require('gulp');
@@ -10,26 +9,28 @@
   });
 
   //styles
-  gulp.task('styles',function() {
-    return gulp.src([
-      'src/init.scss',
-      'src/background-color.scss',
-      'src/blank.scss',
-      'src/border-color.scss',
-      'src/border-radius.scss',
-      'src/box.scss',
-      'src/color.scss',
-      'src/font-size.scss',
-      'src/grid.scss',
-      'src/line.scss',
-      'src/line-clamp.scss',
-      'src/line-height.scss',
-      'src/margin.scss',
-      'src/padding.scss',
-      'src/width.scss'
-    ])
-      .pipe($.concat('webkit-sass-generators.scss'))
-      .pipe(gulp.dest('dist'));
-  });
-
-}());
+  gulp.task(
+    'styles',
+    gulp.parallel(function() {
+      return gulp
+        .src([
+          'src/init.scss',
+          'src/background-color.scss',
+          'src/blank.scss',
+          'src/border-color.scss',
+          'src/border-radius.scss',
+          'src/box.scss',
+          'src/color.scss',
+          'src/font-size.scss',
+          'src/font-weight.scss',
+          'src/grid.scss',
+          'src/line.scss',
+          'src/line-clamp.scss',
+          'src/line-height.scss',
+          'src/width.scss'
+        ])
+        .pipe($.concat('webkit-sass-generators.scss'))
+        .pipe(gulp.dest('dist'));
+    })
+  );
+})();
diff --git a/build/test.js b/build/test.js
index 26d0949..f09a480 100644
--- a/build/test.js
+++ b/build/test.js
@@ -1,5 +1,4 @@
 (function() {
-
   'use strict';
 
   var gulp = require('gulp');
@@ -10,10 +9,13 @@
   });
 
   //styles
-  gulp.task('test',function() {
-    return gulp.src('docs/*.scss')
-      .pipe($.sass({outputStyle: 'expanded'}).on('error', $.sass.logError))
-      .pipe(gulp.dest('docs'));
-  });
-
-}());
+  gulp.task(
+    'test',
+    gulp.parallel(function() {
+      return gulp
+        .src('docs/*.scss')
+        .pipe($.sass({ outputStyle: 'expanded' }).on('error', $.sass.logError))
+        .pipe(gulp.dest('docs'));
+    })
+  );
+})();
diff --git a/dist/webkit-sass-generators.scss b/dist/webkit-sass-generators.scss
index 76c3312..92dfc77 100644
--- a/dist/webkit-sass-generators.scss
+++ b/dist/webkit-sass-generators.scss
@@ -3,10 +3,10 @@
 /* init end*/
 
 /*background-color Start*/
-@mixin generator-background-color($inMap,$inPrefix:'.bg-'){
-  @each $name,$color in $inMap{
-    #{$inPrefix}#{$name}{
-      background-color:#{$color};
+@mixin generator-background-color($inMap, $inPrefix: ".bg-") {
+  @each $name, $color in $inMap {
+    #{$inPrefix}#{$name} {
+      background-color: #{$color};
     }
   }
 }
@@ -21,11 +21,11 @@
 }
 
 // NORMAL
-@mixin generator-blank($inList,$inPrefix:'.blank-'){
+@mixin generator-blank($inList, $inPrefix: ".blank-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
-        height:#{$i}px;
+    @each $i in $inList {
+      &#{$i} {
+        height: #{$i}px;
         @extend .blank;
       }
     }
@@ -33,10 +33,10 @@
 }
 
 // Weapp
-@mixin generator-blank-rpx($inList,$inPrefix:'.blank-'){
+@mixin generator-blank-rpx($inList, $inPrefix: ".blank-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
+    @each $i in $inList {
+      &#{$i} {
         height: to-rpx-value($i);
         @extend .blank;
       }
@@ -45,25 +45,24 @@
 }
 
 // Mobile
-@mixin generator-blank-rem($inList,$inPrefix:'.blank-rem-',$rem:50){
+@mixin generator-blank-rem($inList, $inPrefix: ".blank-rem-", $rem: 50) {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
-        height: to-rem-value($i,$rem);
+    @each $i in $inList {
+      &#{$i} {
+        height: to-rem-value($i, $rem);
         @extend .blank;
       }
     }
   }
 }
 
-
 /*blank End*/
 
 /*border-color Start*/
-@mixin generator-border-color($inMap,$inPrefix:'.bdc-'){
-  @each $name,$color in $inMap{
-    #{$inPrefix}#{$name}{
-      border-color:#{$color};
+@mixin generator-border-color($inMap, $inPrefix: ".bdc-") {
+  @each $name, $color in $inMap {
+    #{$inPrefix}#{$name} {
+      border-color: #{$color};
     }
   }
 }
@@ -71,10 +70,10 @@
 
 /*border-radius Start*/
 // NORMAL
-@mixin generator-border-radius($inList,$inPrefix:'.bdr-'){
+@mixin generator-border-radius($inList, $inPrefix: ".bdr-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
+    @each $i in $inList {
+      &#{$i} {
         border-radius: #{$i}px;
       }
     }
@@ -82,10 +81,10 @@
 }
 
 // Weapp
-@mixin generator-border-radius-rpx($inList,$inPrefix:'.bdr-'){
+@mixin generator-border-radius-rpx($inList, $inPrefix: ".bdr-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
+    @each $i in $inList {
+      &#{$i} {
         border-radius: to-rpx-value($i);
       }
     }
@@ -93,11 +92,11 @@
 }
 
 // Mobile
-@mixin generator-border-radius-rem($inList,$inPrefix:'.bdr-rem-', $rem: 50){
+@mixin generator-border-radius-rem($inList, $inPrefix: ".bdr-rem-", $rem: 50) {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
-        border-radius: to-rem-value($i,$rem);
+    @each $i in $inList {
+      &#{$i} {
+        border-radius: to-rem-value($i, $rem);
       }
     }
   }
@@ -105,45 +104,57 @@
 /*border-radius End*/
 
 /*box Start*/
-$box-map:(
-  m:margin,
-  mt:margin-top,
-  mr:margin-right,
-  mb:margin-bottom,
-  ml:margin-left,
-  mx:(margin-left,margin-right),
-  my:(margin-top,margin-bottom),
-  p:padding,
-  pt:padding-top,
-  pr:padding-right,
-  pb:padding-bottom,
-  pl:padding-left,
-  px:(padding-left,padding-right),
-  py:(padding-top,padding-bottom)
+$box-map: (
+  m: margin,
+  mt: margin-top,
+  mr: margin-right,
+  mb: margin-bottom,
+  ml: margin-left,
+  mx: (
+    margin-left,
+    margin-right
+  ),
+  my: (
+    margin-top,
+    margin-bottom
+  ),
+  p: padding,
+  pt: padding-top,
+  pr: padding-right,
+  pb: padding-bottom,
+  pl: padding-left,
+  px: (
+    padding-left,
+    padding-right
+  ),
+  py: (
+    padding-top,
+    padding-bottom
+  )
 );
 
 // NORMAL
-@mixin generator-box($inList,$inDirection:'m'){
-  $mapValue:map_get($box-map,$inDirection);
-  $typeof:type-of($mapValue);
+@mixin generator-box($inList, $inDirection: "m") {
+  $mapValue: map_get($box-map, $inDirection);
+  $typeof: type-of($mapValue);
 
-  @if $typeof =='string'{
+  @if $typeof == "string" {
     .#{$inDirection} {
-      @each $i in $inList{
-        &#{$i}{
+      @each $i in $inList {
+        &#{$i} {
           &,
-          &_>*{
-            #{$mapValue}:#{$i}px;
+          &_ > * {
+            #{$mapValue}: #{$i}px;
           }
         }
       }
     }
-  }@else{
+  } @else {
     .#{$inDirection} {
-      @each $i in $inList{
-        &#{$i}{
+      @each $i in $inList {
+        &#{$i} {
           &,
-          &_>*{
+          &_ > * {
             //mapValue is a `list`
             @each $mapItem in $mapValue {
               #{$mapItem}: #{$i}px;
@@ -155,24 +166,23 @@ $box-map:(
   }
 }
 
-
 // Weapp
-@mixin generator-box-rpx($inList,$inDirection:'m'){
-  $mapValue:map_get($box-map,$inDirection);
-  $typeof:type-of($mapValue);
+@mixin generator-box-rpx($inList, $inDirection: "m") {
+  $mapValue: map_get($box-map, $inDirection);
+  $typeof: type-of($mapValue);
 
-  @if $typeof =='string'{
+  @if $typeof == "string" {
     .#{$inDirection} {
-      @each $i in $inList{
-        &#{$i}{
-          #{$mapValue}:to-rpx-value($i);
+      @each $i in $inList {
+        &#{$i} {
+          #{$mapValue}: to-rpx-value($i);
         }
       }
     }
-  }@else{
+  } @else {
     .#{$inDirection} {
-      @each $i in $inList{
-        &#{$i}{
+      @each $i in $inList {
+        &#{$i} {
           //mapValue is a `list`
           @each $mapItem in $mapValue {
             #{$mapItem}: to-rpx-value($i);
@@ -184,30 +194,30 @@ $box-map:(
 }
 
 // Mobile
-@mixin generator-box-rem($inList, $inDirection:'m', $rem: 50){
-  $mapValue:map_get($box-map,$inDirection);
-  $typeof:type-of($mapValue);
+@mixin generator-box-rem($inList, $inDirection: "m", $rem: 50) {
+  $mapValue: map_get($box-map, $inDirection);
+  $typeof: type-of($mapValue);
 
-  @if $typeof =='string'{
+  @if $typeof == "string" {
     .#{$inDirection} {
-      @each $i in $inList{
-        &#{$i}{
+      @each $i in $inList {
+        &#{$i} {
           &,
-          &_>*{
-            #{$mapValue}: to-rem-value($i,$rem);
+          &_ > * {
+            #{$mapValue}: to-rem-value($i, $rem);
           }
         }
       }
     }
-  }@else{
+  } @else {
     .#{$inDirection} {
-      @each $i in $inList{
-        &#{$i}{
+      @each $i in $inList {
+        &#{$i} {
           &,
-          &_>*{
+          &_ > * {
             //mapValue is a `list`
             @each $mapItem in $mapValue {
-              #{$mapItem}: to-rem-value($i,$rem);
+              #{$mapItem}: to-rem-value($i, $rem);
             }
           }
         }
@@ -218,10 +228,10 @@ $box-map:(
 /*box End*/
 
 /*color Start*/
-@mixin generator-color($inMap,$inPrefix:'.c-'){
-  @each $name,$color in $inMap{
-    #{$inPrefix}#{$name}{
-      color:#{$color};
+@mixin generator-color($inMap, $inPrefix: ".c-") {
+  @each $name, $color in $inMap {
+    #{$inPrefix}#{$name} {
+      color: #{$color};
     }
   }
 }
@@ -230,29 +240,29 @@ $box-map:(
 /*font-size Start*/
 
 // NORMAL
-@mixin generator-font-size($inList,$inPrefix:'.f-'){
+@mixin generator-font-size($inList, $inPrefix: ".f-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
-        font-size:#{$i}px;
+    @each $i in $inList {
+      &#{$i} {
+        font-size: #{$i}px;
       }
     }
   }
 }
 
 // Weapp
-@mixin generator-font-size-rpx($inList,$inPrefix:'.f-'){
+@mixin generator-font-size-rpx($inList, $inPrefix: ".f-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
-        font-size:to-rpx-value($i);
+    @each $i in $inList {
+      &#{$i} {
+        font-size: to-rpx-value($i);
       }
     }
   }
 }
 
 // Mobile
-@mixin generator-font-size-rem($inList,$inPrefix:'.f-rem-',$rem:50) {
+@mixin generator-font-size-rem($inList, $inPrefix: ".f-rem-", $rem: 50) {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -263,35 +273,43 @@ $box-map:(
 }
 /*font-size End*/
 
+// fontWeight
+@mixin generator-font-weight($inList, $inPrefix: ".fw-") {
+  @each $value in $inList {
+    #{$inPrefix}#{$value} {
+      font-weight: $value;
+    }
+  }
+}
+
 /*grid Start*/
-.dib-col{
+.dib-col {
   width: 100%;
   display: inline-block;
   font-size: 16px;
 }
-@mixin dib-row () {
+@mixin dib-row() {
   font-size: 0;
 }
 // This is column mixins.
-@mixin dib-col ($col, $sum, $gap: 1em, $align: top, $first: false, $last: false) {
+@mixin dib-col($col, $sum, $gap: 1em, $align: top, $first: false, $last: false) {
   padding-left: if($first, 0, $gap);
   padding-right: if($last, 0, $gap);
   width: percentage($col/$sum);
   vertical-align: $align;
 }
 
-
-@mixin generator-grid ($sum:12,$row:'.row',$col:'.col-') {
-  #{$row}{
+@mixin generator-grid($sum: 12, $row: ".row", $col: ".col-") {
+  #{$row} {
     @include dib-row;
   }
   @for $i from 1 through $sum {
-    $left:$sum - $i;
-    #{$col}#{$i}{
+    $left: $sum - $i;
+    #{$col}#{$i} {
       @extend .dib-col;
-      @include dib-col($i,$sum);
+      @include dib-col($i, $sum);
     }
-    .offset-#{$left}{
+    .offset-#{$left} {
       margin-left: percentage($left/$sum);
     }
   }
@@ -300,7 +318,7 @@ $box-map:(
 
 /*line Start*/
 // NORMAL
-@mixin generator-line($inList,$inColor:#ccc,$inPrefix:'.line-') {
+@mixin generator-line($inList, $inColor: #ccc, $inPrefix: ".line-") {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -313,7 +331,7 @@ $box-map:(
 }
 
 // Weapp
-@mixin generator-line-rpx($inList,$inColor:#ccc,$inPrefix:'.line-') {
+@mixin generator-line-rpx($inList, $inColor: #ccc, $inPrefix: ".line-") {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -326,11 +344,11 @@ $box-map:(
 }
 
 // Mobile
-@mixin generator-line-rem($inList,$inColor:#ccc,$inPrefix:'.line-rem-',$rem:50) {
+@mixin generator-line-rem($inList, $inColor: #ccc, $inPrefix: ".line-rem-", $rem: 50) {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
-        height: to-rem-value($i,$rem);
+        height: to-rem-value($i, $rem);
         background-color: $inColor;
         @extend .blank;
       }
@@ -353,11 +371,10 @@ $box-map:(
   -webkit-line-clamp: $inLine;
 }
 
-
-@mixin generator-line-clamp($inList,$inPrefix:'.lc-'){
+@mixin generator-line-clamp($inList, $inPrefix: ".lc-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
+    @each $i in $inList {
+      &#{$i} {
         -webkit-line-clamp: $i;
         @extend %line-clamp;
       }
@@ -369,7 +386,7 @@ $box-map:(
 
 /*line-height Start*/
 // NORMAL
-@mixin generator-line-height($inList,$inPrefix:'.lh-') {
+@mixin generator-line-height($inList, $inPrefix: ".lh-") {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -379,7 +396,7 @@ $box-map:(
   }
 }
 
-@mixin generator-hlh($inList,$inPrefix:'.hlh-') {
+@mixin generator-hlh($inList, $inPrefix: ".hlh-") {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -391,7 +408,7 @@ $box-map:(
 }
 
 // Weapp
-@mixin generator-line-height-rpx($inList,$inPrefix:'.lh-') {
+@mixin generator-line-height-rpx($inList, $inPrefix: ".lh-") {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -401,7 +418,7 @@ $box-map:(
   }
 }
 
-@mixin generator-hlh-rpx($inList,$inPrefix:'.hlh-') {
+@mixin generator-hlh-rpx($inList, $inPrefix: ".hlh-") {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -413,22 +430,22 @@ $box-map:(
 }
 
 // Mobile
-@mixin generator-line-height-rem($inList,$inPrefix:'.lh-rem-',$rem:50) {
+@mixin generator-line-height-rem($inList, $inPrefix: ".lh-rem-", $rem: 50) {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
-        line-height: to-rem-value($i,$rem);
+        line-height: to-rem-value($i, $rem);
       }
     }
   }
 }
 
-@mixin generator-hlh-rem($inList,$inPrefix:'.hlh-rem-',$rem:50) {
+@mixin generator-hlh-rem($inList, $inPrefix: ".hlh-rem-", $rem: 50) {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
-        height: to-rem-value($i,$rem);
-        line-height: to-rem-value($i,$rem);
+        height: to-rem-value($i, $rem);
+        line-height: to-rem-value($i, $rem);
       }
     }
   }
@@ -436,16 +453,16 @@ $box-map:(
 /*line-height End*/
 
 /*width Start*/
-@mixin generator-width-w1($inList,$inPrefix:'.w1-') {
-  @each $value in $inList{
+@mixin generator-width-w1($inList, $inPrefix: ".w1-") {
+  @each $value in $inList {
     #{$inPrefix}#{$value} {
-      width: percentage(1/$value);
+      width: percentage(1 / $value);
     }
   }
 }
 
-@mixin generator-width-wp($inList,$inPrefix:'.wp-') {
-  @each $value in $inList{
+@mixin generator-width-wp($inList, $inPrefix: ".wp-") {
+  @each $value in $inList {
     #{$inPrefix}#{$value} {
       width: percentage($value/10);
     }
diff --git a/docs/webkit-sass-generators.css b/docs/webkit-sass-generators.css
index 48580f7..9051c2f 100644
--- a/docs/webkit-sass-generators.css
+++ b/docs/webkit-sass-generators.css
@@ -3,18 +3,24 @@
 /*black End*/
 /*debug Start*/
 /*debug End*/
+/*dynamic-text-color Start*/
+/*dynamic-text-color End*/
 /*first Start*/
 /*first End*/
 /*generate-list Start*/
 /*generate-list End*/
 /*last Start*/
 /*last End*/
+/*map-deep-get Start*/
+/*map-deep-get End*/
 /*purge Start*/
 /*purge End*/
 /*rem Start*/
 /*rem End*/
 /*remove-duplicates Start*/
 /*remove-duplicates End*/
+/*rpx Start*/
+/*rpx End*/
 /*strip-units Start*/
 /*strip-units End*/
 /* init end*/
@@ -40,7 +46,7 @@
 /*font-size Start*/
 /*font-size End*/
 /*grid Start*/
-.dib-col, .wk-col-1, .wk-col-2, .wk-col-3, .wk-col-4, .wk-col-5, .wk-col-6, .wk-col-7, .wk-col-8, .wk-col-9, .wk-col-10, .wk-col-11, .wk-col-12 {
+.dib-col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
   width: 100%;
   display: inline-block;
   font-size: 16px;
@@ -61,26 +67,6 @@
 /*line-clamp End*/
 /*line-height Start*/
 /*line-height End*/
-/*margin Start*/
-.mr__ > *:last-child {
-  margin-right: 0;
-}
-
-.ml__ > *:first-child {
-  margin-left: 0;
-}
-
-/*margin End*/
-/*padding Start*/
-.pr__ > *:last-child {
-  padding-right: 0;
-}
-
-.pl__ > *:first-child {
-  padding-left: 0;
-}
-
-/*padding End*/
 /*width Start*/
 /*width End*/
 .c-0 {
@@ -315,6 +301,38 @@
   font-size: 30px;
 }
 
+.fw-100 {
+  font-weight: 100;
+}
+
+.fw-200 {
+  font-weight: 200;
+}
+
+.fw-300 {
+  font-weight: 300;
+}
+
+.fw-400 {
+  font-weight: 400;
+}
+
+.fw-500 {
+  font-weight: 500;
+}
+
+.fw-600 {
+  font-weight: 600;
+}
+
+.fw-700 {
+  font-weight: 700;
+}
+
+.fw-800 {
+  font-weight: 800;
+}
+
 .bdr-1 {
   border-radius: 1px;
 }
@@ -1001,11 +1019,11 @@
   padding-bottom: 0.18rem;
 }
 
-.wk-row {
+.row {
   font-size: 0;
 }
 
-.wk-col-1 {
+.col-1 {
   padding-left: 1em;
   padding-right: 1em;
   width: 8.33333%;
@@ -1016,7 +1034,7 @@
   margin-left: 91.66667%;
 }
 
-.wk-col-2 {
+.col-2 {
   padding-left: 1em;
   padding-right: 1em;
   width: 16.66667%;
@@ -1027,7 +1045,7 @@
   margin-left: 83.33333%;
 }
 
-.wk-col-3 {
+.col-3 {
   padding-left: 1em;
   padding-right: 1em;
   width: 25%;
@@ -1038,7 +1056,7 @@
   margin-left: 75%;
 }
 
-.wk-col-4 {
+.col-4 {
   padding-left: 1em;
   padding-right: 1em;
   width: 33.33333%;
@@ -1049,7 +1067,7 @@
   margin-left: 66.66667%;
 }
 
-.wk-col-5 {
+.col-5 {
   padding-left: 1em;
   padding-right: 1em;
   width: 41.66667%;
@@ -1060,7 +1078,7 @@
   margin-left: 58.33333%;
 }
 
-.wk-col-6 {
+.col-6 {
   padding-left: 1em;
   padding-right: 1em;
   width: 50%;
@@ -1071,7 +1089,7 @@
   margin-left: 50%;
 }
 
-.wk-col-7 {
+.col-7 {
   padding-left: 1em;
   padding-right: 1em;
   width: 58.33333%;
@@ -1082,7 +1100,7 @@
   margin-left: 41.66667%;
 }
 
-.wk-col-8 {
+.col-8 {
   padding-left: 1em;
   padding-right: 1em;
   width: 66.66667%;
@@ -1093,7 +1111,7 @@
   margin-left: 33.33333%;
 }
 
-.wk-col-9 {
+.col-9 {
   padding-left: 1em;
   padding-right: 1em;
   width: 75%;
@@ -1104,7 +1122,7 @@
   margin-left: 25%;
 }
 
-.wk-col-10 {
+.col-10 {
   padding-left: 1em;
   padding-right: 1em;
   width: 83.33333%;
@@ -1115,7 +1133,7 @@
   margin-left: 16.66667%;
 }
 
-.wk-col-11 {
+.col-11 {
   padding-left: 1em;
   padding-right: 1em;
   width: 91.66667%;
@@ -1126,7 +1144,7 @@
   margin-left: 8.33333%;
 }
 
-.wk-col-12 {
+.col-12 {
   padding-left: 1em;
   padding-right: 1em;
   width: 100%;
diff --git a/docs/webkit-sass-generators.scss b/docs/webkit-sass-generators.scss
index b6b7d8e..2b9c1e5 100644
--- a/docs/webkit-sass-generators.scss
+++ b/docs/webkit-sass-generators.scss
@@ -1,52 +1,53 @@
 @import "../dist/webkit-sass-generators.scss";
 //test color-map
 $color-map: (
-  0:#000,
-  3:#333,
-  6:#666,
-  9:#999,
-  f:#fff
+  0: #000,
+  3: #333,
+  6: #666,
+  9: #999,
+  f: #fff
 );
 
-$width-list:generate-list(1,10);
-$box-list:(1,2,3,4,5,6,7,8,9);
+$width-list: generate-list(1, 10);
+$box-list: (1, 2, 3, 4, 5, 6, 7, 8, 9);
 
 //Generate a list:
-$w1-list:generate-list(1,20);
-$border-radius-list:generate-list(1,5);
-$font-list:(10,20,30);
-$line-clamp:(1,2,3,4,5);
-
-@include generator-color($color-map,'.c-');
-@include generator-background-color($color-map,'.bg-');
-@include generator-border-color($color-map,'.bdc-');
+$w1-list: generate-list(1, 20);
+$border-radius-list: generate-list(1, 5);
+$font-list: (10, 20, 30);
+$font-weight-list: (100, 200, 300, 400, 500, 600, 700, 800);
+$line-clamp: (1, 2, 3, 4, 5);
 
+@include generator-color($color-map, ".c-");
+@include generator-background-color($color-map, ".bg-");
+@include generator-border-color($color-map, ".bdc-");
 
 //Generate width/blank/font-size/border-radius:
-@include generator-width-w1($w1-list,'.w1-');
-@include generator-width-wp($width-list,'.wp-');
-@include generator-blank($width-list,'.blank-');
-@include generator-font-size($font-list,'.f-');
-@include generator-border-radius($border-radius-list,'.bdr-');
+@include generator-width-w1($w1-list, ".w1-");
+@include generator-width-wp($width-list, ".wp-");
+@include generator-blank($width-list, ".blank-");
+@include generator-font-size($font-list, ".f-");
+@include generator-font-weight($font-weight-list, ".fw-");
+@include generator-border-radius($border-radius-list, ".bdr-");
 
 //Generate margin:
-@include generator-box($box-list,'m');
-@include generator-box($box-list,'mt');
-@include generator-box($box-list,'mr');
-@include generator-box($box-list,'ml');
-@include generator-box($box-list,'mb');
-@include generator-box($box-list,'mx');
-@include generator-box($box-list,'my');
-
-@include generator-box-rem($box-list,'p', 50);
-@include generator-box-rem($box-list,'pt', 50);
-@include generator-box-rem($box-list,'pr', 50);
-@include generator-box-rem($box-list,'pl', 50);
-@include generator-box-rem($box-list,'pb', 50);
-@include generator-box-rem($box-list,'px', 50);
-@include generator-box-rem($box-list,'py', 50);
+@include generator-box($box-list, "m");
+@include generator-box($box-list, "mt");
+@include generator-box($box-list, "mr");
+@include generator-box($box-list, "ml");
+@include generator-box($box-list, "mb");
+@include generator-box($box-list, "mx");
+@include generator-box($box-list, "my");
+
+@include generator-box-rem($box-list, "p", 50);
+@include generator-box-rem($box-list, "pt", 50);
+@include generator-box-rem($box-list, "pr", 50);
+@include generator-box-rem($box-list, "pl", 50);
+@include generator-box-rem($box-list, "pb", 50);
+@include generator-box-rem($box-list, "px", 50);
+@include generator-box-rem($box-list, "py", 50);
 
 //Generate your own grid:
-@include generator-grid(12,'.wk-row','.wk-col-');
-@include generator-line($width-list,#f3f3f3,'.line-');
-@include generator-line-clamp($line-clamp,'.lc-');
+@include generator-grid(12, ".row", ".col-");
+@include generator-line($width-list, #f3f3f3, ".line-");
+@include generator-line-clamp($line-clamp, ".lc-");
diff --git a/gulpfile.js b/gulpfile.js
index b0ce05b..feb9495 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,5 +1,4 @@
 (function() {
-
   'use strict';
 
   var path = require('path');
@@ -15,7 +14,5 @@
     require('./build/' + file);
   });
 
-
-  gulp.task('default',['build']);
-
-}());
+  gulp.task('default', gulp.series(['clean', 'styles']));
+})();
diff --git a/package.json b/package.json
index 7c870b8..bad6a22 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webkit-sass-generators",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "description": "Webkit sass generator mixins.",
   "homepage": "https://github.com/afeiship/webkit-sass-generators",
   "author": {
@@ -15,11 +15,11 @@
   "main": "dist/webkit-sass-generators.scss",
   "devDependencies": {
     "del": "^2.2.1",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.2",
     "gulp-concat": "^2.6.0",
     "gulp-load-plugins": "^1.2.0",
     "gulp-rename": "^1.2.2",
-    "gulp-sass": "^2.3.2",
+    "gulp-sass": "^4.0.2",
     "yargs": "^4.7.1"
   },
   "dependencies": {
diff --git a/src/background-color.scss b/src/background-color.scss
index 8855aa2..8b97aac 100644
--- a/src/background-color.scss
+++ b/src/background-color.scss
@@ -1,8 +1,8 @@
 /*background-color Start*/
-@mixin generator-background-color($inMap,$inPrefix:'.bg-'){
-  @each $name,$color in $inMap{
-    #{$inPrefix}#{$name}{
-      background-color:#{$color};
+@mixin generator-background-color($inMap, $inPrefix: ".bg-") {
+  @each $name, $color in $inMap {
+    #{$inPrefix}#{$name} {
+      background-color: #{$color};
     }
   }
 }
diff --git a/src/blank.scss b/src/blank.scss
index ea30282..ef65083 100644
--- a/src/blank.scss
+++ b/src/blank.scss
@@ -7,11 +7,11 @@
 }
 
 // NORMAL
-@mixin generator-blank($inList,$inPrefix:'.blank-'){
+@mixin generator-blank($inList, $inPrefix: ".blank-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
-        height:#{$i}px;
+    @each $i in $inList {
+      &#{$i} {
+        height: #{$i}px;
         @extend .blank;
       }
     }
@@ -19,10 +19,10 @@
 }
 
 // Weapp
-@mixin generator-blank-rpx($inList,$inPrefix:'.blank-'){
+@mixin generator-blank-rpx($inList, $inPrefix: ".blank-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
+    @each $i in $inList {
+      &#{$i} {
         height: to-rpx-value($i);
         @extend .blank;
       }
@@ -31,16 +31,15 @@
 }
 
 // Mobile
-@mixin generator-blank-rem($inList,$inPrefix:'.blank-rem-',$rem:50){
+@mixin generator-blank-rem($inList, $inPrefix: ".blank-rem-", $rem: 50) {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
-        height: to-rem-value($i,$rem);
+    @each $i in $inList {
+      &#{$i} {
+        height: to-rem-value($i, $rem);
         @extend .blank;
       }
     }
   }
 }
 
-
 /*blank End*/
diff --git a/src/border-color.scss b/src/border-color.scss
index d9e6c84..5a0e22f 100644
--- a/src/border-color.scss
+++ b/src/border-color.scss
@@ -1,8 +1,8 @@
 /*border-color Start*/
-@mixin generator-border-color($inMap,$inPrefix:'.bdc-'){
-  @each $name,$color in $inMap{
-    #{$inPrefix}#{$name}{
-      border-color:#{$color};
+@mixin generator-border-color($inMap, $inPrefix: ".bdc-") {
+  @each $name, $color in $inMap {
+    #{$inPrefix}#{$name} {
+      border-color: #{$color};
     }
   }
 }
diff --git a/src/border-radius.scss b/src/border-radius.scss
index 8427a71..151ccc0 100644
--- a/src/border-radius.scss
+++ b/src/border-radius.scss
@@ -1,9 +1,9 @@
 /*border-radius Start*/
 // NORMAL
-@mixin generator-border-radius($inList,$inPrefix:'.bdr-'){
+@mixin generator-border-radius($inList, $inPrefix: ".bdr-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
+    @each $i in $inList {
+      &#{$i} {
         border-radius: #{$i}px;
       }
     }
@@ -11,10 +11,10 @@
 }
 
 // Weapp
-@mixin generator-border-radius-rpx($inList,$inPrefix:'.bdr-'){
+@mixin generator-border-radius-rpx($inList, $inPrefix: ".bdr-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
+    @each $i in $inList {
+      &#{$i} {
         border-radius: to-rpx-value($i);
       }
     }
@@ -22,11 +22,11 @@
 }
 
 // Mobile
-@mixin generator-border-radius-rem($inList,$inPrefix:'.bdr-rem-', $rem: 50){
+@mixin generator-border-radius-rem($inList, $inPrefix: ".bdr-rem-", $rem: 50) {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
-        border-radius: to-rem-value($i,$rem);
+    @each $i in $inList {
+      &#{$i} {
+        border-radius: to-rem-value($i, $rem);
       }
     }
   }
diff --git a/src/box.scss b/src/box.scss
index 410bd75..5c359fc 100644
--- a/src/box.scss
+++ b/src/box.scss
@@ -1,43 +1,55 @@
 /*box Start*/
-$box-map:(
-  m:margin,
-  mt:margin-top,
-  mr:margin-right,
-  mb:margin-bottom,
-  ml:margin-left,
-  mx:(margin-left,margin-right),
-  my:(margin-top,margin-bottom),
-  p:padding,
-  pt:padding-top,
-  pr:padding-right,
-  pb:padding-bottom,
-  pl:padding-left,
-  px:(padding-left,padding-right),
-  py:(padding-top,padding-bottom)
+$box-map: (
+  m: margin,
+  mt: margin-top,
+  mr: margin-right,
+  mb: margin-bottom,
+  ml: margin-left,
+  mx: (
+    margin-left,
+    margin-right
+  ),
+  my: (
+    margin-top,
+    margin-bottom
+  ),
+  p: padding,
+  pt: padding-top,
+  pr: padding-right,
+  pb: padding-bottom,
+  pl: padding-left,
+  px: (
+    padding-left,
+    padding-right
+  ),
+  py: (
+    padding-top,
+    padding-bottom
+  )
 );
 
 // NORMAL
-@mixin generator-box($inList,$inDirection:'m'){
-  $mapValue:map_get($box-map,$inDirection);
-  $typeof:type-of($mapValue);
+@mixin generator-box($inList, $inDirection: "m") {
+  $mapValue: map_get($box-map, $inDirection);
+  $typeof: type-of($mapValue);
 
-  @if $typeof =='string'{
+  @if $typeof == "string" {
     .#{$inDirection} {
-      @each $i in $inList{
-        &#{$i}{
+      @each $i in $inList {
+        &#{$i} {
           &,
-          &_>*{
-            #{$mapValue}:#{$i}px;
+          &_ > * {
+            #{$mapValue}: #{$i}px;
           }
         }
       }
     }
-  }@else{
+  } @else {
     .#{$inDirection} {
-      @each $i in $inList{
-        &#{$i}{
+      @each $i in $inList {
+        &#{$i} {
           &,
-          &_>*{
+          &_ > * {
             //mapValue is a `list`
             @each $mapItem in $mapValue {
               #{$mapItem}: #{$i}px;
@@ -49,24 +61,23 @@ $box-map:(
   }
 }
 
-
 // Weapp
-@mixin generator-box-rpx($inList,$inDirection:'m'){
-  $mapValue:map_get($box-map,$inDirection);
-  $typeof:type-of($mapValue);
+@mixin generator-box-rpx($inList, $inDirection: "m") {
+  $mapValue: map_get($box-map, $inDirection);
+  $typeof: type-of($mapValue);
 
-  @if $typeof =='string'{
+  @if $typeof == "string" {
     .#{$inDirection} {
-      @each $i in $inList{
-        &#{$i}{
-          #{$mapValue}:to-rpx-value($i);
+      @each $i in $inList {
+        &#{$i} {
+          #{$mapValue}: to-rpx-value($i);
         }
       }
     }
-  }@else{
+  } @else {
     .#{$inDirection} {
-      @each $i in $inList{
-        &#{$i}{
+      @each $i in $inList {
+        &#{$i} {
           //mapValue is a `list`
           @each $mapItem in $mapValue {
             #{$mapItem}: to-rpx-value($i);
@@ -78,30 +89,30 @@ $box-map:(
 }
 
 // Mobile
-@mixin generator-box-rem($inList, $inDirection:'m', $rem: 50){
-  $mapValue:map_get($box-map,$inDirection);
-  $typeof:type-of($mapValue);
+@mixin generator-box-rem($inList, $inDirection: "m", $rem: 50) {
+  $mapValue: map_get($box-map, $inDirection);
+  $typeof: type-of($mapValue);
 
-  @if $typeof =='string'{
+  @if $typeof == "string" {
     .#{$inDirection} {
-      @each $i in $inList{
-        &#{$i}{
+      @each $i in $inList {
+        &#{$i} {
           &,
-          &_>*{
-            #{$mapValue}: to-rem-value($i,$rem);
+          &_ > * {
+            #{$mapValue}: to-rem-value($i, $rem);
           }
         }
       }
     }
-  }@else{
+  } @else {
     .#{$inDirection} {
-      @each $i in $inList{
-        &#{$i}{
+      @each $i in $inList {
+        &#{$i} {
           &,
-          &_>*{
+          &_ > * {
             //mapValue is a `list`
             @each $mapItem in $mapValue {
-              #{$mapItem}: to-rem-value($i,$rem);
+              #{$mapItem}: to-rem-value($i, $rem);
             }
           }
         }
diff --git a/src/color.scss b/src/color.scss
index 2801bb9..4be3bf1 100644
--- a/src/color.scss
+++ b/src/color.scss
@@ -1,8 +1,8 @@
 /*color Start*/
-@mixin generator-color($inMap,$inPrefix:'.c-'){
-  @each $name,$color in $inMap{
-    #{$inPrefix}#{$name}{
-      color:#{$color};
+@mixin generator-color($inMap, $inPrefix: ".c-") {
+  @each $name, $color in $inMap {
+    #{$inPrefix}#{$name} {
+      color: #{$color};
     }
   }
 }
diff --git a/src/font-size.scss b/src/font-size.scss
index 691e680..e99151c 100644
--- a/src/font-size.scss
+++ b/src/font-size.scss
@@ -1,29 +1,29 @@
 /*font-size Start*/
 
 // NORMAL
-@mixin generator-font-size($inList,$inPrefix:'.f-'){
+@mixin generator-font-size($inList, $inPrefix: ".f-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
-        font-size:#{$i}px;
+    @each $i in $inList {
+      &#{$i} {
+        font-size: #{$i}px;
       }
     }
   }
 }
 
 // Weapp
-@mixin generator-font-size-rpx($inList,$inPrefix:'.f-'){
+@mixin generator-font-size-rpx($inList, $inPrefix: ".f-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
-        font-size:to-rpx-value($i);
+    @each $i in $inList {
+      &#{$i} {
+        font-size: to-rpx-value($i);
       }
     }
   }
 }
 
 // Mobile
-@mixin generator-font-size-rem($inList,$inPrefix:'.f-rem-',$rem:50) {
+@mixin generator-font-size-rem($inList, $inPrefix: ".f-rem-", $rem: 50) {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
diff --git a/src/font-weight.scss b/src/font-weight.scss
new file mode 100644
index 0000000..f21df0a
--- /dev/null
+++ b/src/font-weight.scss
@@ -0,0 +1,8 @@
+// fontWeight
+@mixin generator-font-weight($inList, $inPrefix: ".fw-") {
+  @each $value in $inList {
+    #{$inPrefix}#{$value} {
+      font-weight: $value;
+    }
+  }
+}
diff --git a/src/grid.scss b/src/grid.scss
index 3095f25..9cd093c 100644
--- a/src/grid.scss
+++ b/src/grid.scss
@@ -1,32 +1,31 @@
 /*grid Start*/
-.dib-col{
+.dib-col {
   width: 100%;
   display: inline-block;
   font-size: 16px;
 }
-@mixin dib-row () {
+@mixin dib-row() {
   font-size: 0;
 }
 // This is column mixins.
-@mixin dib-col ($col, $sum, $gap: 1em, $align: top, $first: false, $last: false) {
+@mixin dib-col($col, $sum, $gap: 1em, $align: top, $first: false, $last: false) {
   padding-left: if($first, 0, $gap);
   padding-right: if($last, 0, $gap);
   width: percentage($col/$sum);
   vertical-align: $align;
 }
 
-
-@mixin generator-grid ($sum:12,$row:'.row',$col:'.col-') {
-  #{$row}{
+@mixin generator-grid($sum: 12, $row: ".row", $col: ".col-") {
+  #{$row} {
     @include dib-row;
   }
   @for $i from 1 through $sum {
-    $left:$sum - $i;
-    #{$col}#{$i}{
+    $left: $sum - $i;
+    #{$col}#{$i} {
       @extend .dib-col;
-      @include dib-col($i,$sum);
+      @include dib-col($i, $sum);
     }
-    .offset-#{$left}{
+    .offset-#{$left} {
       margin-left: percentage($left/$sum);
     }
   }
diff --git a/src/line-clamp.scss b/src/line-clamp.scss
index 1651b4a..cea0a26 100644
--- a/src/line-clamp.scss
+++ b/src/line-clamp.scss
@@ -12,11 +12,10 @@
   -webkit-line-clamp: $inLine;
 }
 
-
-@mixin generator-line-clamp($inList,$inPrefix:'.lc-'){
+@mixin generator-line-clamp($inList, $inPrefix: ".lc-") {
   #{$inPrefix} {
-    @each $i in $inList{
-      &#{$i}{
+    @each $i in $inList {
+      &#{$i} {
         -webkit-line-clamp: $i;
         @extend %line-clamp;
       }
diff --git a/src/line-height.scss b/src/line-height.scss
index 89754ee..15dd888 100644
--- a/src/line-height.scss
+++ b/src/line-height.scss
@@ -1,6 +1,6 @@
 /*line-height Start*/
 // NORMAL
-@mixin generator-line-height($inList,$inPrefix:'.lh-') {
+@mixin generator-line-height($inList, $inPrefix: ".lh-") {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -10,7 +10,7 @@
   }
 }
 
-@mixin generator-hlh($inList,$inPrefix:'.hlh-') {
+@mixin generator-hlh($inList, $inPrefix: ".hlh-") {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -22,7 +22,7 @@
 }
 
 // Weapp
-@mixin generator-line-height-rpx($inList,$inPrefix:'.lh-') {
+@mixin generator-line-height-rpx($inList, $inPrefix: ".lh-") {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -32,7 +32,7 @@
   }
 }
 
-@mixin generator-hlh-rpx($inList,$inPrefix:'.hlh-') {
+@mixin generator-hlh-rpx($inList, $inPrefix: ".hlh-") {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -44,22 +44,22 @@
 }
 
 // Mobile
-@mixin generator-line-height-rem($inList,$inPrefix:'.lh-rem-',$rem:50) {
+@mixin generator-line-height-rem($inList, $inPrefix: ".lh-rem-", $rem: 50) {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
-        line-height: to-rem-value($i,$rem);
+        line-height: to-rem-value($i, $rem);
       }
     }
   }
 }
 
-@mixin generator-hlh-rem($inList,$inPrefix:'.hlh-rem-',$rem:50) {
+@mixin generator-hlh-rem($inList, $inPrefix: ".hlh-rem-", $rem: 50) {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
-        height: to-rem-value($i,$rem);
-        line-height: to-rem-value($i,$rem);
+        height: to-rem-value($i, $rem);
+        line-height: to-rem-value($i, $rem);
       }
     }
   }
diff --git a/src/line.scss b/src/line.scss
index 28340c6..33195c8 100644
--- a/src/line.scss
+++ b/src/line.scss
@@ -1,6 +1,6 @@
 /*line Start*/
 // NORMAL
-@mixin generator-line($inList,$inColor:#ccc,$inPrefix:'.line-') {
+@mixin generator-line($inList, $inColor: #ccc, $inPrefix: ".line-") {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -13,7 +13,7 @@
 }
 
 // Weapp
-@mixin generator-line-rpx($inList,$inColor:#ccc,$inPrefix:'.line-') {
+@mixin generator-line-rpx($inList, $inColor: #ccc, $inPrefix: ".line-") {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
@@ -26,11 +26,11 @@
 }
 
 // Mobile
-@mixin generator-line-rem($inList,$inColor:#ccc,$inPrefix:'.line-rem-',$rem:50) {
+@mixin generator-line-rem($inList, $inColor: #ccc, $inPrefix: ".line-rem-", $rem: 50) {
   #{$inPrefix} {
     @each $i in $inList {
       &#{$i} {
-        height: to-rem-value($i,$rem);
+        height: to-rem-value($i, $rem);
         background-color: $inColor;
         @extend .blank;
       }
diff --git a/src/width.scss b/src/width.scss
index db8e987..dddee17 100644
--- a/src/width.scss
+++ b/src/width.scss
@@ -1,14 +1,14 @@
 /*width Start*/
-@mixin generator-width-w1($inList,$inPrefix:'.w1-') {
-  @each $value in $inList{
+@mixin generator-width-w1($inList, $inPrefix: ".w1-") {
+  @each $value in $inList {
     #{$inPrefix}#{$value} {
-      width: percentage(1/$value);
+      width: percentage(1 / $value);
     }
   }
 }
 
-@mixin generator-width-wp($inList,$inPrefix:'.wp-') {
-  @each $value in $inList{
+@mixin generator-width-wp($inList, $inPrefix: ".wp-") {
+  @each $value in $inList {
     #{$inPrefix}#{$value} {
       width: percentage($value/10);
     }