一、介绍

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 嵌套

Webstorm配置less相关推荐

webstorm配置，快捷键console.log，中文字体，快捷键配置等
webstorm配置一.配置中文字体二.选中了一个变量名,同名称高亮显示配置三.快捷键相关配置四.样式预编译,自动转成css或wxss mac的程序路径:/usr/local/lib/node ...
[效率提升]webstorm配置Prettier
webstorm配置Prettier 配置好prettier发现vue文件并没有格式化代码,原因就是webstorm默认没有支持,现配置之. 1.在插件市场下载prettier 2.点击setting ...
webstorm配置环境变量_Webstorm 配置与使用 Less
* 安装完NodeJs * 将npm文件夹保存在C:\Users\Administrator\AppData\Roaming\下 * 在webStrom中,setting -> Tools -& ...
Webstorm配置本地服务器
Webstorm配置本地服务器这样我们就可以让在同一个局域网下的同事或者手机预览前端页面了 (本人是在Mac环境下配置的,其实都一样) 1.端口号更改和可接受外部连接进入Webstorm的Pre ...
WebStorm配置启动Vue项目
[原文链接]WebStorm配置启动Vue项目 (1)使用WebStorm打开已有的Vue项目,或者参考 Vue创建项目快速体验创建一个新的Vue项目 (2)点击[View]-[toolbar] ( ...
webstorm配置环境变量_webstorm中配置nodejs环境及npm步骤详细解说
这次给大家带来webstorm中配置nodejs环境及npm步骤详解,webstorm中配置nodejs环境及npm的注意事项有哪些,下面就是实战案例,一起来看一下. --nodejs安装及环境配置 ...
webstorm配置和使用
更新时间:2020年08月14日08:59:12 <我的博客地图> <我的博客列表> 程序员,21世纪最高大上的职业之一,作为80后末尾的一名硕士毕业后择业进入IT行业的程序员 ...
[效率提升]webstorm配置Prettier：代码自动格式，格式化时清除空行，修改使用代码模板
Prettier介绍: 一.安装方法: 方法一: 1.在webstorm的插件市场,搜索并下载prettier 方法二: 2.可以用npm全局安装,然后在webstom里面配置路径: 全局安装pret ...
webstorm配置Prettier
Prettier是代码美化工具,配置到webstorm后,可以在你保存代码的时候,自动帮你美化代码,然后配合Eslint规则,爽得不要不要的,可以节省你大量的时间,美滋滋!~废话少说,上酸菜! 一.准 ...
WebStorm 配置SVN 提交代码“Commit dialog:Local Changes ReFrech”卡死
简介 WebStorm是JetBrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为"Web前端开发神器" 笔者也是最近开发改用的WebStorm.原因呢 ...

Webstorm配置less

WebStorm配置less

一、介绍

二、安装less

三、修改导出CSS路径

四、less的用法

4.1 嵌套

Webstorm配置less相关推荐

最新文章

热门文章