GoLand 2025.2 Help

样式表

借助 GoLand,您可以使用 CSS 以及多种可编译为 CSS 的语言编写样式定义,例如 SassLessSCSSStylus

您还可以查阅样式表文档、创建与移动规则集、引入变量等。

开始之前

请确保已在设置中启用 CSS 插件。 按 Ctrl+Alt+S 打开设置,然后选择 插件。 单击 已安装 选项卡。 在搜索字段中,输入 CSS。 有关插件的详细信息,请参见 管理插件

代码补全

GoLand 提供属性、其值、选择器、变量与 mixin 的代码补全功能。

补全样式表类

在 HTML 文件、各种类型的模板(例如 Angular 或 Vue.js)以及 JSX 代码中,支持 CSS、SCSS、Less 与 Sass 类和 id 的补全。

在 HTML 文件中,GoLand 优先建议来自 style 标签以及与 link 标签关联文件中的类和 id。 若未找到匹配结果,GoLand 还会建议项目中所有样式表文件中定义的符号。 若要立即查看项目中定义的所有类和 id,而不必开始输入,请按两次 Ctrl+Space

从外部库中补全样式表类

借助 GoLand,您还可以补全来自 Twitter Bootstrap 或其他从 CDN 链接的 CSS 库的类名,而无需将这些库添加为项目依赖项。

  1. 打开包含指向外部 CSS 库的 CDN 链接的 HTML 文件。GoLand 会高亮显示该链接。 GoLand 会高亮显示该链接。

  2. 要启用该库的补全功能,请在链接上按下 Alt+Enter ,然后在列表中选择 下载库。 或者,悬停在链接上并单击 下载库

补全 Sass 与 SCSS 选择器

GoLand 还为 Sass 和 SCSS 选择器提供补全支持——包括 嵌套选择器使用 & 创建的选择器

样式表中的 Cloud Completion 与整行补全

GoLand 在 CSS、Less、Sass/SCSS 和 PostCSS 代码中提供 Cloud CompletionFull Line completion 功能。

Full Line 补全功能使用本地运行的深度学习模型实时建议整行代码。 该功能在 GoLand 中默认提供,无需额外授权。

启用样式表中的整行代码补全

  1. 按下 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全

  2. 选中 启用本地Full Line 补全建议 复选框,并确保已启用 类 CSS 复选框。

    启用整行补全

由 AI 助手 驱动的 Cloud Completion 可根据项目上下文实时自动补全单行、代码块甚至整个函数。

Cloud Completion 在考虑上下文的基础上建议语法上合理的解决方案,并提前运行各种 代码检查 ,以排除可能导致错误的变体。

启用 Cloud Completion

  1. 安装并启用 AI Assistant 插件

  2. 按下 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全

  3. 选中 Enable cloud completion suggestions 复选框,并确保已启用 HTML 复选框。

    在 CSS 中启用 Cloud Completion

搜索与导航

  • 要查找样式表符号的用法,请将光标置于其上并按下 Alt+F7。 详细了解请参阅 在项目中搜索用法

  • 要从样式表符号的用法跳转到其定义,请按下 Ctrl+B。 Navigation to definition is available for classes, ids, selectors – including nested selectors and selectors with an ampersand & - as well as for variables and mixins.

    详细了解请参阅 转到定义

查阅文档

对于属性和伪元素,GoLand 会显示其相应 MDN 文章 的摘要。 该摘要显示在 文档 弹窗中,其中提供关于属性及其取值的简要描述,以及其 Web 平台基线状态

样式表快速文档:基线,广泛可用
样式表快速文档:基线,新近可用
样式表快速文档:基线,可用性有限

对于选择器,GoLand 还会显示其 特异性

文档查阅:选择器的特异性

查看属性文档

  • 将光标定位在该属性上,然后按 Ctrl+Q 或从主菜单中选择 查看 | 快速查看文档

  • 当您将鼠标悬停在属性上时,GoLand 会立即在 文档 弹窗中显示其引用信息。

    您可以关闭此行为,或设置弹窗显示更快或更慢的速度,请参阅下文 配置文档弹窗行为

配置文档弹窗的行为

  • 要关闭悬停在代码符号上时自动显示文档的功能,请在弹窗中点击 显示选项菜单图标 ,然后禁用 在鼠标移动时显示 选项。

  • 要加快或延迟 文档 弹窗的显示时间,请打开 设置 对话框(Ctrl+Alt+S ),前往 编辑器 | 常规 | 代码补全 ,然后选中 显示文档弹窗 复选框并指定延迟时间。

在浏览器中打开 MDN 文档

  • 文档 弹窗 Ctrl+Q 中,点击底部的链接。

  • 按下 Shift+F1 或从主菜单中选择 查看 | 外部文档

重构

借助 GoLand,您可以将样式表中的表达式转换为变量,并在 .css 文件中使用 var(--var-name) 语法引入变量,或在 .scss .sass 文件中使用 $ 语法。

引入变量

  1. 在编辑器中,将光标定位在要转换为变量的表达式上并按 Ctrl+Alt+V ,或从上下文菜单或主菜单中选择 重构 | 引入 | 引入变量

  2. 如果发现所选表达式有多个出现位置,请从 发现多个项 列表中选择 仅替换此项替换所有项

  3. 对于 .scss .sass ,选择变量的 全局局部 作用域。

  4. 在带红色边框的字段中,接受建议的变量名或输入自定义名称。 准备好后按 Enter

借助 GoLand,您可以根据 CSS、SCSS、Sass 或 Less 文件中的已有声明创建新的规则集,甚至通过重构或意图操作在文件间移动整个规则集。

引入规则集

  1. 选择要引入的声明。 如果只需一个声明,只需将光标放在其内部即可。

  2. 按下 Alt+Enter 并从列表中选择 引入规则集

GoLand 会使用相同选择器创建一个新的规则集,并将所选声明移动至其中。 如果选区包含注释、嵌套选择器等内容,也会一并移动到新规则集中。

将规则集移动到其他文件

  1. 将光标置于要移动的规则集中的任意位置并按下 F6

  2. 在打开的对话框中,指定要将规则集移动至的文件。 如果指定的文件不存在,GoLand 会建议创建该文件。

  3. 默认情况下,GoLand 会自动打开移动了规则集的文件。 要更改此行为,请取消选中 在编辑器中打开 复选框。

常见的重构操作(如 复制移动重命名 )也可用。

检查与浏览器的兼容性

除了 在文档弹窗中查询信息 外,您还可以即时检查样式表属性在特定浏览器中的兼容性。 此检查基于 MDN 浏览器兼容性数据 ,每当某个属性在目标浏览器中不受支持时,都会显示警告。

样式表兼容性检查弹窗

开启兼容性检查

  1. 设置 对话框(Ctrl+Alt+S )中,进入 编辑器 | 检查

  2. 展开 CSS 节点并选择 属性与所选浏览器不兼容。 在 选项 区域中,选择您要面向的浏览器及其最低版本。

  3. 选项 区域中,选择要用于检查属性可用性的浏览器。 指定所选浏览器的目标版本。

CSS 兼容性检查设置

管理颜色

借助 GoLand,您可以轻松更改样式表中的颜色值,无需输入十六进制代码。

  • 要指定颜色,请将插入符号置于 color 属性上,按下 Ctrl+Space ,然后选择所需的颜色值,或点击 选择颜色... 以选择自定义颜色。

    选择颜色
  • 要使用代码而非易读的颜色名称,请按下 Alt+Enter 并从列表中选择 将颜色转换为 <color code system> ,其中 <color code system> 为 HEXHSLHWBRGB

    使用代码代替颜色名称
  • 要更改颜色,请单击边距中的颜色图标,并在弹窗中选择所需颜色。

    拾取颜色

    或者,将插入符号置于颜色属性上,按下 Alt+Enter ,从列表中选择 更改颜色 ,然后在弹窗中选择所需的颜色。

  • 默认情况下,GoLand 会将颜色预览显示为边距中的图标。 要在背景中显示颜色预览,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 外观 ,然后选中 以背景方式显示 CSS 颜色预览 复选框。

    在背景中显示颜色预览

    要恢复边距中的颜色预览图标,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 常规 | 行号图标 ,然后在 常规 区域中选中 颜色预览 复选框。

    在边距中启用颜色预览

查看应用于标签的样式

在 HTML 和 XHTML 文件中,GoLand 可以显示应用于任意标签的所有样式。

  • 在标签的上下文菜单中选择 显示标签的应用样式

    GoLand 会打开包含两个窗格的 CSS 样式 工具窗口,左侧窗格显示标签的样式,右侧窗格显示其定义。 对于每个标签,GoLand 都会打开一个单独的标签页。

    在该工具窗口中,您可以导航至源代码中的标签和属性定义。

    • 要跳转到该标签,请单击左侧窗格工具栏上的 导航到标签工具栏按钮

    • 要跳转到属性定义,请在左侧窗格中选择该属性,然后点击右侧窗格工具栏上的 导航到样式来源按钮

配置语法高亮

您可以根据个人偏好和习惯配置 CSS 感知语法高亮显示。

  1. 设置 对话框(Ctrl+Alt+S )中,转到 编辑器 | 颜色方案 | CSS

  2. 选择颜色方案,接受默认继承的高亮设置,或按照 颜色与字体 中描述的内容进行自定义。

最后修改日期: 2025年 9月 26日