diff --git a/packages/varlet-ui/src/pagination/pagination.less b/packages/varlet-ui/src/pagination/pagination.less
index 2e5c220771d..bf7a5a07fbe 100644
--- a/packages/varlet-ui/src/pagination/pagination.less
+++ b/packages/varlet-ui/src/pagination/pagination.less
@@ -20,7 +20,7 @@
 }
 
 // Mixins
-.pagination-flex-nowrap {
+.var-pagination-flex-nowrap {
   display: flex;
   white-space: nowrap;
   align-items: center;
@@ -97,14 +97,14 @@
   }
 
   &__total {
-    .pagination-flex-nowrap();
+    .var-pagination-flex-nowrap();
 
     line-height: var(--pagination-total-line-height);
     margin: var(--pagination-total-margin);
   }
 
   &__size {
-    .pagination-flex-nowrap();
+    .var-pagination-flex-nowrap();
 
     line-height: var(--pagination-size-line-height);
     margin: var(--pagination-item-margin);
@@ -124,7 +124,7 @@
 
   &__quickly,
   &__simple {
-    .pagination-flex-nowrap();
+    .var-pagination-flex-nowrap();
 
     [var-pagination-cover] {
       width: var(--pagination-input-width);
diff --git a/packages/varlet-ui/src/step/step.less b/packages/varlet-ui/src/step/step.less
index d1687587885..55a1a9122f5 100644
--- a/packages/varlet-ui/src/step/step.less
+++ b/packages/varlet-ui/src/step/step.less
@@ -16,7 +16,7 @@
 }
 
 // Mixins
-.tag {
+.var-step-tag {
   width: var(--step-tag-size);
   height: var(--step-tag-size);
   background: var(--step-tag-background);
@@ -32,7 +32,7 @@
 }
 
 // Mixins
-.content {
+.var-step-content {
   font-size: var(--step-content-font-size);
   color: var(--step-content-color);
   cursor: pointer;
@@ -62,7 +62,7 @@
 
     &-tag {
       margin: var(--step-tag-margin);
-      .tag();
+      .var-step-tag();
 
       &--active {
         background: var(--step-tag-active-color);
@@ -70,7 +70,7 @@
     }
 
     &-content {
-      .content();
+      .var-step-content();
 
       &--active {
         color: var(--step-content-active-color);
@@ -96,7 +96,7 @@
     &-tag {
       flex-shrink: 0;
       margin: var(--step-vertical-tag-margin);
-      .tag();
+      .var-step-tag();
 
       &--active {
         background: var(--step-tag-active-color);
@@ -104,7 +104,7 @@
     }
 
     &-content {
-      .content();
+      .var-step-content();
 
       &--active {
         color: var(--step-content-active-color);
diff --git a/packages/varlet-ui/src/time-picker/timePicker.less b/packages/varlet-ui/src/time-picker/timePicker.less
index 0b89fcbf171..7413467d894 100644
--- a/packages/varlet-ui/src/time-picker/timePicker.less
+++ b/packages/varlet-ui/src/time-picker/timePicker.less
@@ -57,7 +57,7 @@
 }
 
 // Mixins
-.after-before-basic {
+.var-time-picker-after-before-basic {
   content: '';
   position: absolute;
   border-radius: 100%;
@@ -189,7 +189,7 @@
       border-color: var(--time-picker-clock-hand-border-color);
 
       &::before {
-        .after-before-basic();
+        .var-time-picker-after-before-basic();
 
         background: transparent;
         border: var(--time-picker-clock-hand-before-border-width) solid;
@@ -200,7 +200,7 @@
       }
 
       &::after {
-        .after-before-basic();
+        .var-time-picker-after-before-basic();
 
         border-color: inherit;
         height: var(--time-picker-clock-hand-after-height);
diff --git a/packages/varlet-ui/varlet.config.mjs b/packages/varlet-ui/varlet.config.mjs
index fd797848201..2d0eaa1881f 100644
--- a/packages/varlet-ui/varlet.config.mjs
+++ b/packages/varlet-ui/varlet.config.mjs
@@ -8,9 +8,7 @@ export default defineConfig({
   pc: {
     header: {
       playground:
-        process.env.NODE_ENV === 'development'
-          ? 'http://localhost:3000'
-          : 'https://varlet.pages.dev/playground',
+        process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://varlet.pages.dev/playground',
     },
     menu: [
       {