样式表
使用 RubyMine，您可以在 CSS 以及各种编译成 CSS 的语言中编写样式定义，例如 Sass、 Less、 SCSS 或 Stylus。
您还可以查阅样式表的文档，创建和移动规则集，引入变量等。
开始之前
请确保在设置中启用了 CSS 插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 请点击 已安装 选项卡。 在搜索字段中，输入 CSS。 有关插件的更多信息，请参阅 插件管理。
代码补全
RubyMine 为属性、属性值、选择器、变量和 mixins 提供代码补全。
完整样式表类
在 HTML 文件、各种类型的模板（例如，Angular 或 Vue.js），以及 JSX 代码中，提供对 CSS、SCSS、Less 和 Sass 类和 id 的补全。
在 HTML 文件中，RubyMine 首先建议来自 style 标签和包含 link 标签文件的 classes 和 ids。 如果没有找到匹配的结果，RubyMine 还会建议项目中所有样式表文件中定义的符号。 要立即查看项目中定义的所有类和 id，在开始输入前，请按 Ctrl+Space 两次。
完成来自外部库的 Style Sheet 类
使用 RubyMine，您还可以为 Twitter Bootstrap 或其他从 CDN 链接到 HTML 文件的 CSS 库中的类名提供补全，无需将这些库添加到您的项目依赖项中。
打开包含指向外部 CSS 库的 CDN 链接的 HTML 文件。 RubyMine 突出了该链接。
要启用库的代码补全功能，请按 Alt+Enter 上的链接，然后从列表中选择 。 或者，悬停在链接上并点击 下载库。
该库已添加到 页面上的 JavaScript 库列表中。 有关更多信息，请参阅 配置通过 CDN 链接添加的库。
完成 Sass 和 SCSS 选择器
RubyMine 也为 Sass 和 SCSS 选择器提供补全——包括 嵌套选择器和 使用 & 符号 (&) 创建的选择器。
样式表中的云补全和整行补全
RubyMine 在 CSS、Less、Sass/SCSS 和 PostCSS 代码中提供 云补全 和 整行补全。
整行代码补全功能使用本地运行的深度学习模型来建议整行代码。 该功能在 RubyMine 中默认提供，无需额外许可。
在样式表中启用整行代码补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内嵌补全。
选中 启用本地Full Line 补全建议 复选框，并确保选中 类 CSS 复选框。
由 AI Assistant 驱动的云补全可以基于项目上下文实时自动补全单行代码、代码块，甚至整个函数。
云补全在考虑上下文的情况下建议语法上可接受的解决方案，并提前运行各种 代码检查以排除导致错误的变体。
启用云补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内嵌补全。
选中 Enable cloud completion suggestions 复选框，并确保选中 HTML 复选框。
搜索与导航
文档查找
对于属性和伪元素，RubyMine 可以向您显示相应的 MDN 文章 摘要。 该摘要显示在 文档 弹出窗口中，其中展示了属性及其值的简要说明，以及其 Web platform Baseline 状态。
对于选择器，RubyMine 还显示其 特异性。
查看属性文档
将文本光标定位在属性上，然后按 Ctrl+Q 或从主菜单中选择 。
当您悬停在某属性上时，RubyMine 会立即在 文档 弹出窗口中显示其引用。
您可以关闭此行为或配置弹出窗口的显示速度，更快或更慢，详见下文 配置文档弹出窗口的行为。
配置文档弹出窗口的行为
要关闭在悬停代码符号时自动显示文档的功能，请点击弹出窗口中的
，并禁用 在鼠标移动时显示 选项。要调整 文档 弹窗的显示速度，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，然后选择 显示文档弹窗 复选框并指定延迟时间。
在浏览器中打开 MDN 文档
在 文档 弹出窗口 Ctrl+Q 中，点击底部的链接。
按 Shift+F1 或从主菜单中选择 。
格式化
借助 RubyMine 内置格式化工具，您可以重新格式化样式表代码片段，以及整个文件和文件夹，以符合语言特定的代码样式要求。生成或重构代码时，格式化工具也会自动运行。 格式化程序在您生成或重构代码时也会自动唤醒。
要配置样式表语言的格式化设置，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并配置特定语言的选项，例如制表符和缩进、空格、换行和大括号、硬边距和软边距等。
当您更改设置时， 预览 区域会显示这些更改如何影响格式。
在 CSS、SCSS 和 Less 环境中，RubyMine 默认使用双引号生成
import语句和 URL 中的字符串字面量。 要使用单引号，请打开 其他 标签，并从 单个 选项中选择 引号标记 列表。要在重新格式化后将选定样式应用于整个文件，请选择列表下方的 强制执行格式 复选框。
若要重新格式化代码片段，请在编辑器中选择它并按 Ctrl+Alt+L。
要重新格式化文件或文件夹，请在 Project 工具窗口 Alt+1 中选择它并按 Ctrl+Alt+L。 请参阅 重新格式化和重新排列代码了解更多详细信息。
或者，您可以使用 Prettier （Ctrl+Alt+Shift+P）。
重构
借助 RubyMine，您可以将样式表中的表达式转换为变量，并使用 var(--var-name) 语法在 .css 文件中引入这些变量，或使用 $ 语法在 .scss 和 .sass 文件中引入。
引入变量
在编辑器中，将文本光标放在要转换为变量的表达式处，然后按 Ctrl+Alt+V 或从上下文菜单或主菜单中选择 。
如果找到多于一个的所选表达式实例，请从 找到多处出现 列表中选择 仅替换此处 或 替换所有出现。
对于 .scss 和 .sass ，选择 全局或 本地范围的变量。
在红色边框的字段中，接受建议的变量名或指定自定义名称。 按 Enter 准备。
使用 RubyMine，您可以从 CSS、SCSS、Sass 或 Less 文件中的现有声明创建新的规则集，甚至可以通过重构和意图操作在文件之间移动整个规则集。
引入规则集
请选择要引入的声明。 如果您只需要一个声明，只需将文本光标放在其中。
按 Alt+Enter 并从列表中选择 引入规则集。
RubyMine 创建一个具有相同选择器的新规则集，并将选定声明移到其中。 如果选中内容包含注释、嵌套选择器等，它们也会移到新的规则集中。
将规则集移到其他文件
请将文本光标放在规则集中任意位置并按 F6。
在打开的对话框中，指定要移动规则集的文件。 如果指定的文件不存在，RubyMine将建议创建它。
默认情况下，RubyMine 会自动打开规则集所在的文件。 要更改此行为，请清除 在编辑器中打开 复选框。
常见的重构操作，如 Copy、 Move或 Rename ，也可用。
检查与浏览器的兼容性
除了 在文档弹出窗口中查找外，您还可以即时检查样式表属性与特定浏览器的兼容性。 此检查基于 MDN Browser Compatibility Data ，每当某个属性在目标浏览器之一中不受支持时，系统都会向您显示警告。
打开兼容性检查
在 设置 对话框 (Ctrl+Alt+S) 中，前往 。
展开 CSS 节点并选择 属性与选定浏览器不兼容。 在 选项 区域，选择您要针对的浏览器及其最低版本。
在 选项 区域中，选择浏览器以检查属性的可用性。 指定所选浏览器的目标版本。
管理颜色
使用 RubyMine，您可以轻松地在样式表中更改颜色值，而无需输入十六进制代码。
要指定颜色，请将插入点置于
color属性上，按下 Ctrl+Space ，然后选择所需的颜色值，或使用 选择颜色... 选择自定义颜色。
要使用代码代替可读的颜色名称，请按 Alt+Enter 并从列表中选择 将颜色转换为 <颜色编码系统> ，其中<color code system>为 HEX、 HSL、 HWB或 RGB。
要更改颜色，请单击边距中的颜色图标，在弹出窗口中选择所需的颜色。
或者，将插入点置于颜色属性处，按下 Alt+Enter ，从列表中选择 更改颜色 ，然后在弹出窗口中选择所需的颜色。
By default, RubyMine displays color preview as icons in the gutter. 要在背景中显示颜色预览，请打开 设置 对话框（Ctrl+Alt+S ），转到 并选中 以背景形式显示 CSS 颜色预览 复选框。
要恢复颜色预览的边距图标，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并在 常见 区域中选中 颜色预览 复选框。
查看应用于标签的样式
在 HTML 和 XHTML 文件中，RubyMine 可以显示应用于任意标签的所有样式。
从标签的上下文菜单中选择 。
RubyMine 打开 CSS 样式 工具窗口，工具窗口有两个窗格，左侧窗格显示标签的样式，右侧窗格显示它们的定义。 对于每个标签，RubyMine 会打开一个单独的选项卡。
从工具窗口，您可以导航到源代码中的标签和属性定义。
跳转到标签，请点击左侧窗格工具栏上的
。要跳转到某属性的定义，请在左侧窗格中选择它，然后点击右侧窗格工具栏上的
。
配置语法高亮
您可以根据自己的偏好和习惯配置 CSS-aware 语法高亮。
在 设置 对话框 (Ctrl+Alt+S) 中，前往 。
选择颜色方案，接受从默认设置继承的高亮设置，或按照 颜色和字体 中的描述自定义它们。