---
order: 1
navTitle: custom.less
---
# custom.less

`custom.less` 是 SuccApp 前端样式脚本的约定文件名。它运行在浏览器端，适合定制门户、仪表板、报表、SuperPage 页面和系统提示页面的视觉样式。

系统会把 Less 编译成浏览器可使用的 CSS。Less 兼容 CSS，也支持变量、嵌套等扩展语法；语法可参考 [Less 官方文档](https://lesscss.org/)。

## 写在哪里{#where}

按复用范围选择样式位置：只给一个页面用，写在页面同目录的同名 `.less`；应用或项目内多个页面都要用，写到对应层级的 `custom.less`；多个项目或系统功能页都要用，才写到系统级 `custom.less`。具体路径、加载范围和优先级见[脚本文件组织](../file-organization.md#front-script)。

## 编写示例{#usage}

`custom.less` 可以直接写 CSS，也可以使用 Less 嵌套写法。建议先用页面、应用或组件的外层类名收敛选择器，避免样式影响到其他页面。

```less
.sales-dashboard {
  .summary-card {
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    .title {
      font-weight: 600;
    }
  }
}
```

如果只是调整当前页面，优先写在页面同名 `.less` 中。多个页面确实要复用时，再上移到应用级或项目级 `custom.less`。

在页面设计器中，可以通过 **视图** > **底部面板** > **前端脚本｜样式脚本** 编辑当前页面的样式脚本。页面级样式会自动保存为与页面同名的 `.less` 文件。

## 生效范围和优先级{#scope}

页面运行时会加载当前页面可用的前端样式。页面级样式影响当前页面；应用级 `custom.less` 影响应用内页面；项目级 `custom.less` 影响当前项目；系统级 `custom.less` 可能影响多个项目和系统功能页。

同一个页面同时命中多个层级的样式时，越靠近当前页面的样式越适合写具体覆盖规则。不要为了临时覆盖把选择器写得过深或放到系统级样式中，否则后续维护和回退都会变困难。

## 注意事项{#notes}

1. 优先维护 `.less` 源文件，不要手工修改同名 `.css` 编译产物。
2. 选择器尽量收敛到当前页面、应用或明确组件范围，避免污染全局样式。
3. `public/custom.less` 会被浏览器加载，不要在注释或代码中写入密钥、账号、内部地址等敏感信息。
4. 修改项目级或系统级样式后，需要检查典型页面、深浅主题和不同屏幕宽度下的显示效果。

## 相关参考{#references}

- [.less 样式脚本文件](../../meta/file-types/views/less.md)
- [.css 样式文件](../../meta/file-types/views/css.md)
- [脚本文件的组织](../file-organization.md)