fix: less variable conflict (#1757)

* fix: less variable conflict Tencent/tdesign-react#2822

* fix: stylelint CssSyntaxError stylelint/stylelint#7584

Author: NWYLZW

style/web/components/descriptions/_index.less

@@ -6,11 +6,11 @@
 
 @import "../../mixins/_reset.less";
 
-@componentName: descriptions;
-
-.@{prefix}-@{componentName} {
+.@{prefix}-descriptions {
   .reset;
 
+  @root: ~".@{prefix}-descriptions";
+
   &__header {
     color: @text-color-primary;
     font: @font-title-medium;
@@ -27,7 +27,7 @@
     .generate-padding(m, @descriptions-padding-m);
     .generate-padding(s, @descriptions-padding-s);
 
-    & .@{prefix}-@{componentName}__label {
+    & @{root}__label {
       color: @text-color-placeholder;
     }
 
@@ -40,7 +40,7 @@
         }
       }
 
-      .@{prefix}-@{componentName}__label {
+      @{root}__label {
         background-color: @bg-color-secondarycontainer;
 
         &:hover {

style/web/components/drawer/_index.less

@@ -9,11 +9,11 @@
 
 @import "../../mixins/_reset.less";
 
-@componentName: drawer;
-
-.@{prefix}-@{componentName} {
+.@{prefix}-drawer {
   .reset;
 
+  @root: ~".@{prefix}-drawer";
+
   position: fixed;
   z-index: 1500;
   width: 100%;
@@ -85,7 +85,7 @@
     position: relative;
   }
 
-  .@{prefix}-@{componentName}__content-wrapper {
+  @{root}__content-wrapper {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -185,27 +185,27 @@
       vertical-align: unset;
     }
   }
-}
-
-.@{prefix}-@{componentName}--open {
-  width: 100%;
-  height: 100%;
-  pointer-events: auto;
-
-  > .@{prefix}-@{componentName}__content-wrapper {
-    visibility: visible;
-  }
 
-  > .@{prefix}-@{componentName}__mask {
-    opacity: 1;
+  &--open {
     width: 100%;
     height: 100%;
+    pointer-events: auto;
+
+    > @{root}__content-wrapper {
+      visibility: visible;
+    }
+
+    > @{root}__mask {
+      opacity: 1;
+      width: 100%;
+      height: 100%;
+    }
   }
-}
 
-// 需要在 t-drawer--open 后面，优先级才比 open 高
-.@{prefix}-@{componentName}--without-mask {
-  pointer-events: none;
+  // 需要在 t-drawer--open 后面，优先级才比 open 高
+  &--without-mask {
+    pointer-events: none;
+  }
 }
 
 [tabindex="-1"]:focus {

style/web/components/guide/_index.less

@@ -6,11 +6,11 @@
 
 @import "../../mixins/_reset.less";
 
-@componentName: guide;
-
-.@{prefix}-@{componentName} {
+.@{prefix}-guide {
   .reset;
 
+  @root: ~".@{prefix}-guide";
+
   &--lock {
     overflow: hidden;
   }
@@ -86,12 +86,12 @@
       border: 1px solid @component-border;
     }
 
-    .@{prefix}-@{componentName}__title {
+    @{root}__title {
       font: @font-title-medium;
       font-weight: 700;
     }
 
-    .@{prefix}-@{componentName}__desc {
+    @{root}__desc {
       margin-top: @guide-dialog-desc-margin-top;
       font: @font-body-medium;
     }
@@ -142,7 +142,7 @@
     &--dialog {
       margin-top: @spacer-3;
 
-      .@{prefix}-@{componentName} {
+      @{root} {
         &__action {
           display: flex;
           justify-content: center;

style/web/components/typography/_index.less

@@ -2,9 +2,7 @@
 
 @import "./_var.less";
 
-@componentName: typography;
-
-.@{prefix}-@{componentName} {
+.@{prefix}-typography {
   color: @typography-text-primary-color;
   font: @font-body-medium;
   margin: @comp-margin-m 0;