Webstorm配置less

一、介绍

Less是一种动态样式语言，属于css预处理语言的一种。它使用类似CSS的语法为CSS的赋予了动态的特性，如变量、继承、运算、函数等，更方便css的编写和维护实现css模块化。less 可以在多种语言，环境中使用，包括浏览器端、桌面客户端、服务端。
通过css预处理技术可以很好的提升css的编程性，提高css代码的开发效率和可维护性，目前比较热门的相关技术有Sass、Less CSS、Stylus、Compass等

官网中文手册：https://less.bootcss.com/

二、安装less

1.部署node.js环境

官网：https://nodejs.org/en/download/

安装过程略，直接下一步下一步即可。

2.安装Less

win+R cmd进入shell，CD切入倒安装目录，默认为C:\Program Files\nodejs

cd C:\Program Files\nodejs
npm install -g less

3.打开webstorm

WebStorm左上角---->files---->Settings---->Tools---->File Watchers----->点击添加

4.新建less文件验证

选择txt文件，随后手动添加后缀名。

三、修改导出CSS路径

复制下列内容

$FileName$
$FileParentDir$\css\$FileNameWithoutExtension$.css
--source-map

粘贴到此处

注：

$FileParentDir(less)$ 是获取 less 目录的路径

$FileDirPathFromParent(less)$ 是获取 less 文件到 less 目录的路径

$FileNameWithoutExtension$ 是获取 less 文件不带后缀的名字

四、less的用法

4.1 嵌套