VSCode 使用 LESS

福州司马懿

已于 2022-02-16 14:37:25 修改

阅读量3.7k

点赞数 6

分类专栏： # VS Code 文章标签： vscode less css

于 2022-02-15 16:49:50 首次发布

转载请注明出处——https://blog.youkuaiyun.com/chy555chy

本文链接：https://blog.youkuaiyun.com/chy555chy/article/details/122943611

版权

VS Code 专栏收录该内容

7 篇文章

订阅专栏

代码准备

新建项目选择类型为 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

在这里插入图片描述