diff --git a/packages/theme/styles/layout/default/aside.less b/packages/theme/styles/layout/default/aside.less
index 479ec1d0f2..ca9d971e8b 100644
--- a/packages/theme/styles/layout/default/aside.less
+++ b/packages/theme/styles/layout/default/aside.less
@@ -49,7 +49,7 @@
 
 // Desktop
 @media (min-width: @mobile-min) {
-  .aside-collapsed {
+  @{alain-default-prefix}__collapsed {
     @{alain-default-prefix}__aside {
       width: @alain-default-aside-collapsed-wd;
     }
@@ -65,7 +65,7 @@
   @{alain-default-prefix}__content {
     transform: translate3d(@alain-default-aside-wd, 0, 0);
   }
-  .aside-collapsed {
+  @{alain-default-prefix}__collapsed {
     @{alain-default-prefix}__aside {
       transform: translate3d(-100%, 0, 0);
     }
diff --git a/packages/theme/styles/layout/default/fix/footer-toolbar.less b/packages/theme/styles/layout/default/fix/footer-toolbar.less
index 3f03e99ea7..9843e16cb8 100644
--- a/packages/theme/styles/layout/default/fix/footer-toolbar.less
+++ b/packages/theme/styles/layout/default/fix/footer-toolbar.less
@@ -4,7 +4,7 @@
   }
 }
 
-.aside-collapsed {
+@{alain-default-prefix}__collapsed {
   @{footer-toolbar-prefix} {
     &__left {
       margin-left: @alain-default-aside-collapsed-wd;
diff --git a/packages/theme/styles/layout/default/fix/reuse-tab.less b/packages/theme/styles/layout/default/fix/reuse-tab.less
index a87bbe677c..e32b15a43e 100644
--- a/packages/theme/styles/layout/default/fix/reuse-tab.less
+++ b/packages/theme/styles/layout/default/fix/reuse-tab.less
@@ -2,7 +2,7 @@
   margin: 0 -@alain-default-content-padding 0 -@alain-default-content-padding;
 }
 
-.layout-fixed {
+@{alain-default-prefix}__fixed {
   @{reuse-tab-prefix} {
     position: fixed;
     top: @alain-default-header-hg;
@@ -12,7 +12,7 @@
 }
 
 @media (min-width: @mobile-min) {
-  .layout-fixed {
+  @{alain-default-prefix}__fixed {
     @{reuse-tab-prefix} {
       + router-outlet {
         display: block;
@@ -23,7 +23,7 @@
 }
 
 @media (max-width: @mobile-max) {
-  .layout-fixed {
+  @{alain-default-prefix}__fixed {
     @{reuse-tab-prefix} {
       position: unset;
       margin-top: @reuse-tab-height;
diff --git a/packages/theme/styles/layout/default/fix/sidebar-nav.less b/packages/theme/styles/layout/default/fix/sidebar-nav.less
index 72d6fad32b..6258cbdd87 100644
--- a/packages/theme/styles/layout/default/fix/sidebar-nav.less
+++ b/packages/theme/styles/layout/default/fix/sidebar-nav.less
@@ -164,7 +164,7 @@
 }
 
 @media (min-width: @mobile-min) {
-  .aside-collapsed {
+  @{alain-default-prefix}__collapsed {
     .@{sidebar-nav-prefix-cls}:not(.@{sidebar-nav-prefix-cls}__sub) {
       .@{sidebar-nav-prefix-cls}__item {
         border: none;
diff --git a/packages/theme/styles/layout/default/fixed.less b/packages/theme/styles/layout/default/fixed.less
index d3151e2f22..bbc2e515ae 100644
--- a/packages/theme/styles/layout/default/fixed.less
+++ b/packages/theme/styles/layout/default/fixed.less
@@ -1,4 +1,4 @@
-.layout-fixed {
+@{alain-default-prefix}__fixed {
   @{alain-default-prefix} {
     &__header {
       position: fixed;
diff --git a/packages/theme/styles/layout/default/header.less b/packages/theme/styles/layout/default/header.less
index fa93b44333..ede250118e 100644
--- a/packages/theme/styles/layout/default/header.less
+++ b/packages/theme/styles/layout/default/header.less
@@ -155,7 +155,7 @@
 
 
 // Collapsed
-.aside-collapsed {
+@{alain-default-prefix}__collapsed {
   @{alain-default-prefix}__header {
     &-logo {
       width: @alain-default-aside-collapsed-wd;
diff --git a/packages/theme/styles/layout/default/index.en-US.md b/packages/theme/styles/layout/default/index.en-US.md
index c7970df697..11ec23f5b7 100644
--- a/packages/theme/styles/layout/default/index.en-US.md
+++ b/packages/theme/styles/layout/default/index.en-US.md
@@ -10,33 +10,33 @@ The default layout all parameters are prefixed with `@alain-default-`.
 
 | Name | Default | Description |
 | --- | --- | --- |
-| `@prefix` | `.alain-default` | Style name prefix |
-| `@ease` | `cubic-bezier(.25, 0, .15, 1)` | Animation filter function |
-| `@header-hg` | `64px` | Height of header |
-| `@header-bg` | `@primary-color` | Background-color of header |
-| `@header-padding` | `@layout-gutter * 2` | Horizontal padding of header |
-| `@header-search-enabled` | `true` | Whether top search |
-| `@header-search-height` | `34px` | Height of top search |
-| `@aside-wd` | `200px` | Width of aside |
-| `@aside-bg` | `#fff` | Background-color of aside |
-| `@aside-scrollbar-width` | `0` | Scrollbar width of aside |
-| `@aside-scrollbar-height` | `0` | Scrollbar height of aside |
-| `@aside-scrollbar-track-color` | `transparent` | Scrollbar track color of aside |
-| `@aside-scrollbar-thumb-color` | `transparent` | Scrollbar thumb color of aside |
-| `@aside-nav-fs` | `14px` | Font size of nav name |
-| `@aside-nav-padding-top-bottom` | `@layout-gutter` | Vertical padding of nav |
-| `@aside-nav-item-height` | `38px` | Item height of nav |
-| `@aside-nav-text-color` | `rgba(0, 0, 0, 0.65)` | Nav text color |
-| `@aside-nav-text-hover-color` | `#108ee9` | Nav text hover color |
-| `@aside-nav-group-text-color` | `rgba(0, 0, 0, 0.43)` | Group text color |
-| `@aside-nav-selected-text-color` | `#108ee9` | Nav selected text color |
-| `@aside-nav-selected-bg` | `#fcfcfc` | Nav selected background color |
-| `@aside-collapsed-wd` | `@layout-gutter * 8` |  Width of aside collapsed |
-| `@aside-collapsed-nav-fs` | `24px` | Font size of aside collapsed |
-| `@content-heading-bg` | `#fafbfc` |  Heading background color of content area |
-| `@content-heading-border` | `#efe3e5` | Heading bottom border color of content area |
-| `@content-padding` | `@layout-gutter * 3` | Padding of content area |
-| `@content-bg` | `#f5f7fa` | Background color of content area |
+| `@alain-default-prefix` | `.alain-default` | Style name prefix |
+| `@alain-default-ease` | `cubic-bezier(.25, 0, .15, 1)` | Animation filter function |
+| `@alain-default-header-hg` | `64px` | Height of header |
+| `@alain-default-header-bg` | `@primary-color` | Background-color of header |
+| `@alain-default-header-padding` | `@layout-gutter * 2` | Horizontal padding of header |
+| `@alain-default-header-search-enabled` | `true` | Whether top search |
+| `@alain-default-header-search-height` | `34px` | Height of top search |
+| `@alain-default-aside-wd` | `200px` | Width of aside |
+| `@alain-default-aside-bg` | `#fff` | Background-color of aside |
+| `@alain-default-aside-scrollbar-width` | `0` | Scrollbar width of aside |
+| `@alain-default-aside-scrollbar-height` | `0` | Scrollbar height of aside |
+| `@alain-default-aside-scrollbar-track-color` | `transparent` | Scrollbar track color of aside |
+| `@alain-default-aside-scrollbar-thumb-color` | `transparent` | Scrollbar thumb color of aside |
+| `@alain-default-aside-nav-fs` | `14px` | Font size of nav name |
+| `@alain-default-aside-nav-padding-top-bottom` | `@layout-gutter` | Vertical padding of nav |
+| `@alain-default-aside-nav-item-height` | `38px` | Item height of nav |
+| `@alain-default-aside-nav-text-color` | `rgba(0, 0, 0, 0.65)` | Nav text color |
+| `@alain-default-aside-nav-text-hover-color` | `#108ee9` | Nav text hover color |
+| `@alain-default-aside-nav-group-text-color` | `rgba(0, 0, 0, 0.43)` | Group text color |
+| `@alain-default-aside-nav-selected-text-color` | `#108ee9` | Nav selected text color |
+| `@alain-default-aside-nav-selected-bg` | `#fcfcfc` | Nav selected background color |
+| `@alain-default-aside-collapsed-wd` | `@layout-gutter * 8` |  Width of aside collapsed |
+| `@alain-default-aside-collapsed-nav-fs` | `24px` | Font size of aside collapsed |
+| `@alain-default-content-heading-bg` | `#fafbfc` |  Heading background color of content area |
+| `@alain-default-content-heading-border` | `#efe3e5` | Heading bottom border color of content area |
+| `@alain-default-content-padding` | `@layout-gutter * 3` | Padding of content area |
+| `@alain-default-content-bg` | `#f5f7fa` | Background color of content area |
 
 ## Usage
 
diff --git a/packages/theme/styles/layout/default/index.zh-CN.md b/packages/theme/styles/layout/default/index.zh-CN.md
index b2162fef94..367f29e659 100644
--- a/packages/theme/styles/layout/default/index.zh-CN.md
+++ b/packages/theme/styles/layout/default/index.zh-CN.md
@@ -8,35 +8,35 @@ title: 默认布局
 
 ## 参数
 
-| 名称 | 默认值 | 功能 |
-| --- | --- | --- |
-| `@prefix` | `.alain-default` | 布局样式前缀 |
-| `@ease` | `cubic-bezier(.25, 0, .15, 1)` | 动画过滤函数 |
-| `@header-hg` | `64px` | 顶部高度 |
-| `@header-bg` | `@primary-color` | 顶部背景色 |
-| `@header-padding` | `@layout-gutter * 2` | 顶部左右内边距 |
-| `@header-search-enabled` | `true` | 是否开启顶部搜索框 |
-| `@header-search-height` | `34px` | 顶部搜索框高度 |
-| `@aside-wd` | `200px` | 侧边栏宽度 |
-| `@aside-bg` | `#fff` | 侧边栏背景色 |
-| `@aside-scrollbar-width` | `0` | 侧边栏滚动条宽度 |
-| `@aside-scrollbar-height` | `0` | 侧边栏滚动条高度 |
-| `@aside-scrollbar-track-color` | `transparent` | 侧边栏滚动条的轨道颜色 |
-| `@aside-scrollbar-thumb-color` | `transparent` | 侧边栏滚动条小方块颜色 |
-| `@aside-nav-fs` | `14px` | 侧边栏菜单字号 |
-| `@aside-nav-padding-top-bottom` | `@layout-gutter` | 侧边栏菜单项上下内边距 |
-| `@aside-nav-item-height` | `38px` | 侧边栏菜单项高度 |
-| `@aside-nav-text-color` | `rgba(0, 0, 0, 0.65)` | 侧边栏菜单文本颜色 |
-| `@aside-nav-text-hover-color` | `#108ee9` | 侧边栏菜单文本悬停颜色 |
-| `@aside-nav-group-text-color` | `rgba(0, 0, 0, 0.43)` | 侧边栏菜单分组文本颜色 |
-| `@aside-nav-selected-text-color` | `#108ee9` | 侧边栏菜单激活时文本颜色 |
-| `@aside-nav-selected-bg` | `#fcfcfc` | 侧边栏菜单激活时背景颜色 |
-| `@aside-collapsed-wd` | `@layout-gutter * 8` | 侧边栏收缩后宽度 |
-| `@aside-collapsed-nav-fs` | `24px` | 侧边栏收缩后文本字号 |
-| `@content-heading-bg` | `#fafbfc` | 内容区域标题背景色 |
-| `@content-heading-border` | `#efe3e5` | 内容区域标题底部边框色 |
-| `@content-padding` | `@layout-gutter * 3` | 内容区域内边距 |
-| `@content-bg` | `#f5f7fa` | 内容区域背景色 |
+| 名称                                           | 默认值                         | 功能                     |
+| ---------------------------------------------- | ------------------------------ | ------------------------ |
+| `@alain-default-prefix`                        | `.alain-default`               | 布局样式前缀             |
+| `@alain-default-ease`                          | `cubic-bezier(.25, 0, .15, 1)` | 动画过滤函数             |
+| `@alain-default-header-hg`                     | `64px`                         | 顶部高度                 |
+| `@alain-default-header-bg`                     | `@primary-color`               | 顶部背景色               |
+| `@alain-default-header-padding`                | `@layout-gutter * 2`           | 顶部左右内边距           |
+| `@alain-default-header-search-enabled`         | `true`                         | 是否开启顶部搜索框       |
+| `@alain-default-header-search-height`          | `34px`                         | 顶部搜索框高度           |
+| `@alain-default-aside-wd`                      | `200px`                        | 侧边栏宽度               |
+| `@alain-default-aside-bg`                      | `#fff`                         | 侧边栏背景色             |
+| `@alain-default-aside-scrollbar-width`         | `0`                            | 侧边栏滚动条宽度         |
+| `@alain-default-aside-scrollbar-height`        | `0`                            | 侧边栏滚动条高度         |
+| `@alain-default-aside-scrollbar-track-color`   | `transparent`                  | 侧边栏滚动条的轨道颜色   |
+| `@alain-default-aside-scrollbar-thumb-color`   | `transparent`                  | 侧边栏滚动条小方块颜色   |
+| `@alain-default-aside-nav-fs`                  | `14px`                         | 侧边栏菜单字号           |
+| `@alain-default-aside-nav-padding-top-bottom`  | `@layout-gutter`               | 侧边栏菜单项上下内边距   |
+| `@alain-default-aside-nav-item-height`         | `38px`                         | 侧边栏菜单项高度         |
+| `@alain-default-aside-nav-text-color`          | `rgba(0, 0, 0, 0.65)`          | 侧边栏菜单文本颜色       |
+| `@alain-default-aside-nav-text-hover-color`    | `#108ee9`                      | 侧边栏菜单文本悬停颜色   |
+| `@alain-default-aside-nav-group-text-color`    | `rgba(0, 0, 0, 0.43)`          | 侧边栏菜单分组文本颜色   |
+| `@alain-default-aside-nav-selected-text-color` | `#108ee9`                      | 侧边栏菜单激活时文本颜色 |
+| `@alain-default-aside-nav-selected-bg`         | `#fcfcfc`                      | 侧边栏菜单激活时背景颜色 |
+| `@alain-default-aside-collapsed-wd`            | `@layout-gutter * 8`           | 侧边栏收缩后宽度         |
+| `@alain-default-aside-collapsed-nav-fs`        | `24px`                         | 侧边栏收缩后文本字号     |
+| `@alain-default-content-heading-bg`            | `#fafbfc`                      | 内容区域标题背景色       |
+| `@alain-default-content-heading-border`        | `#efe3e5`                      | 内容区域标题底部边框色   |
+| `@alain-default-content-padding`               | `@layout-gutter * 3`           | 内容区域内边距           |
+| `@alain-default-content-bg`                    | `#f5f7fa`                      | 内容区域背景色           |
 
 ## 使用方式
 
diff --git a/packages/theme/styles/layout/default/layout.less b/packages/theme/styles/layout/default/layout.less
index 5fb85a7428..2ddf9bf9b2 100644
--- a/packages/theme/styles/layout/default/layout.less
+++ b/packages/theme/styles/layout/default/layout.less
@@ -69,7 +69,7 @@ body {
   @{alain-default-prefix}__content {
     margin-left: (@alain-default-aside-wd + @alain-default-content-padding);
   }
-  .aside-collapsed {
+  @{alain-default-prefix}__collapsed {
     @{alain-default-prefix} {
       &__sidebar {
         width: @alain-default-aside-collapsed-wd;
diff --git a/packages/theme/styles/layout/default/user.less b/packages/theme/styles/layout/default/user.less
index bc190f3e9c..e02b833400 100644
--- a/packages/theme/styles/layout/default/user.less
+++ b/packages/theme/styles/layout/default/user.less
@@ -22,7 +22,7 @@
 
 // Desktop
 @media (min-width: @mobile-min) {
-  .aside-collapsed {
+  @{alain-default-prefix}__collapsed {
     @{alain-default-prefix}__aside-user {
       width: @alain-default-aside-collapsed-wd;
       &-info {
diff --git a/src/app/routes/dev/layout.component.ts b/src/app/routes/dev/layout.component.ts
index 21b72412f3..6498865b03 100644
--- a/src/app/routes/dev/layout.component.ts
+++ b/src/app/routes/dev/layout.component.ts
@@ -11,15 +11,15 @@ import { NzMessageService } from 'ng-zorro-antd';
   preserveWhitespaces: false
 })
 export class DevLayoutComponent implements OnInit {
-  @HostBinding('class.layout-fixed')
+  @HostBinding('class.alain-default__fixed')
   get isFixed() {
     return this.settings.layout.fixed;
   }
-  @HostBinding('class.layout-boxed')
+  @HostBinding('class.alain-default__boxed')
   get isBoxed() {
     return this.settings.layout.boxed;
   }
-  @HostBinding('class.aside-collapsed')
+  @HostBinding('class.alain-default__collapsed')
   get isCollapsed() {
     return this.settings.layout.collapsed;
   }