fix: sass declaration deprecation error (#17549)

* fix: sass declaration deprecation error

* Add `&{}` for wrapping nested css blocks.

* fix: lint

* fix: update changes

* fix(style): switch/table-v2/upload compiling warning

* fix(style): update the rest warned sass files to avoid warning

packages/theme-chalk/src/button-group.scss

@@ -5,9 +5,9 @@
 @use 'mixins/utils' as *;
 
 @include b(button-group) {
-  @include utils-clearfix;
   display: inline-block;
   vertical-align: middle;
+  @include utils-clearfix;
 
   & > .#{$namespace}-button {
     float: left;

packages/theme-chalk/src/button.scss

@@ -72,12 +72,14 @@ $button-icon-span-gap: map.merge(
     margin-left: 12px;
   }
 
-  @include button-size(
-    map.get($button-padding-vertical, 'default') - $button-border-width,
-    map.get($button-padding-horizontal, 'default') - $button-border-width,
-    map.get($button-font-size, 'default'),
-    map.get($button-border-radius, 'default')
-  );
+  & {
+    @include button-size(
+      map.get($button-padding-vertical, 'default') - $button-border-width,
+      map.get($button-padding-horizontal, 'default') - $button-border-width,
+      map.get($button-font-size, 'default'),
+      map.get($button-border-radius, 'default')
+    );
+  }
 
   &::-moz-focus-inner {
     border: 0;
@@ -284,12 +286,14 @@ $button-icon-span-gap: map.merge(
         }
       }
 
-      @include button-size(
-        map.get($button-padding-vertical, $size) - $button-border-width,
-        map.get($button-padding-horizontal, $size) - $button-border-width,
-        map.get($button-font-size, $size),
-        map.get($button-border-radius, $size)
-      );
+      & {
+        @include button-size(
+          map.get($button-padding-vertical, $size) - $button-border-width,
+          map.get($button-padding-horizontal, $size) - $button-border-width,
+          map.get($button-font-size, $size),
+          map.get($button-border-radius, $size)
+        );
+      }
 
       @include when(circle) {
         width: getCssVar('button', 'size');

packages/theme-chalk/src/col.scss

@@ -15,11 +15,11 @@
 @for $i from 0 through 24 {
   .#{$namespace}-col-#{$i} {
     display: if($i == 0, none, block);
+    max-width: (math.div(1, 24) * $i * 100) * 1%;
+    flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
     @include when(guttered) {
       display: if($i == 0, none, block);
     }
-    max-width: (math.div(1, 24) * $i * 100) * 1%;
-    flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
   }
 
   .#{$namespace}-col-offset-#{$i} {

packages/theme-chalk/src/input-number.scss

@@ -19,13 +19,13 @@
     &__inner {
       -webkit-appearance: none;
       -moz-appearance: textfield;
+      text-align: center;
+      line-height: 1;
       &::-webkit-inner-spin-button,
       &::-webkit-outer-spin-button {
         margin: 0;
         -webkit-appearance: none;
       }
-      text-align: center;
-      line-height: 1;
     }
   }
 

packages/theme-chalk/src/menu.scss

@@ -60,7 +60,9 @@
   box-sizing: border-box;
 
   @include m(vertical) {
-    &:not(.#{$namespace}-menu--collapse):not(.#{$namespace}-menu--popup-container) {
+    &:not(.#{$namespace}-menu--collapse):not(
+        .#{$namespace}-menu--popup-container
+      ) {
       & .#{$namespace}-menu-item,
       & .#{$namespace}-sub-menu__title,
       & .#{$namespace}-menu-item-group__title {
@@ -80,16 +82,15 @@
   }
 
   @include m(horizontal) {
-    // reset menu-item popup height
-    &.#{$namespace}-menu--popup-container {
-      height: unset;
-    }
-
     display: flex;
     flex-wrap: nowrap;
     border-right: none;
 
     height: getCssVar('menu-horizontal-height');
+    // reset menu-item popup height
+    &.#{$namespace}-menu--popup-container {
+      height: unset;
+    }
 
     &.#{$namespace}-menu {
       border-bottom: solid 1px getCssVar('menu-border-color');

packages/theme-chalk/src/mixins/_col.scss

@@ -8,11 +8,11 @@
     @for $i from 0 through 24 {
       .#{$namespace}-col-#{$size}-#{$i} {
         display: if($i == 0, none, block);
+        max-width: (math.div(1, 24) * $i * 100) * 1%;
+        flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
         @include when(guttered) {
           display: if($i == 0, none, block);
         }
-        max-width: (math.div(1, 24) * $i * 100) * 1%;
-        flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
       }
 
       .#{$namespace}-col-#{$size}-offset-#{$i} {

packages/theme-chalk/src/overlay.scss

@@ -2,9 +2,6 @@
 @use 'common/var' as *;
 
 @include b(overlay) {
-  #{& + '-root'} {
-    height: 0;
-  }
   position: fixed;
   top: 0;
   right: 0;
@@ -14,4 +11,7 @@
   height: 100%;
   background-color: getCssVar('overlay-color', 'lighter');
   overflow: auto;
+  #{& + '-root'} {
+    height: 0;
+  }
 }

packages/theme-chalk/src/switch.scss

@@ -171,6 +171,10 @@ $switch-content-padding: map.merge(
       justify-content: center;
       align-items: center;
       overflow: hidden;
+      padding: 0 #{map.get($switch-content-padding, 'default')} 0 calc(#{map.get(
+              $switch-button-size,
+              'default'
+            )} + 2px);
 
       .is-icon,
       .is-text {
@@ -179,10 +183,6 @@ $switch-content-padding: map.merge(
         user-select: none;
         @include utils-ellipsis;
       }
-      padding: 0 #{map.get($switch-content-padding, 'default')} 0 calc(#{map.get(
-              $switch-button-size,
-              'default'
-            )} + 2px);
     }
 
     .#{$namespace}-switch__action {

packages/theme-chalk/src/table-v2.scss

@@ -20,6 +20,7 @@
     justify-content: center;
     text-align: center;
   }
+
   @include when('align-right') {
     justify-content: flex-end;
     text-align: right;
@@ -39,6 +40,7 @@
   .#{$namespace}-virtual-scrollbar {
     opacity: 0;
   }
+
   .#{$namespace}-vl__vertical,
   .#{$namespace}-vl__horizontal {
     z-index: -1;
@@ -51,6 +53,7 @@
 
 @include b('table-v2') {
   font-size: 14px;
+
   * {
     box-sizing: border-box;
   }
@@ -136,15 +139,15 @@
     border-bottom: getCssVar('table', 'border');
 
     @include e('header-cell') {
-      @include center-flex;
-      @include cell-padding;
-      @include cell-alignment;
       height: 100%;
       user-select: none;
       overflow: hidden;
       background-color: getCssVar('table-header', 'bg-color');
       color: getCssVar('table-header', 'text-color');
       font-weight: bold;
+      @include center-flex;
+      @include cell-padding;
+      @include cell-alignment;
 
       @include when(sortable) {
         cursor: pointer;
@@ -220,6 +223,7 @@
     @include e('row') {
       overflow: hidden;
       align-items: stretch;
+
       @include e('row-cell') {
         overflow-wrap: break-word;
       }

packages/theme-chalk/src/tag.scss

@@ -64,32 +64,6 @@ $tag-icon-span-gap: map.merge(
 }
 
 @include b(tag) {
-  @include genTheme('light-9', 'light-8', '');
-
-  @each $type in $types {
-    &.#{bem('tag', '', $type)} {
-      @include css-var-from-global(('tag', 'text-color'), ('color', $type));
-    }
-  }
-
-  @include when(hit) {
-    border-color: getCssVar('color', 'primary');
-  }
-
-  @include when(round) {
-    border-radius: getCssVar('tag', 'border-radius-rounded');
-  }
-
-  .#{$namespace}-tag__close {
-    flex-shrink: 0;
-    color: getCssVar('tag', 'text-color');
-
-    &:hover {
-      color: getCssVar('color-white');
-      background-color: getCssVar('tag-hover-color');
-    }
-  }
-
   background-color: getCssVar('tag-bg-color');
   border-color: getCssVar('tag-border-color');
   color: getCssVar('tag-text-color');
@@ -110,6 +84,31 @@ $tag-icon-span-gap: map.merge(
   white-space: nowrap;
 
   @include set-css-var-value('icon-size', 14px);
+  @include genTheme('light-9', 'light-8', '');
+
+  @include when(hit) {
+    border-color: getCssVar('color', 'primary');
+  }
+
+  @include when(round) {
+    border-radius: getCssVar('tag', 'border-radius-rounded');
+  }
+
+  .#{$namespace}-tag__close {
+    flex-shrink: 0;
+    color: getCssVar('tag', 'text-color');
+
+    &:hover {
+      color: getCssVar('color-white');
+      background-color: getCssVar('tag-hover-color');
+    }
+  }
+
+  @each $type in $types {
+    &.#{bem('tag', '', $type)} {
+      @include css-var-from-global(('tag', 'text-color'), ('color', $type));
+    }
+  }
 
   $svg-margin-size: 1px;
 
@@ -127,8 +126,8 @@ $tag-icon-span-gap: map.merge(
   }
 
   @include m(dark) {
-    @include genTheme('', '', 'light-3');
     @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
+    @include genTheme('', '', 'light-3');
 
     @each $type in $types {
       &.#{bem('tag', '', $type)} {
@@ -138,8 +137,8 @@ $tag-icon-span-gap: map.merge(
   }
 
   @include m(plain) {
-    @include genTheme(false, 'light-5', '');
     @include css-var-from-global(('tag', 'bg-color'), ('fill-color', 'blank'));
+    @include genTheme(false, 'light-5', '');
   }
 
   &.is-closable {

packages/theme-chalk/src/upload.scss

@@ -28,6 +28,7 @@
 
   cursor: pointer;
   outline: none;
+
   @include e(input) {
     display: none;
   }
@@ -144,6 +145,7 @@
   padding: 0;
   list-style: none;
   position: relative;
+
   @include e(item) {
     transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
     font-size: 14px;
@@ -246,6 +248,7 @@
       &:active {
         /* click时 */
         outline-width: 0;
+
         .#{bem('icon', '', 'close-tip')} {
           display: none;
         }
@@ -340,6 +343,7 @@
       .#{bem('icon', '', 'close')} {
         display: none;
       }
+
       &:hover {
         .#{bem('upload-list', 'item-status-label')} {
           opacity: 0;
@@ -404,6 +408,7 @@
 
       &:hover {
         opacity: 1;
+
         span {
           display: inline-flex;
         }