# Stylus

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。
>
>
>
> 所需插件：
>
>
>
> `Stylus` ，  `File Watchers`  -  在   设置 | 插件   页面上安装插件。 插件仅在具有 Ultimate 订阅的 IntelliJ IDEA 中可用。

IntelliJ IDEA 让您实时将您的 [Stylus](http://stylus-lang.com/)代码转换为 CSS。

## 开始之前

Procedure:

1. 请确保您的计算机上安装了 [Node.js](http://nodejs.org/)。

2. 将  Stylus  和  File Watchers  插件安装到   设置 | 插件   页面上，如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo) 中所述。 插件仅在具有 Ultimate 订阅的 IntelliJ IDEA 中可用。

## 安装 Stylus

Procedure:

* 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`npm install --global stylus`

从 [Stylus 官方网站](http://stylus-lang.com/#get-styling-with-stylus)了解更多信息。

## 编译 Stylus 代码

要自动编译您的代码，您需要安装一个编译器并配置一个 [Stylus File Watcher](#stylus_create_file_watcher)，它将跟踪文件的变化并运行编译器。

打开文件时，IntelliJ IDEA 会检查当前项目中是否有适用的文件关注者。 如果已配置此类文件关注者但其已禁用，IntelliJ IDEA 会显示一个弹出窗口，告知已配置的文件关注者并建议启用它。

如果当前项目中已配置并启用了适用的文件关注者，IntelliJ IDEA 会在 [新建关注者对话框](new-watcher-dialog.html) 中指定的事件发生时自动启动编译器。

* 如果选中 自动保存已编辑的文件以触发监视器 复选框，只要源代码发生任何更改，就会调用文件关注者。

* 如果清除 自动保存已编辑的文件以触发监视器 复选框，文件关注者会在保存时（ `文件 | 全部保存` 、 `Ctrl+S` (Windows), `⌘ S` (macOS), `⌘ S` (IntelliJ IDEA Classic (macOS)), `⌘ S` (macOS System Shortcuts), `Ctrl+S` (XWin), `Ctrl+S` (GNOME), `Ctrl+S` (KDE), `Ctrl+X, Ctrl+S` (Emacs), `Ctrl+S` (Sublime Text), `⌘ S` (Sublime Text (macOS)), `Ctrl+Shift+S` (Visual Studio), `⌘ ⇧ S` (Visual Studio (macOS)), `Ctrl+S` (NetBeans), `Ctrl+S` (Eclipse), `⌘ S` (Eclipse (macOS))）或将焦点从 IntelliJ IDEA 移开时（帧停用时）启动。

有关更多信息，请参阅 [File Watchers](using-file-watchers.html)。

IntelliJ IDEA 会创建一个包含生成输出的单独文件。 源 Stylus 文件的名称和扩展名为  `.css` 。 生成的文件的位置在 [新建关注者对话框](new-watcher-dialog.html) 的   要刷新的输出路径   字段中定义。 不过，在   项目树   中，它们显示在源文件下方，该源文件现在显示为一个节点。

Procedure: 创建一个 File Watcher

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))）中，点击   File Watchers   下的   工具  。 [File Watchers 页面](settings-tools-file-watchers.html) 显示了已配置的 File Watchers 列表。

2. 点击 ![添加按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg) 或按 `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (NetBeans), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS))，然后从列表中选择   Stylus   预定义模板。

3. 在   程序   字段中，指定可执行文件的路径：

* `stylus` 适用于 macOS 和 Unix。

* `stylus.bat` 适用于 Windows。

请手动输入路径或点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.ellipsis.svg)，然后在打开的对话框中选择文件位置。

4. 按照 [File Watchers](using-file-watchers.html) 中的说明进行操作。

## 配置语法高亮

您可以根据个人偏好和习惯配置 Stylus-aware 语法高亮。

Procedure:

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 颜色方案 | Stylus` 。

2. 选择配色方案，接受从默认设置继承的高亮设置，或按照 [颜色与字体](configuring-colors-and-fonts.html) 中的说明进行自定义。

## 配置代码样式

Procedure:

1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择  `编辑器 | 代码风格 | 样式表 | Stylus` 。

2. 使用 [代码样式。 Stylus](code-style-stylus.html) 上的控件配置 Stylus 文件中的代码样式。

## See also

### 过程

[File Watchers](using-file-watchers.html) [压缩 CSS](compressing-css.html) [Sass、SCSS、Less 和 PostCSS](transpiling-sass-less-and-scss-to-css.html) [在 Compass 应用程序中的 Sass 和 SCSS](transpiling-compass-to-css.html)

### 参考

[File Watchers](settings-tools-file-watchers.html) [新建监视器对话框](new-watcher-dialog.html)

### 外部链接