LESS 是一种用于编写 CSS 的预处理器，它可以让我们在 CSS 的基础上添加变量、混合、嵌套等功能，使样式代码更加简洁、灵活和易于维护。而 WebStorm 是一款优秀的前端开发工具，它提供了很多便于开发的特性，如代码提示、语法检查、自动补全等。在 WebStorm 中使用 LESS 可以提高我们的开发效率，本文将介绍如何在 WebStorm 中快速编写 LESS 样式。
1. 安装 LESS 插件
在 WebStorm 中，我们需要安装 LESS 插件才能使用 LESS 语法。打开 WebStorm，点击 File->Settings，在左侧面板中选择 Plugins，然后搜索 LESS 插件，点击安装。
安装成功后，重启 WebStorm。
2. 新建一个 LESS 文件
在 WebStorm 中，我们可以新建一个 LESS 文件来编写样式，也可以将已有的 CSS 文件转换为 LESS 文件。在新建 LESS 文件时，需要注意文件后缀名为 .less。
新建一个 LESS 文件后，可以编写样式代码。下面是一个简单的 LESS 样式代码片段：
// javascriptcn.com code example
@primary-color: #268bd2;
body {
color: @primary-color;
}
a {
color: darken(@primary-color, 10%);
}在这个示例中，我们定义了一个变量 @primary-color，然后在 body 和 a 元素中使用了该变量。
3. 配置 LESS 文件自动编译
在 WebStorm 中，我们可以通过配置实现 LESS 文件自动编译，这样在保存 LESS 文件时会自动将 LESS 代码编译为 CSS 代码。这样做可以避免手动编译和覆盖原有的 CSS 文件。
首先，我们需要在 WebStorm 中打开 LESS 文件所在的项目。然后，点击 File->Settings，在左侧面板中选择 Tools->File Watchers，然后点击“+”按钮，选择 LESS。
接着，我们需要设置 LESS 编译的参数，如输出目录、压缩等。下面是一个示例配置：
在这个示例中，我们设置了输出目录为 css，生成的 CSS 文件名与 LESS 文件名相同，压缩生成的 CSS 代码。当 LESS 文件保存时，WebStorm 将自动编译该文件，并将编译结果保存到指定的输出目录。
4. 使用 WebStorm 提供的 LESS 功能
在 WebStorm 中，我们可以使用很多便利的 LESS 功能，如代码提示、语法检查、自动补全等。下面简单介绍一些常用的功能。
代码提示
在 WebStorm 中，当我们编写 LESS 代码时，可以通过代码提示来快速输入代码。例如，在输入变量时，可以按下 Ctrl+Space 触发代码提示。
语法检查
WebStorm 可以对 LESS 代码进行语法检查，通过检查可以发现并修正代码中的错误。实时语法检查默认是启用的，如果需要关闭可以在 File->Settings->Editor->Inspections 中找到相应的检查项进行关闭。
自动补全
在编写 LESS 代码时，WebStorm 还可以实现自动补全功能。例如，当我们在输入 . 或 # 时，WebStorm 将自动列出 CSS 类名或 ID 名称供我们选择。
结论
WebStorm 是一个非常优秀的前端开发工具，可以帮助我们更快捷地编写 LESS 样式。通过安装 LESS 插件和配置 LESS 文件自动编译，我们可以在 WebStorm 中更加高效地编写样式代码，提高我们的开发效率。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672eab31eedcc8a97c8a6a04