安装与使用 | iGmaBlog

搜索文档

安装

在 Node 环境中使用
sh
```
npm i less -g
```
1
在浏览器中使用
VSCode 插件 Easy LESS
创建一个 .less 文件，保存该文件后 Easy LESS 会在同级目录下创建一个同名的 .css 文件，接下来只需要编辑 .less 文件即可，每次保存都会影响 .css 文件

注释

语法

less

// 单行注释
/*
    多行注释1
    多行注释2
*/

单行注释不会被编译，最后生成的 .css 文件如下：
css
```
/*
    多行注释1
    多行注释2
*/
```
1
2
3
4

定义变量

在 less 中通过 @ 定义变量。

语法

less

// 定义
@width: 200px;
@height: 100px;
@color: #888;
@bgcolor: pink;

// 使用
.app {
    width: @width;
    height: @height;
    color: @color;
    background-color: @bgcolor;
}

创建 .html 文件，并引入 .css 文件。注意：引入的是 .css 不是 .less

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="./index.css">
        <title>Document</title>
    </head>
    <body>
        <div class="app">Hello Less</div>
    </body>
</html>

运行结果