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 变量被严格解析 - 冒号 ( :) 必须紧跟在变量名之后。

编辑分享