Less 动态样式语言、CSS 样式库介绍
# 样式介绍
主要介绍如何在项目中使用和规划样式文件。
默认使用 less 作为预处理语言，建议在使用前或者遇到疑问时学习一下 Less (opens new window) 的相关特性（如果想获取基础的 CSS 知识或查阅属性，请参考 MDN 文档 (opens new window)）。
项目中使用的通用样式，都存放于 src/design/ (opens new window) 下面。
├── ant # ant design 一些样式覆盖
├── color.less # 颜色
├── index.less # 入口
├── public.less # 公共类
├── theme.less # 主题相关
├── config.less # 每个组件都会自动引入样式
├── transition # 动画相关
└── var # 变量
2
3
4
5
6
7
8
全局注入
config.less 这个文件会被全局注入到所有文件，所以在页面内可以直接使用变量而不需要手动引入
<style lang="less" scoped>
// 这里已经隐式注入了 config.less
</style>
2
3
# UnoCSS 库
v5.7.0+ 中使用了 UnoCSS (opens new window)，一个即时的原子 CSS 引擎。
- 它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码
- 它可以让你快速地开发和原型设计，而不需要考虑CSS的细节
- 它可以让你的 CSS 文件更小，因为它只生成你用到的工具类
- 它可以让你的 CSS 更一致，因为它遵循一套预设的规则和变量
- 它可以让你的 CSS 更灵活，因为它支持自定义工具类，变体，指令和图标
- 它可以让你的 CSS 更易于维护，因为它避免了样式冲突和重复代码
交互式文档：https://unocss.dev/interactive/ (opens new window)
# WindiCSS 库
v5.6.1 及以前版本中，使用了 WindiCSS (opens new window)，具体参见文件使用说明。例如:
<div class="relative w-full h-full px-4"></div>
中文文档：https://cn.windicss.org/ (opens new window)
# 为什么使用 Less
主要是因为 Ant Design 默认使用 less 作为样式语言，使用 Less 可以跟其保持一致。
# 开启 scoped
没有加 scoped 属性，默认会编译成全局样式，可能会造成全局污染
<style></style>
<style scoped></style>
2
3
温馨提醒
使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
# 关于样式覆写
由于使用的是 less 预处理语言，编写的代码和浏览器上审查元素看到的是不一致的，浏览器上是编译后的，所以不像原生的 css 好定位。
根据我们的一些经验，在查找 css 代码位置的时候，不要完整查找，进行部分搜索，如：
您看到这样的样式：.jeesite-menu-vertical .jeesite-menu-submenu-title
可搜索：-submenu-title 或 &-submenu-title 可快速找到定位，前面的 & 表示当前选择器的父级
修改原来样式，可能会带来升级困难，个性化的样式建议采用，样式覆盖方案解决。
