postcss-less用 PostCSS 语法解析 LESS 的模块-技术圈

postcss-less用 PostCSS 语法解析 LESS 的模块

联合创作 · 2023-09-19 19:46

postcss-less 是一个用 PostCSS 语法解析 LESS 的模块

注意: 这个模块需要 Node v6.14.4 以上版本。poscss-less 不是 LESS 编译器。对于 LESS 的编译，请使用 LESS 的官方工具集。

安装

使用 npm：

npm install postcss-less --save-dev

使用方法

postcss-less 最常见的用途是将 PostCSS 的转换直接应用到 LESS 的源代码中。

const syntax = require('postcss-less');
postcss(plugins)
  .process(lessText, { syntax: syntax })
  .then(function (result) {
    result.content // LESS with transformations
});

LESS 的具体解析

`@import`

支持解析 LESS 特定的 @import 语句和选项

@import (option) 'file.less';

AST将包含一个 AtRule 节点，该节点具有:

一个 import: true 属性
一个 filename: 属性，包含导入的文件名
一个 options: 属性，包含任何指定的导入选项

内联注释

支持对CSS中的单行注释进行解析

:root {
    // Main theme color
    --color: red;
}

AST 将包含一个带有 inline: true 属性的 Comment 节点。

变量

支持 LESS 变量的解析

@link-color: #428bca;

AST 将包含一个具有variable: true属性的AtRule节点。

注意：LESS 变量被严格解析 - 冒号 ( :) 必须紧跟在变量名之后。

编辑分享