feat: 更改 mixins 引入路径&StyleLint

jd-opensource · Jul 23, 2018 · 485daad · 485daad
1 parent fd44b9d
commit 485daad
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 27 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -5,6 +5,7 @@
     "at-rule-no-unknown": null,
     "color-hex-case": null,
     "number-no-trailing-zeros": null,
+    "no-empty-source": null,
     "scss/at-rule-no-unknown": true
   }
 }
diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
     "build:weapp": "taro build --type weapp",
     "build:h5": "taro build --type h5",
     "lint": "eslint ./src --fix",
-    "stylelint": "stylelint \"src/**/*.scss\" --syntax scss",
-    "stylelint-fix": "stylelint \"src/**/*.scss\" --syntax scss --fix"
+    "lint:style": "stylelint \"src/**/*.scss\" --syntax scss",
+    "lint:style-fix": "stylelint \"src/**/*.scss\" --syntax scss --fix"
   },
   "husky": {
     "hooks": {

diff --git a/src/components/action-sheet/index.scss b/src/components/action-sheet/index.scss
@@ -1,27 +1,31 @@
-@import "../../style/mixins";
+@import "../../style/mixins/index";
 
 .at-action-sheet {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
+
   &__overlay {
     @include overlay;
   }
+
   &__container {
     bottom: 0;
     width: 100%;
     max-height: 50%;
     text-align: center;
     position: absolute;
     background-color: white;
+
     &-header {
       font-size: 28px;
       padding: 25px 0;
-      color: #888888;
-      border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
+      color: #888;
+      border-bottom: 1px solid rgba($color: #000, $alpha: 0.1);
     }
+
     &-footer {
       font-size: 36px;
       padding: 25px 0;
@@ -32,11 +36,13 @@
 
 .body__list {
   text-align: center;
+
   &-item {
     font-size: 36px;
     padding: 25px 0;
+
     &:not(:last-child) {
-      border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
+      border-bottom: 1px solid rgba($color: #000, $alpha: 0.1);
     }
   }
 }
diff --git a/src/components/activity-indicator/index.scss b/src/components/activity-indicator/index.scss
@@ -1,10 +1,11 @@
-/*postcss-pxtransform disable*/
-@import "../../style/mixins";
+/* postcss-pxtransform disable */
+@import "../../style/mixins/index";
 
 @keyframes lds-spinner {
   0% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }
@@ -14,26 +15,31 @@
   0% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }
 }
 
 .at-activity-indicator {
   display: inline-block;
+
   &--center {
     @include absolute-center;
   }
+
   &-container {
     display: flex;
 
     &__body {
       flex: 0 0 auto;
+
       &-views {
         width: 40px;
         height: 40px;
         font-size: 0;
         transform: translate(-20px, -20px) scale(0.2) translate(20px, 20px);
+
         &-item {
           left: 94px;
           top: 48px;
@@ -44,6 +50,7 @@
           height: 24px;
           border-radius: 40%;
           transform-origin: 6px 52px;
+
           @for $i from 0 to 12 {
             &:nth-child(#{$i}) {
               transform: rotate(#{$i * 30}deg);
@@ -53,11 +60,12 @@
         }
       }
     }
+
     &__content {
       flex: 0 0 auto;
       font-size: 14px;
       align-self: center;
-      color: #999999;
+      color: #999;
     }
   }
 }
diff --git a/src/components/modal/index.scss b/src/components/modal/index.scss
@@ -1,31 +1,37 @@
-/*postcss-pxtransform disable*/
-@import "../../style/mixins";
+/* postcss-pxtransform disable */
+@import "../../style/mixins/index";
 
 .at-modal {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
+
   &__overlay {
     @include overlay;
   }
+
   &__container {
     @include absolute-center();
+
     width: 270px;
     background-color: white;
   }
 
   .at-footer {
     border-top: 1px solid #e5e5e5;
+
     &__actions {
       display: flex;
+
       .at-button {
         outline: 0;
         flex: auto;
         border: none;
         font-size: 14px;
         background-color: white;
+
         &:not(:first-child) {
           border-left: 1px solid #e5e5e5;
         }

diff --git a/src/components/toast/index.scss b/src/components/toast/index.scss
@@ -1,14 +1,17 @@
-@import "../../style/mixins";
+@import "../../style/mixins/index";
 
 .at-toast {
   @include absolute-center(fixed);
+
   padding: 25px 30px;
-  background-color: rgba($color: #000000, $alpha: .8);
+  background-color: rgba($color: #000, $alpha: 0.8);
   border-radius: 8px;
+
   &-content {
     &__icon {
       margin-bottom: 15px;
     }
+
     &__info {
       text-align: center;
       color: white;

diff --git a/src/pages/action/activity-indicator/index.scss b/src/pages/action/activity-indicator/index.scss
@@ -1,11 +1,10 @@
 .activity-indicator__page {
-    .example__body {
-        &--list {}
-        &--center {
-            height: 375px;
-            position: relative;
-            background-color: #f8f8f8;
-            margin-bottom: 20px;
-        }
+  .example__body {
+    &--center {
+      height: 375px;
+      position: relative;
+      background-color: #f8f8f8;
+      margin-bottom: 20px;
     }
+  }
 }
diff --git a/src/style/mixins/index.scss b/src/style/mixins/index.scss
@@ -3,9 +3,9 @@
  */
 
 /* library */
-@import './lib/absolute-center';
-@import './lib/clearfix';
-@import './lib/ellipsis';
-@import './lib/overlay';
-@import './lib/shade';
-@import './lib/tint';
+@import './libs/absolute-center';
+@import './libs/clearfix';
+@import './libs/ellipsis';
+@import './libs/overlay';
+@import './libs/shade';
+@import './libs/tint';