postcss-less

用 PostCSS 语法解析 LESS 的模块
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 网页开发工具
软件类型 开源软件
地区 不详
投 递 者 咸承教
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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

  • 发布一个 PostCSS 插件:postcss-less2scss,可以将 Less 文件转换为 Scss。 * GitHub:https://www.npmjs.com/package/postcss-less2scss * NPM:https://www.npmjs.com/package/postcss-less2scss 转换变量 转换变量的定义和使用 不属于任何一个 Rule 的变量 L

  • 适配方案: 一、 动态设置根元素font-size 、DOM 元素rem 实现方式: 1、 开发时使用rem 2、 开发时使用px、修改配置文件 使用postcss-pxtorem 将PX 转 rem, 实现适配 步骤: 安装:npm install postcss-pxtorem --save-dev 修改:webnpack.config.js require('postcss-

  • 1. 使用postcss-px2rem或者postcss-plugin-px2rem讲vue项目的px全部转换未rem适配。 2. 下载: npm install --save postcss-px2rem npm install --save postcss-plugin-px2rem 3. 使用:在vue.config.js中 module.exports = { publicPat

  • 通过使用create-react-app创建的react项目,添加了less预处理器后,可以正常编译,没有问题,但是项目时移动端项目,我们需要做移动端的适配,将px单位转化为rem,具体的方式,根据百度来的方式,配置上了,结果报了异常了:如下: ./src/pages/login/login.less (./node_modules/css-loader/dist/cjs.js??ref--6-o

  • 1.介绍 postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位。 前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用。 介绍amfe-flexible amfe-flexible是配置可伸缩布局方案,

  • 通过postcss-pxtorem来实现自动渲染px至rem的开发与生产工作 而不需要再手动计算 实现方式 postcss-pxtorem:将px转换为px amfe-flexible:为html、body添加font-size,窗口调整时候重新设置font-size 安装与使用 安装 npm install amfe-flexible --save npm install postcss-pxt

  • 在我们打包css的时候难免会遇到css的兼容性问题 此时webpack提供了postcss-loader和对应插件postcss-preset-env 而这两个东西的使用在webpack4和webpack5有些许不同 rules: [{ test: /\.css$/, use: [

  • 一、适配方案 由于最近整的项目都是钉钉或者企业微信这类的三方平台为容器的第三方应用,这就导致了不管是pc端还是移动端都需要做适配,本来是想使用rem方案,但是我怎么能容忍px之外的计量单位呢,所以就有了以下方案: vue2项目结合postcss-px-to-viewport适配 二、配置 版本很重要,因为这些版本问题,出现了很多很多的问题 当前项目基本环境: node:v16.14.2 npm:

  • 不需要 process.env.NODE_ENV = ‘development’; 这样写 引入 const PostcssPresetEnv = require(‘postcss-preset-env’); **在postcssOptions里面写 { loader:"postcss-loader", option

 相关资料
  • 由vue-loader 处理的 CSS 输出,都是通过 PostCSS 进行作用域重写,你还可以为 PostCSS 添加自定义插件,例如 autoprefixer 或者 CSSNext。 使用配置文件 vue-loader 支持通过 postcss-loader 自动加载同一个配置文件: postcss.config.js .postcssrc package.json 中的 postcss 使用

  • vue-loader处理的任何CSS输出都通过PostCSS进行管道传输以进行作用域CSS重写。您还可以向过程添加自定义PostCSS插件,例如autoprefixer 或 CSSNext。 使用配置文件 从11.0开始vue-loader支持自动加载postcss-loader支持的相同PostCss配置文件: postcss.config.js .postcssrc postcss field

  • PostCSS 是使用 JS 插件来转换 CSS 的工具,支持变量,混入,未来 CSS 语法,内联图像等等。 PostCSS 已经被许多大公司使用:谷歌,推特,阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件是最流行的 CSS 处理器插件之一。 PostCSS 可以作为预处理器使用,类似:Sass, Less 和 Stylus。但是 PostCSS 是模块化的工具,比之

  • PostCSS plugin for wxss. 专门为 wxss 格式化处理的的一个 postcss 插件,特别是在做 css 转 wxss 的时候好用到爆。 实现的功能 清理 wxss 不支持的选择器。 清理 wxss 不支持的注释。 转换 rem 单位到 rpx。 转换 Web 的标签选择器到小程序的 class 选择器。 style scoped(postcss插件部分)。 例子 /* 被

  • postcss-import PostCSS plugin to transform @importrules by inlining content. This plugin can consume local files, node modules or web_modules.To resolve path of an @import rule, it can look into root

  • postcss-each 是一个 postcss 的插件,用来迭代数值。 迭代数值: @each $icon in foo, bar, baz {  .icon-$(icon) {    background: url('icons/$(icon).png');  }} .icon-foo {  background: url('icons/foo.png');}.icon-bar {  back