代码准备

新建项目选择类型为 LESS，即可创建 LESS 文件（或直接将文件名定为 .less 后缀）

test.less

@width: 200px;
@height: @width / 2;.red-font {color: red;text-align: center;
}
.yellow-bg {background-color: yellow;
}
.blue-bg {background-color: blueviolet;
}
#mydiv {width: @width;height: @height;font-style: italic;position: relative;.red-font();.yellow-bg();
}
#mydiv h1 {position: relative;z-index: 1;
}
#mydiv-content {position: absolute;top: 0;left: 0;width: @width / 2;height: @height;.blue-bg();
}

test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="test.less" rel="stylesheet/less" type="text/css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script><title>Less入门</title>
</head>
<body><div id="mydiv"><h1>Hello World</h1><div id="mydiv-content"></div></div>
</body>
</html>

Less 的官网为 https://less.bootcss.com/

less.min.js 是从 Less 官网的链接地址 https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js

服务端使用Less

官网里指的，在浏览器环境中使用 Less，实际指的是 服务端浏览器环境。如果直接双击打开 html，会报错，因为浏览器端JS无法访问本地路径
相关插件

在浏览器中直接打开 html 的插件 —— open in browser
将网页挂到本地服务器上打开 —— Live Server
在 html 文件上右击，Open with Live Server 即可展示出 Less 的效果了

客户端使用Less

Easy LESS 插件

客户端使用 Less 的原理是，先通过插件，将 Less 样式表编译成对应的 Css 样式表。然后在 html 文件中引用对应的 css 文件

首先需要安装 Easy LESS 插件
编辑 settings.json 文件，对 Easy Less 进行设置

在 settings.json 的末尾添加如下语句

"less.compile": {"compress": false,  //是否压缩"sourceMap": true,  //是否生成map文件，有了这个可以在调试台看到less行数"out": "..\\css\\", //自动编译成的css文件保存在哪个目录"outExt": ".css"    //输出文件的后缀，小程序可以写'wxss'
}

随便打开一个 less 文件，然后使用 Ctrl+S 保存，之后便会自动创建 settings.json 的 less.compile.out 参数指定的文件夹，然后在该文件夹中创建同名的，编译好的 css 文件。如设置 less.compile.sourceMap: true 的话，就会额外生成一个 map文件，用于调试

然后修改原先的 html 文件

对Js的引用可以删掉了
stylesheet 对 less 的引用可以转成对 css 的引用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="css/test.css"><title>Less入门</title>
</head>
<body><div id="mydiv"><h1>Hello World</h1><div id="mydiv-content"></div></div>
</body>
</html>

但是 Easy Less 有个BUG。无法自动解析 “除法” 运算，因此需要将 “除法” 转换为 “乘法”

通过 node.js

首先按照官网说的，先安装 node.js
然后通过 npm 工具，安装 less npm install -g less
通过 lessc 命令，将 less 编译为 css lessc <less文件> <css文件>

这里报了个 PSSecurityException 错误，这是因为 PowerShell 默认的权限级别是Restricted，不允许执行PS脚本（即.ps1文件）

执行权限命令

Get-ExecutionPolicy 用来查看当前执行权限
Set-ExecutionPolicy <权限名> 用来修改权限

这里，将执行权限修改为 RemoteSigned 或者 Unrestricted 即可（这个只要设置一次即可，后面重新打开就会一直是那个设置的权限）

npm install -g less
Set-ExecutionPolicy RemoteSigned
lessc less\test.less less\test.css

VSCode 使用 LESS相关推荐

centos使用镜像源轻松配置golang+vscode的方法
Title:centos使用镜像源轻松配置golang+vscode的方法 (阅读时间:约5分钟) 零.序言最近笔者在上一门名为服务计算的课程,在老师的作业博客中提到,安装golang+vscode ...
简单图文配置golang+vscode【win10/centos7+golang helloworld+解决install failed等情况】
博客目录(阅读时间:10分钟) 一.win10 0.系统环境 1. win10配置golang环境 ①下载相关软件 ②创建gowork工作空间 ③配置环境变量(GOPATH+PATH) ④验证环境配置 ...
Github配置(git+vscode+python+jupyter)
①下载git 打开 git bash 工具的用户名和密码存储 $ git config --global user.name "Your Name" $ git config -- ...
使用 Go module 后 VScode 智能提示不生效解决方案
关闭 Use Language Server 如果你对这个选项有打钩先取消,然后重启 vscode . 安装 gocode go install github.com/stamblerre/gocod ...
VSCode 安装 Go 插件、gopls 是个什么东东
原文地址: VSCode 开发 Go 程序也可以和 GoLand 一样强大 VSCode 建议你启用 gopls,它到底是个什么东东?
使用vscode连接服务器写代码指南
1 安装vscode 2 vscode中安装remote-ssh 3 按F1->输入SSH->选择相关选项(选择Connect to Host[图1],如果之前没有连接过服务器,可以选择A ...
vscode 高效使用指南
快捷键高频使用 Ctrl+Shift+P,F1 展示全局命令面板折叠所有区域代码的快捷: ctrl + k ,ctrl + 0 ;先按下 ctrl 和 K,再按下 ctrl 和 0 ; ( 注意这 ...
kali安装vscode和无法启动解决方法
一.安装 1)源安装使用如下命令来增加源: curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > m ...
2021年大数据ELK（九）：使用VSCode测试分词器
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录使用VSCode测试分词器一.准备VSCode开发环境 1.打开VSCode ...
golang 同一个包中函数互相调用报错 undefined 以及在 VSCode 中配置右键执行整个包文件
1. 代码结构 demo 文件夹下有两个文件,分别为 hello.go 和 main.go ,结构如下: wohu@wohu:~/GoCode/src$ tree demo/ demo/ ├── he ...

VSCode 使用 LESS