postcss-less 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
postcss-less 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
postcss-less 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
postcss-less 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
postcss-less 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织
地区 不详
投 递 者 Alias_Travis
适用人群 未知
收录时间 2021-09-27

软件简介

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

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2019/04/27 16:07

PostCSS 基本用法

1、postcss相关网站 https://www.postcss.com.cn/ https://www.ibm.com/developerworks/cn/web/1604-postcss-css/ 2、介绍 PostCSS 的主要功能只有两个:第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构(Abstract Syntax Tree,AST),第二个就是调用插件来处理 AST 并得到结果。 PostCSS 一般不单独使用,而是与已有的构建工具进行集成。PostCSS 与主流的构建工具,如 Webpack、Grunt 和 Gulp 都可以...

0
0
发表了博客
2018/09/13 11:12

PostCSS理解与运用

1、PostCSS是什么 它可以被理解为一个平台,可以让一些插件在上面跑 它提供了一个解析器,可以将CSS解析成抽象语法树 通过PostCSS这个平台,我们能够开发一些插件,来处理CSS。热门插件如autoprefixer 安装 npm install -g postcss-cli //全局安装postcss npm install -g autoprefixer //全局安装autoprefixer //找到项目,本地安装 npm install postcss --save-dev npm install autoprefixer --save-dev 2、能解决...

0
0
发表了博客
2020/07/09 12:21

浅谈fis3与postcss

Fis3构建工具 Fis3的安装 npm install -g fis3 查看fis3 fis3 –v fi3构建工具新建文件夹 新建一个根目录 进入根目录输入fis3 init指令初始化 发布以及监听文件 指令:fis3 release –w –d ./project(project自己建的文件) 建文件夹时,防止递归,加上配置文件 // FIS3 会读取全部项目目录下的资源,如果有些资源不想被构建,通过以下方式排除。 fis.set('project.ignore', [ 'output/**', 'node_modules/**', '.git/**', '.s...

0
0
发表于大前端专区
2018/07/17 11:10

postcss替换sass-loader

实际需求: 已经使用了postcss autoprefixer ,而且sass-loader又依赖于node-sass,而且node-sass又是一堆坑(比如centos升级node6->node8后的安装权限问题),所以想简单使用Postcss 处理sass 选取的插件: autoprefixer postcss-advanced-variables postcss-nested postcss-preset-env postcss-extend postcss-partial-import 基本能做到替换之前sass-loader的功能 遇到的坑: 使用这些插件后css中不要使用双斜线(eg://)写注...

0
0
发表了博客
2019/06/29 19:16

webpack的postcss的基本应用

PostCss是什么? PostCSS在webpack中的基本应用 一、PostCss是什么? 如果有深入学习PostCss需求的话可以参考大漠的资料:https://www.w3cplus.com/blog/tags/516.html 大概来说postcss是一个用来处理css的系统程序,它不是css语处理器,也不是css后处理后处理器,也不是新的语法,也不是优化工具。postcss本身只做两件事,将css转换成css抽象语法树,可以简单的理解为将css转换成js;postcss做的第二件事就是调用插件来处理抽象...

0
0
发表了博客
2019/09/29 17:22

postcss-px-to-viewport

autoprefixer: {}, 'postcss-px-to-viewport': { unitToConvert: 'px', //将要转化的单位 viewportWidth: 750, //(Number)视图的宽度 unitPrecision: 3, //(Number)指定`px`转换为视窗单位值的小数位数,默认是5 propList: ['*'], //(Array)指定可以转换的css属性,默认是['*'],代表全部属性进行转换 viewportUnit: 'vw', //(String)指定需要转换成的视窗单位,默认vw fontVie...

0
0
发表于大前端专区
2019/12/28 09:58

解决No PostCSS Config found错误

在项目根目录新建postcss.config.js文件,并对postcss进行配置 编辑内容: module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } } 然后npm run dev,果然成功运行

0
0
发表了博客
2019/08/16 11:37

vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;

如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem 。 为什么这三个中要推荐 postcss-plugin-px2rem呢?   因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性,它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换。   所以我们可以利用这个特性,把项目中的 node_module 文件夹排除掉。这样如果我们项目中是用了,前端UI框架的话,就不会吧UI框架...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部