样式表
借助 GoLand,您可以使用 CSS 以及多种可编译为 CSS 的语言编写样式定义,例如 Sass、 Less、 SCSS 或 Stylus。
您还可以查阅样式表文档、创建与移动规则集、引入变量等。
开始之前
请确保已在设置中启用 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 库的类名,而无需将这些库添加为项目依赖项。
打开包含指向外部 CSS 库的 CDN 链接的 HTML 文件。GoLand 会高亮显示该链接。 GoLand 会高亮显示该链接。
要启用该库的补全功能,请在链接上按下 Alt+Enter ,然后在列表中选择 。 或者,悬停在链接上并单击 下载库。
补全 Sass 与 SCSS 选择器
GoLand 还为 Sass 和 SCSS 选择器提供补全支持——包括 嵌套选择器 和 使用 & 创建的选择器。
样式表中的 Cloud Completion 与整行补全
GoLand 在 CSS、Less、Sass/SCSS 和 PostCSS 代码中提供 Cloud Completion 和 Full Line completion 功能。
Full Line 补全功能使用本地运行的深度学习模型实时建议整行代码。 该功能在 GoLand 中默认提供,无需额外授权。
启用样式表中的整行代码补全
按下 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。
选中 启用本地Full Line 补全建议 复选框,并确保已启用 类 CSS 复选框。

由 AI 助手 驱动的 Cloud Completion 可根据项目上下文实时自动补全单行、代码块甚至整个函数。
Cloud Completion 在考虑上下文的基础上建议语法上合理的解决方案,并提前运行各种 代码检查 ,以排除可能导致错误的变体。
启用 Cloud Completion
按下 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。
选中 Enable cloud completion suggestions 复选框,并确保已启用 HTML 复选框。

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



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

查看属性文档
将光标定位在该属性上,然后按 Ctrl+Q 或从主菜单中选择 。
当您将鼠标悬停在属性上时,GoLand 会立即在 文档 弹窗中显示其引用信息。
您可以关闭此行为,或设置弹窗显示更快或更慢的速度,请参阅下文 配置文档弹窗行为。
配置文档弹窗的行为
要关闭悬停在代码符号上时自动显示文档的功能,请在弹窗中点击
,然后禁用 在鼠标移动时显示 选项。
要加快或延迟 文档 弹窗的显示时间,请打开 设置 对话框(Ctrl+Alt+S ),前往 ,然后选中 显示文档弹窗 复选框并指定延迟时间。
在浏览器中打开 MDN 文档
在 文档 弹窗 Ctrl+Q 中,点击底部的链接。
按下 Shift+F1 或从主菜单中选择 。
重构
借助 GoLand,您可以将样式表中的表达式转换为变量,并在 .css 文件中使用 var(--var-name) 语法引入变量,或在 .scss 和 .sass 文件中使用 $ 语法。
引入变量
在编辑器中,将光标定位在要转换为变量的表达式上并按 Ctrl+Alt+V ,或从上下文菜单或主菜单中选择 。
如果发现所选表达式有多个出现位置,请从 发现多个项 列表中选择 仅替换此项 或 替换所有项。
对于 .scss 和 .sass ,选择变量的 全局 或 局部 作用域。
在带红色边框的字段中,接受建议的变量名或输入自定义名称。 准备好后按 Enter。
借助 GoLand,您可以根据 CSS、SCSS、Sass 或 Less 文件中的已有声明创建新的规则集,甚至通过重构或意图操作在文件间移动整个规则集。
引入规则集
选择要引入的声明。 如果只需一个声明,只需将光标放在其内部即可。
按下 Alt+Enter 并从列表中选择 引入规则集。
GoLand 会使用相同选择器创建一个新的规则集,并将所选声明移动至其中。 如果选区包含注释、嵌套选择器等内容,也会一并移动到新规则集中。
将规则集移动到其他文件
将光标置于要移动的规则集中的任意位置并按下 F6。
在打开的对话框中,指定要将规则集移动至的文件。 如果指定的文件不存在,GoLand 会建议创建该文件。
默认情况下,GoLand 会自动打开移动了规则集的文件。 要更改此行为,请取消选中 在编辑器中打开 复选框。
常见的重构操作(如 复制、 移动 或 重命名 )也可用。
检查与浏览器的兼容性
除了 在文档弹窗中查询信息 外,您还可以即时检查样式表属性在特定浏览器中的兼容性。 此检查基于 MDN 浏览器兼容性数据 ,每当某个属性在目标浏览器中不受支持时,都会显示警告。

开启兼容性检查
在 设置 对话框(Ctrl+Alt+S )中,进入 。
展开 CSS 节点并选择 属性与所选浏览器不兼容。 在 选项 区域中,选择您要面向的浏览器及其最低版本。
在 选项 区域中,选择要用于检查属性可用性的浏览器。 指定所选浏览器的目标版本。

管理颜色
借助 GoLand,您可以轻松更改样式表中的颜色值,无需输入十六进制代码。
要指定颜色,请将插入符号置于
color属性上,按下 Ctrl+Space ,然后选择所需的颜色值,或点击 选择颜色... 以选择自定义颜色。
要使用代码而非易读的颜色名称,请按下 Alt+Enter 并从列表中选择 将颜色转换为 <color code system> ,其中 <color code system> 为 HEX、 HSL、 HWB或 RGB。

要更改颜色,请单击边距中的颜色图标,并在弹窗中选择所需颜色。

或者,将插入符号置于颜色属性上,按下 Alt+Enter ,从列表中选择 更改颜色 ,然后在弹窗中选择所需的颜色。
默认情况下,GoLand 会将颜色预览显示为边距中的图标。 要在背景中显示颜色预览,请打开 设置 对话框(Ctrl+Alt+S ),转到 ,然后选中 以背景方式显示 CSS 颜色预览 复选框。

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

查看应用于标签的样式
在 HTML 和 XHTML 文件中,GoLand 可以显示应用于任意标签的所有样式。
在标签的上下文菜单中选择 。
GoLand 会打开包含两个窗格的 CSS 样式 工具窗口,左侧窗格显示标签的样式,右侧窗格显示其定义。 对于每个标签,GoLand 都会打开一个单独的标签页。
在该工具窗口中,您可以导航至源代码中的标签和属性定义。
要跳转到该标签,请单击左侧窗格工具栏上的
。
要跳转到属性定义,请在左侧窗格中选择该属性,然后点击右侧窗格工具栏上的
。
配置语法高亮
您可以根据个人偏好和习惯配置 CSS 感知语法高亮显示。
在 设置 对话框(Ctrl+Alt+S )中,转到 。
选择颜色方案,接受默认继承的高亮设置,或按照 颜色与字体 中描述的内容进行自定义。