代码准备

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

vs 支持 less 语法嘛 vscode 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

vs 支持 less 语法嘛 vscode less_less_02

服务端使用Less

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

vs 支持 less 语法嘛 vscode less_vs 支持 less 语法嘛_03

相关插件

  1. 在浏览器中直接打开 html 的插件 —— open in browser
  3. 将网页挂到本地服务器上打开 —— Live Server

    4. vs 支持 less 语法嘛 vscode less_less_04

  4. 在 html 文件上右击，Open with Live Server 即可展示出 Less 的效果了

    5. vs 支持 less 语法嘛 vscode less_less_05


客户端使用Less

Easy LESS 插件

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

首先需要安装 Easy LESS 插件

vs 支持 less 语法嘛 vscode less_html_06

编辑 settings.json 文件，对 Easy Less 进行设置

vs 支持 less 语法嘛 vscode less_css_07


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

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

vs 支持 less 语法嘛 vscode less_css_08

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

vs 支持 less 语法嘛 vscode less_vs 支持 less 语法嘛_09


然后修改原先的 html 文件

  1. 对Js的引用可以删掉了
  2. 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。无法自动解析 “除法” 运算，因此需要将 “除法” 转换为 “乘法”

vs 支持 less 语法嘛 vscode less_vs 支持 less 语法嘛_10

vs 支持 less 语法嘛 vscode less_less_11

通过 node.js

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

vs 支持 less 语法嘛 vscode less_vscode_12


这里报了个 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

vs 支持 less 语法嘛 vscode less_css_13