VSCode 使用 LESS

代码准备

新建项目选择类型为 LESS,即可创建 LESS 文件(或直接将文件名定为 .less 后缀)
VSCode 使用 LESS_第1张图片
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 Worldh1>
        <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
VSCode 使用 LESS_第2张图片

服务端使用Less

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

  1. 在浏览器中直接打开 html 的插件 —— open in browser
  2. 将网页挂到本地服务器上打开 —— Live Server
    VSCode 使用 LESS_第4张图片在 html 文件上右击,Open with Live Server 即可展示出 Less 的效果了
    VSCode 使用 LESS_第5张图片

客户端使用Less

Easy LESS 插件

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

首先需要安装 Easy LESS 插件
VSCode 使用 LESS_第6张图片编辑 settings.json 文件,对 Easy Less 进行设置
VSCode 使用 LESS_第7张图片
在 settings.json 的末尾添加如下语句

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

VSCode 使用 LESS_第8张图片随便打开一个 less 文件,然后使用 Ctrl+S 保存,之后便会自动创建 settings.jsonless.compile.out 参数指定的文件夹,然后在该文件夹中创建同名的,编译好的 css 文件。如设置 less.compile.sourceMap: true 的话,就会额外生成一个 map文件,用于调试
VSCode 使用 LESS_第9张图片
然后修改原先的 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 Worldh1>
        <div id="mydiv-content">div>
    div>
body>
html>

但是 Easy Less 有个BUG。无法自动解析 “除法” 运算,因此需要将 “除法” 转换为 “乘法”
VSCode 使用 LESS_第10张图片VSCode 使用 LESS_第11张图片

通过 node.js

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

VSCode 使用 LESS_第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

VSCode 使用 LESS_第13张图片

你可能感兴趣的:(#,VS,Code,vscode,less,css)