JeeSite 快速开发平台
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
  • 快速了解

  • 开发手册

  • Vue 开发手册

    • Vue 分离版本介绍
    • 快速开始、安装部署
    • 配置参数、主题配置
    • 前端权限、按钮权限
    • BasicForm 表单组件
    • BasicTable 表格组件
    • 源码解析、表单列表
    • 常用组件库、Hooks
    • 图标 Icon Svg 组件
    • 国际化、多语言
    • Less CSS 样式库
      • 样式介绍
      • WindiCSS 库
      • 为什么使用 Less
      • 开启 scoped
      • 关于样式覆写
    • 引入外部依赖
    • 分离版 ★ 常见问题 ★
  • 扩展功能专题

  • 云服务技术架构

  • 技术服务与支持

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 # 变量
1
2
3
4
5
6
7
8

全局注入

config.less 这个文件会被全局注入到所有文件,所以在页面内可以直接使用变量而不需要手动引入

<style lang="less" scoped>
  // 这里已经隐式注入了 config.less
</style>
1
2
3

# WindiCSS 库

项目中使用了 WindiCSS (opens new window),具体参见文件使用说明。例如:

<div class="relative w-full h-full px-4"></div>
1

中文文档:https://cn.windicss.org/ (opens new window)

# 为什么使用 Less

主要是因为 Ant Design 默认使用 less 作为样式语言,使用 Less 可以跟其保持一致。

# 开启 scoped

没有加 scoped 属性,默认会编译成全局样式,可能会造成全局污染

<style></style>

<style scoped></style>
1
2
3

温馨提醒

使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。

# 关于样式覆写

由于使用的是 less 预处理语言,编写的代码和浏览器上审查元素看到的是不一致的,浏览器上是编译后的,所以不像原生的 css 好定位。

根据我们的一些经验,在查找 css 代码位置的时候,不要完整查找,进行部分搜索,如:

你看到这样的样式:.jeesite-menu-vertical .jeesite-menu-submenu-title

可搜索:-submenu-title 或 &-submenu-title 可快速找到定位,前面的 & 表示当前选择器的父级

修改原来样式,可能会带来升级困难,个性化的样式建议采用,样式覆盖方案解决。

进入 JeeSite 源码仓库页面,点击右上角 ⭐ Star 加星关注。

← 国际化、多语言 引入外部依赖→

联系我们:s.jeesite.com  |  微信号:jeesitex  |  邮箱:jeesite@163.com
© 2013-2023 济南卓源软件有限公司 版权所有 | Theme Vdoing

关注 JeeSite 公众号,了解最新动态

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式