fix: sass build warning (#1487)

Co-authored-by: unclechong <[email protected]>

Author: unclechong

packages/taro-ui/src/components/flex/item/index.scss

@@ -10,7 +10,7 @@
   box-sizing: border-box;
 
   @for $col from 1 through 12 {
-    $width: ($col / 12) * 100%;
+    $width: calc($col / 12) * 100%;
 
     &-#{$col} {
       @include flex(0, 0, $width);

packages/taro-ui/src/style/components/avatar.scss

@@ -5,7 +5,7 @@
   width: $at-avatar-size-md;
   height: $at-avatar-size-md;
   color: $at-avatar-color;
-  font-size: $at-avatar-size-md / 2.5;
+  font-size: calc($at-avatar-size-md / 2.5);
   line-height: $at-avatar-size-md;
   text-align: center;
   border-radius: $border-radius-md;
@@ -23,14 +23,14 @@
   &--large {
     width: $at-avatar-size-lg;
     height: $at-avatar-size-lg;
-    font-size: $at-avatar-size-lg / 2.5;
+    font-size: calc($at-avatar-size-lg / 2.5);
     line-height: $at-avatar-size-lg;
   }
 
   &--small {
     width: $at-avatar-size-sm;
     height: $at-avatar-size-sm;
-    font-size: $at-avatar-size-sm / 2.5;
+    font-size: calc($at-avatar-size-sm / 2.5);
     line-height: $at-avatar-size-sm;
   }
 

packages/taro-ui/src/style/components/button.scss

@@ -84,7 +84,7 @@
   }
 
   &--circle {
-    border-radius: $at-button-height / 2;
+    border-radius: calc($at-button-height / 2);
     background-clip: border-box;
     overflow: hidden;
   }
@@ -99,7 +99,7 @@
     line-height: $at-button-height-sm - 2;
 
     &.at-button--circle {
-      border-radius: $at-button-height-sm / 2;
+      border-radius: calc($at-button-height-sm / 2);
     }
   }
 

packages/taro-ui/src/style/components/curtain.scss

@@ -36,7 +36,7 @@ $at-curtain-btn-size: 56px;
     position: absolute;
     width: $at-curtain-btn-size;
     height: $at-curtain-btn-size;
-    margin-left: -$at-curtain-btn-size / 2;
+    margin-left: calc(-$at-curtain-btn-size / 2);
     left: 50%;
     bottom: -($at-curtain-btn-size + 24px);
     align-items: center;
@@ -68,8 +68,8 @@ $at-curtain-btn-size: 56px;
     }
 
     &--top {
-      margin-left: -$at-curtain-btn-size / 2;
-      top: -($at-curtain-btn-size + 24px);
+      margin-left: calc(-$at-curtain-btn-size / 2);
+      top: calc(-($at-curtain-btn-size + 24px));
       left: 50%;
       bottom: auto;
     }

packages/taro-ui/src/style/components/flex.scss

@@ -116,7 +116,7 @@
   box-sizing: border-box;
 
   @for $col from 1 through 12 {
-    $width: ($col / 12) * 100%;
+    $width: calc(($col / 12) * 100%);
 
     &-#{$col} {
       @include flex(0, 0, $width);

packages/taro-ui/src/style/components/progress.scss

@@ -26,13 +26,13 @@
     &-inner {
       width: 100%;
       background-color: $at-progress-inner-bg-color;
-      border-radius: $at-progress-height / 2;
+      border-radius: calc($at-progress-height / 2);
       vertical-align: middle;
 
       &-background {
         position: relative;
         height: $at-progress-height;
-        border-radius: $at-progress-height / 2;
+        border-radius: calc($at-progress-height / 2);
         background-color: $at-progress-bar-bg-color;
         transition: all 0.3s $ease-in-out-quad;
         overflow: hidden;
@@ -62,7 +62,7 @@
       right: 0;
       bottom: 0;
       background: $at-progress-bar-bg-color-active;
-      border-radius: $at-progress-height / 2;
+      border-radius: calc($at-progress-height / 2);
       animation: progress-active 2s $ease-out-quad infinite;
     }
   }

packages/taro-ui/src/style/components/range.scss

@@ -3,7 +3,7 @@
 
 .at-range {
   position: relative;
-  padding: 0 $at-range-slider-size / 2 + 4PX;
+  padding: 0 calc($at-range-slider-size / 2 + 4PX);
   width: 100%;
   box-sizing: border-box;
 
@@ -33,7 +33,7 @@
 
   &__slider {
     position: absolute;
-    margin-left: -$at-range-slider-size / 2;
+    margin-left: calc(-$at-range-slider-size / 2);
     width: $at-range-slider-size;
     height: $at-range-slider-size;
     border-radius: 50%;

packages/taro-ui/src/style/components/search-bar.scss

@@ -26,7 +26,7 @@ $at-search-bar-placholder-color: $color-grey-2;
     width: 100%;
     height: $at-search-bar-input-height;
     background-color: $at-search-bar-input-bg-color;
-    border-radius: $at-search-bar-input-height / 2;
+    border-radius: calc($at-search-bar-input-height / 2);
     overflow: hidden;
     display: flex;
   }

packages/taro-ui/src/style/components/tag.scss

@@ -41,7 +41,7 @@ $at-tag-border-size: 1PX;
   }
 
   &--circle {
-    border-radius: $at-tag-height / 2;
+    border-radius: calc($at-tag-height / 2);
     background-clip: border-box;
     overflow: hidden;
   }
@@ -50,10 +50,10 @@ $at-tag-border-size: 1PX;
     padding: 0 $spacing-h-md;
     height: $at-tag-height-sm;
     font-size: $at-tag-font-size-sm;
-    line-height: $at-tag-height-sm - 2px;
+    line-height: calc($at-tag-height-sm - 2px);
 
     &.at-tag--circle {
-      border-radius: $at-tag-height-sm / 2;
+      border-radius: calc($at-tag-height-sm / 2);
     }
   }
 }

packages/taro-ui/src/style/components/timeline.scss

@@ -65,9 +65,9 @@
 
   &__tail {
     position: absolute;
-    top: $at-timeline-dot-size / 2;
-    bottom: -$at-timeline-dot-size / 2;
-    left: $at-timeline-dot-size / 2 - 2px;
+    top: calc($at-timeline-dot-size / 2);
+    bottom: calc(-$at-timeline-dot-size / 2);
+    left: calc($at-timeline-dot-size / 2 - 2px);
     border-left: 1PX solid $at-timeline-line-color;
   }