在前端项目迭代过程中，随着功能不断增加，单个css文件的体积很容易突破数千行，样式规则相互耦合，修改一处样式可能影响多个不相关的组件，维护成本会越来越高。此时可以通过less的模块化能力拆分样式，让样式结构更清晰，降低后续维护难度。
less模块化拆分的核心思路
less模块化拆分的核心是把原本集中在一个文件里的样式，按照不同的维度拆分到多个独立的less文件中，最后通过主文件引入合并，既保留less的预编译特性，又让样式结构更清晰。常见的拆分维度有三种：
- 基础变量与混合拆分：把全局通用的颜色、字体大小、间距等变量，以及常用的样式混合单独放到基础文件里，避免重复定义。
- 组件维度拆分：每个独立的前端组件对应一个less文件，只写该组件自身的样式，不耦合其他组件的样式规则。
- 页面维度拆分：每个页面独有的样式单独放到页面对应的less文件中，避免页面样式互相干扰。
基础less文件的定义
首先创建基础变量和混合文件，存放全局通用的配置，比如定义颜色变量、清除默认样式的混合等。
// variables.less 全局变量定义
@primary_color: #1890ff;
@text_color: #333333;
@font_size_base: 14px;
@spacing_base: 16px;
// mixins.less 全局混合定义
.clearfix() {
&::after {
content: '';
display: block;
clear: both;
}
}
.text_ellipsis() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
组件样式模块化拆分
以按钮组件为例，创建独立的按钮样式文件，只写按钮相关的样式，使用之前定义的全局变量，保证样式统一。
// button.less 按钮组件样式
@import './variables.less';
.btn {
display: inline-block;
padding: @spacing_base / 2 @spacing_base;
font-size: @font_size_base;
border-radius: 4px;
cursor: pointer;
border: none;
outline: none;
.text_ellipsis();
}
.btn_primary {
background-color: @primary_color;
color: #ffffff;
}
.btn_default {
background-color: #ffffff;
color: @text_color;
border: 1px solid #d9d9d9;
}
页面样式模块化拆分
针对具体页面，创建对应的less文件，只写该页面的独有样式，引入需要的组件样式，避免样式冗余。
// home_page.less 首页样式
@import './variables.less';
@import './mixins.less';
@import './button.less';
.home_header {
height: 60px;
line-height: 60px;
background-color: #ffffff;
padding: 0 @spacing_base;
.clearfix();
.logo {
float: left;
font-size: @font_size_base + 4px;
color: @primary_color;
}
.header_btn {
float: right;
margin-top: 14px;
}
}
.home_content {
padding: @spacing_base;
color: @text_color;
}
主文件合并所有模块
最后创建主less文件，引入所有拆分好的模块文件，less编译时会自动把所有内容合并成一个css文件，不需要手动拼接。
// main.less 主入口文件 @import './variables.less'; @import './mixins.less'; @import './button.less'; @import './home_page.less'; // 其他页面或组件的less文件可以继续在这里引入
拆分后的维护优势
完成拆分后，后续维护样式时可以直接定位到对应的组件或页面文件，修改不会影响其他不相关的样式。如果需要调整全局主题色，只需要修改variables.less里的@primary_color变量，所有使用这个变量的样式都会自动更新，不需要逐个查找替换。新增组件时只需要新增对应的less文件，再在主文件里引入即可，不会让原有文件越来越臃肿。