typography 拓展 width height

增加 resize 样式重置

Author: IdenPin

dist/acss-helper.css

@@ -5,8 +5,9 @@
   "main": "index.js",
   "homepage": "https://idenpin.github.io/acss-helper/",
   "scripts": {
-    "start": "run-p build:dev watch",
+    "start": "run-p build:dev watch docs",
     "build:dev": "run-s sass copy",
+    "docs": "browser-sync start --server --files ** /*.css, **/*.html",
     "build": "run-s clean sass sassmin postcss copy",
     "sass": "node-sass --output-style expanded src/helper.scss dist/acss-helper.css",
     "sassmin": "node-sass --output-style compressed src/helper.scss dist/acss-helper.min.css",
@@ -37,6 +38,7 @@
     "onchange": "^6.1.0",
     "postcss-cli": "^6.1.3",
     "postcss-header": "^1.0.0",
-    "rimraf": "^3.0.0"
+    "rimraf": "^3.0.0",
+    "vue": "^2.6.10"
   }
-}
+}

docs/css/acss-helper.css

@@ -3,7 +3,7 @@
     background-color: $colorListKey;
   }
   @each $colorKey, $colorVal in $colorListVal {
-    .border-#{$colorListKey}-#{$colorKey}{
+    .bg-#{$colorListKey}-#{$colorKey}{
       background-color: $colorVal;
     }
   }

docs/index.html

@@ -4,6 +4,9 @@
 .border-none {
   border: none;
 }
+.border {
+ border: 1px solid ;
+}
 
 // border-width
 @each $widthKey, $widthVal in $border-width {
@@ -13,24 +16,31 @@
     } 
   }
 }
+@each $dirKey, $dirVal in $direction {
+  .border-#{$dirKey}{
+    border-#{$dirVal}-width: 1px;
+  } 
+}
 
 
 // border-style
 @each $styleKey, $styleVal in $border-style {
-  .border-#{$styleKey}{
-    border-style: $styleVal;
+  @each $dirKey, $dirVal in $direction {
+    .border-#{$dirKey}-#{$styleKey}{
+      border-#{$dirVal}-style: $styleVal
+    } 
   }
 }
 
 
 // border-color
 @each $colorListKey, $colorListVal in $border-color {
   .border-#{$colorListKey}{
-    border-style: $colorListKey;
+    border-color: $colorListKey;
   }
   @each $colorKey, $colorVal in $colorListVal {
     .border-#{$colorListKey}-#{$colorKey}{
-      border-style: $colorVal;
+      border-color: $colorVal;
     }
   }
 }

package-lock.json

@@ -27,7 +27,7 @@
 // breakpoint 768
 @media (min-width: 576px) {
   // looping 12-grids default
-  @include loop-grid-columns(12);
+  @include loop-grid-columns($grid-columns);
   // looping 10-grids
   @include loop-grid-columns(10);
   // equal grid

package.json

@@ -41,7 +41,7 @@
 
 @mixin loop-grid-columns($columns) {
   @for $i from 1 through $columns {
-    @if ($columns==12) {
+    @if ($columns == 12) {
       .col-#{$i} {
         flex: 0 0 percentage($i / $columns);
         max-width: percentage($i / $columns);