精华内容
下载资源
问答
  • postcss7和postcss8的差异

    2021-08-13 15:16:25
    postcss是什么?postcss7版本和8版本的不同点?


    1. postcss是什么

    PostCSS 是解析器,它将 CSS 解析为对象树(AST)。然后插件改变了这棵树,最后PostCSS 从一个修改过的对象树生成一个新的 CSS 字符串。

    PostCSS 不是一个预处理器,也不是一种添加语法糖的方式,它是一个用于创建 CSS 工具的框架,是一个用 JavaScript 插件来转换样式的工具。一个 PostCSS 插件是一个接收并且通常从 PostCSS 解析器转换 CSS AST 的函数。PostCSS 让任何有 JavaScript 经验的人都可以创建自己的插件。

    2. postcss7

    2.1 编写插件

    编写适用于postcss7.x版本的插件语法:

    // 需要导入postcss
    const postcss = require('postcss');
    
    module.exports = postcss.plugin('postcss-merge2', (opts = {}) => {
        return (root, result) => {
            root.walkRules(rule => {
                ...
            })
        }
    })
    

    3. postcss8带来的新特性

    插件开发者现在可以在postcss8.0中选择使用一个新的 API,这个 API 可以提高构建速度,并减少其工具的最终用户的依赖大小。

    3.1 编写插件

    编写适用于postcss8.x的插件使用新的插件 API,不需要导入 PostCSS,会得到所有的类和方法作为函数的第二个参数:

    - const { decl: Declaration } = require('postcss')
    
      module.exports = {
        postcssPlugin: 'postcss-example',
    -   Once (root) {
    +   Once (root, { Declaration }) {}
      }
      module.exports.postcss = true
    

    完整示例:

    // 不需要导入postcss
    module.exports = (opts = {}) => {
      return {
        postcssPlugin: 'PLUGIN NAME',
        Rule(rule, { Declaration }) {
          
        },
        Declaration (decl) {
          
        }
      }
    }
    
    module.exports.postcss = true
    

    3.2 更小的节点模块

    之前,每个插件的依赖关系中都有 PostCSS。这可能会导致在 node_modules 中有多个 PostCSS 副本的问题:

    node_modules/
      autoprefixer/
        node_modules/
          postcss/       ← 重复
      stylelint/
        node_modules/
          postcss/       ← 重复
      postcss-normalize/
        node_modules/
          postcss/       ← 重复
    

    postcss8.0将确保在 node_modules 中只有一个 PostCSS 实例。操作步骤是:通过编辑 package.json 将 postcss8移动到 peerDependencies,这样可以控制最终用户的 node_ 模块的大小: 现在,所有插件都将使用相同版本的 postcss 作为依赖。

    {
        "dependencies": {
      -   "postcss": "^7.0.10"
        },
        "devDependencies": {
      +   "postcss": "^8.0.0"
        },
      + "peerDependencies": {
      +   "postcss": "^8.0.0"
      + }
    }
    

    3.3 更快的 CSS 构建

    之前每一个 PostCSS 插件都在这棵树中穿行。通常一个插件只是寻找一些属性,但是它仍然需要扫描整个树。如果构建工具中有很多插件(或者你使用一个预设插件,里面有很多插件,比如 postcss-preset-env 或者 stylelint) ,大部分的处理时间都会花在插件上,一遍又一遍地遍历树。

    // walkDecls方法将遍历整个树以查找所有声明节点
    root.walkDecls(decl => {
      if (decl.prop === 'will-change') {
        decl.cloneBefore({ prop: 'backface-visibility', value: 'hidden' })
      }
    })
    

    postcss8.0提供一个用于插件的访问者 API,在postcss8.0中所有插件都可以共享 CSS 树的单次扫描。 它使 CSS 处理速度提高了 20%。 要使用单次扫描,需要删除 root.walk* 调用并将代码移动到插件对象中的 Declaration()、Rule()、AtRule() 或 Comment() 方法。

      module.exports = {
        postcssPlugin: 'postcss-dark-theme-class',
    -   Once (root) {
    -     root.walkAtRules(atRule => {
    -       // Slow
    -     })
    -   }
    +   AtRule (atRule) {
    +     // Faster
    +   }
      }
      module.exports.postcss = true
    

    4. 注意版本差异带来的问题

    4.1 问题描述

    现在要编写一个postcss的插件,将css中一个选择器下分开书写的margin、padding等属性合并在一起,并需要将插件集成到现有的项目中去。

    例如:

    div {
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 10px;
      margin-right: 10px;
    
      /* 合并后 */ 
      margin: 10px;
    }
    

    我首先创建了一个新的项目,安装postcss(安装时没有指定版本,它默认会安装最新版,当前postcss的最新版本是8.3.6),查阅资料写插件……写好之后可以正常运行。

    但是把插件放到现有的项目中后就失效了,转换不成功。非常奇怪。

    后来发现项目中使用的postcss是7.x版本,于是我尝试着将版本升到8,然后插件就可以正常运行了。

    4.2 原因

    前边有介绍到编写postcss7.x的插件语法和postcss8.x的插件语法是不一样的。

    如果是新手,要编写postcss插件,那么直接去 postcss官网或者postcss的GitHub仓库查资料,它默认会引导我们使用新的插件语法编写适用于postcss8.x的插件。但是,如果项目中的postcss版本是7.x,使用新语法编写的插件就可能有问题,出现下方错误,提示需要使用postcss的8版本
    在这里插入图片描述
    此时有两种解决方法

    1. 仍然使用新插件语法编写插件,同时将项目中postcss的版本升为8,参考postcss8.0插件迁移指南
    2. 项目中postcss版本不变,仍然是7.x,此时要使用老的插件语法编写插件,参考postcss7.x版本的插件

    总结:为 postcss7.x创建的插件适用于 postcss8.x,但是为postcss8.x创建的插件不一定适用于postcss7.x。

    5. 资料

    前端学习交流QQ群:862748629 点我加入

    展开全文
  • 安装postcss-pxtorem出现问题...解决vue中安装postcss-pxtorem插件,报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.” 解决: 升postcss版本或降postcss-pxtorem版本 npm i postcss-pxtorem@5.1.1

    安装postcss-pxtorem出现问题

    解决vue中安装postcss-pxtorem插件,报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”

    在这里插入图片描述

    解决:

    升postcss版本或降postcss-pxtorem版本

    npm i postcss-pxtorem@5.1.1
    

    在这里插入图片描述

    展开全文
  • PostCSS真的太好用了!

    2021-06-23 07:58:02
    PostCSS官网有着这样的对PostCSS特性介绍,箭头后面是对应功能的插件及其github地址。increase code readability → AutoprefixerUse tomorrow's CSS ,today! → postcss-cssnextThe end of global CSS → postcss...

    在PostCSS官网有着这样的对PostCSS特性介绍,箭头后面是对应功能的插件及其github地址。

    increase code readability → Autoprefixer

    Use tomorrow's CSS ,today! → postcss-cssnext

    The end of global CSS → postcss-modules

    Avoid errors in your CSS → stylelint

    Powerful grid CSS → lost →lost

    PostCSS是一款使用插件去转换CSS的工具,有许多非常好用的插件,例如autoprefixer,cssnext以及CSS Modules。而上面列举出的这些特性,都是由对应的postcss插件去实现的。而使用PostCSS则需要与webpack或者parcel结合起来。

    在Parcel中使用PostCSS的方法:添加配置文件.postcssrc(JSON),.postcssrc.js或者是postcss.config.js。

    拿 .postcssrc 文件来举例:

    {

    "modules": true,

    "plugins": {

    "autoprefixer": {

    "grid": true

    }

    }

    }

    Plugins 在 plugins 对象中被指定为 key,并使用对象的值定义选项。如果插件没有选项,只需将其设置为 true 即可。

    下面我将对根据官方readme的演示demo,对各个插件进行一一介绍,并添加一些隐藏在插件背后的知识点的说明。

    1.什么是Autoprefixer?

    首先明确一点Autoprefixer是一个根据can i use解析css并且为其添加浏览器厂商前缀的PostCSS插件。

    不加任何vender prefix的通常写法。

    ::placeholder {

    color: gray;

    }

    Autoprefixer将使用基于当前浏览器支持的特性和属性数据去为你添加前缀。你可以尝试下Autoprefixer的demo:http://autoprefixer.github.io/

    由上图可以看出,像没有浏览器差异已经完全符合W3C标准的css2.1属性display,position等,Autoprefixer不会为其加前缀,而像css3属性transform就会为其加前缀,其中--webkit是chrome和safari前缀,--ms则是ie的前缀,像firefox由于已经实现了对transform的W3C标准化,因此使用transform即可。

    因此Autoprefixer是一个非常有用的加速前端开发的一个工具,但是它需要基于PostCSS去发挥作用。

    2.什么是postcss-cssnext?

    postcss-cssnext语法input:

    :root {

    --fontSize: 1rem;

    --mainColor: #12345678;

    --centered: {

    display: flex;

    align-items: center;

    justify-content: center;

    };

    }

    body {

    color: var(--mainColor);

    font-size: var(--fontSize);

    line-height: calc(var(--fontSize) * 1.5);

    padding: calc((var(--fontSize) / 2) + 1px);

    }

    .centered {

    @apply --centered;

    }

    浏览器可用语法output:

    body {

    color: rgba(18, 52, 86, 0.47059);

    font-size: 16px;

    font-size: 1rem;

    line-height: 24px;

    line-height: 1.5rem;

    padding: calc(0.5rem + 1px);

    }

    .centered {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    }

    粗略看了一遍演示demo,http://cssnext.io/playground/,感觉既好用又不好用。

    好用的地方在于通过var()和calc()进行css属性值的计算,也有@apply这样的应用大段规则的写法,也可以借此去了解一些新的css草案特性;不好用的地方在于有一定的学习成本,而且在前期与webpack,gulp以及parcel进行结合时也需要花费一定时间,并且如果有新的前端组成员加入,必须要掌握这种cssnext的语法。

    这样做有些似乎在尝试将css变为一种可以进行逻辑处理的语言,但是我个人认为这对于css这样的灵活的需要具象思维并且需要大量调试的语言来说,工作中使用cssnext不是一个很好的选择,但是工作之余可以作为一个学习新的css草案特性的一个入口,待到纳入标准再去使用。

    刚开始对自己的想法不确定,因此去看了下前辈们的想法,其中顾铁灵对cssnext的想法与我的想法如出一辙:

    CSS 的转译器(transpiler),根据目前仍处于草案阶段、未被浏览器实现的标准把代码转译成符合目前浏览器实现的 CSS。类似 ES6 的 Babel。

    相比之下,Autoprefixer 更加具有实用价值,而 cssnext 实现的功能以后浏览器会怎么实现还存疑,感觉只能玩玩。

    3.什么是postcss-modules?

    在看postcss-modules之前,首先要明确的是CSS Modules的这个概念,关于CSS Modules,可以阅读我翻译的一篇文章:【译】什么是CSS Modules ?我们为什么需要他们?

    postcss-modules则是CSS Modules在PostCSS上的实现插件,这里有一篇插件作者本人写的介绍postcss-modules的文章:PostCSS-modules:make CSS great again!。

    在我有限的开发经验中,只在react中使用过css modules,在vue和angularjs中都没用到过,而且在react中使用时,不会去用postcss-modules这个插件,而是使用react-css-modules这个CSS Modules思想在react中的插件。

    下面将给出最简单的入门例子:

    在React上下文中,CSS Modules可能像下面这样写:

    import React from 'react';

    import styles from './table.css';

    export default class Table extends React.Component {

    render () {

    return

    A0
    B0
    ;

    }

    }

    最后渲染出的组件的标签会是如下形式:

    A0
    B0

    如果对为什么会把class名编译成table__table___32osj这样的形式存在疑惑,需要先把css modules搞清楚:【译】什么是CSS Modules ?我们为什么需要他们?

    如果需要在开发环境或者生产环境结合webpack去使用,那么可以阅读react-css-modules的官方文档寻找答案。

    通过这次探索我们可以发现,前端开发在不同的生态,或者说框架体系下,同一个技术,例如CSS Modules这种将思想,会有对应的实现方式,而我们要掌握的,不仅仅是在某种框架下配置使用的方法,而是这种开发思想。因为学习的核心在于学习知识,而不是无休止的学习工具。

    4.什么是stylelint?

    这是用来强制开发人员按照团队css规范写css样式的工具,类似eslint。

    若想使用,只需要去启用规则即可。

    节选一段stylelint作者博文中的话:

    没错,你的团队可能在某个地方的某条纯文本wiki中记录了团队的代码样式规范。但是,不容忽视的是人的因素:人总是会犯错——总是在无意之间。

    而且即使你很自律地执着遵循某个规范的代码风格,但是你没办法确保你的同事或是你的开源项目的贡献者能够像你一样。没有linter的帮助,你必须人工检查代码样式和错误。而机器存在的意义就是代替人来完成能够自动化实现的任务。linter就是这样的机器,有了linter,你不需要浪费时间检查代码风格,也不需要对每一个代码错误都写一大堆的注释,因此它能够极大程度地减少你花费在代码审阅上的时间。你无须检查代码究竟做了些什么,也无需关心它看起来什么样。

    事实与stylelint作者说的是一样的,即使团队有前端开发规范,也会不经意间写出不符合规范的代码,因为每次写css规则前都去规范check一遍不是谁都能做到的,如果团队再没有code review这一关的话,写出各种各样风格的css代码就是一件必然的事了,短期没有什么影响,当项目变得庞大起来,增加新功能或者重写旧功能将会是一件很痛苦的事。

    我们主要去关注Rules部分:

    sytlelint的规则主要有3类,我将从每一类规则中挑一个拿出来作为示例。

    Possible errors(常见的错误写法,强烈推荐开启)

    Limit language features(弃用一些正确的写法,中等推荐开启)

    Stylistic issues(代码风格代码统一,普通建议开启)

    Possible errors ------ color-no-invalid-hex: 禁止无效的十六进制颜色

    完全形式的十六进制颜色可以是6或者8(7,8位是透明度的值)个字符。同样他们的缩写可以是3或者4个字符。

    options : true

    下面的代码违反规则:

    a { color: #00; }

    a { color: #fff1az; }

    a { color: #12345aa; }

    下面的代码符合规则:

    a { color: #000; }

    a { color: #000f; }

    a { color: #fff1a0; }

    a { color: #123450aa; }

    Limit language features ------ color-no-hex:禁止使用十六进制颜色

    options : true

    十六进制的颜色违反规则:

    a { color: #000; }

    a { color: #fff1aa; }

    a { color: #123456aa; }

    无效的十六进制色同样违规:

    a { color: #foobar; }

    a { color: #0000000000000000; }

    下面的是符合规则的:

    a { color: black; }

    a { color: rgb(0, 0, 0); }

    a { color: rgba(0, 0, 0, 1); }

    Stylistic issues ------ color-hex-case: 自动将十六进制色转换为大写或者小写

    Options string: "lower"|"upper"

    可以使用stylelint "foo/*.css" --fix实现同样的功能。

    "小写"

    下面的代码是违规的:

    a { color: #FFF; }

    下面的是符合规则的:

    a { color: #000; }

    a { color: #fff; }

    "大写"

    下面的代码是违规的:

    a { color: #fff; }

    下面的是符合规则的:

    a { color: #000; }

    a { color: #FFF; }

    5.什么是LostGrid?

    Lost Grid是一个强大的PostCSS网格系统,可与任何预处理器甚至是原生CSS一起使用。

    在这里有非常好的demo展示:http://lostgrid.org/lostgrid-...

    节选2个展示进行说明。

    .ColumnSection__grid div {

    lost-column: 1/1;

    }

    @media (min-width: 400px) {

    .ColumnSection__grid div {

    lost-column: 1/3;

    }

    }

    @media (min-width: 900px) {

    .ColumnSection__grid div {

    lost-column: 1/6;

    }

    }

    大于900px时:

    小于900px时:

    .NestingSection__grid {

    background: #8eb19d;

    }

    .NestingSection__grid div {

    background: #7ba48d;

    lost-column: 1/3;

    }

    .NestingSection__grid div div {

    background: #68977c;

    lost-column: 1/2;

    }

    经过查看css样式我们发现,其实就是巧用了table布局,before/after伪元素,以及css选择器,以及border-box布局,但其实最最核心的地方还是在于很好的使用了css本身具有的流式布局以及BFC,针对各种情况,在插件内部使用了大量的样式进行约束。

    在css3的flex布局和grid布局逐渐被浏览器所支持的今天,我个人建议不使用LostGrid插件。

    期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

    SegmentFault技术圈:ES新规范语法糖

    前端开发交流群:660634678

    努力成为优秀前端工程师!

    展开全文
  • 发布一个 PostCSS 插件:postcss-less2scss,可以将 Less 文件转换为 Scss。* GitHub:https://www.npmjs.com/package/postcss-less2scss* NPM:https://www.npmjs.com/package/postcss-less2scss转换变量转换变量的...

    发布一个 PostCSS 插件:postcss-less2scss,可以将 Less 文件转换为 Scss。

    * GitHub:https://www.npmjs.com/package/postcss-less2scss

    * NPM:https://www.npmjs.com/package/postcss-less2scss

    转换变量

    转换变量的定义和使用

    不属于任何一个 Rule 的变量

    Less:

    @link-color: #428bca;

    Scss:

    $link-color: #428bca;

    在某个 Rule 中定义的变量

    Less:

    #main {

    @width: 5em;

    width: @width;

    }

    Scss:

    #main {

    $width: 5em;

    width: $width;

    }

    在 Declaration 的 value 中使用的变量

    Less:

    @text-color: @gray-dark;

    @link-color-hover: darken(@link-color, 10%);

    Scss:

    $text-color: $gray-dark;

    $link-color-hover: darken($link-color, 10%);

    在某个 Rule 中的一个 Declaration 的 value 中使用的变量

    Less:

    a:hover {

    color: @link-color-hover;

    }

    Scss:

    a:hover {

    color: $link-color-hover;

    }

    转换 At-Rules 中的变量

    Less:

    @screen-sm: 768px;

    @screen-sm-min: @screen-sm;

    .form-inline {

    // Kick in the inline

    @media (min-width: @screen-sm-min) {

    // Inline-block all the things for "inline"

    .form-group {

    display: inline-block;

    margin-bottom: 0;

    vertical-align: middle;

    }

    }

    }

    Scss:

    $screen-sm: 768px;

    $screen-sm-min: $screen-sm;

    .form-inline {

    // Kick in the inline

    @media (min-width: $screen-sm-min) {

    // Inline-block all the things for "inline"

    .form-group {

    display: inline-block;

    margin-bottom: 0;

    vertical-align: middle;

    }

    }

    }

    Variable Interpolation

    转换选择器中的 variable interpolation

    Less:

    // Variables

    @my-selector: banner;

    // Usage

    .@{my-selector} {

    font-weight: bold;

    line-height: 40px;

    margin: 0 auto;

    }

    Scss:

    // Variables

    $my-selector: banner;

    // Usage

    .#{$my-selector} {

    font-weight: bold;

    line-height: 40px;

    margin: 0 auto;

    }

    转换 Mixins

    转换 Mixins 的定义(可以支持默认参数)

    Less:

    .alert-variant(@background; @border; @text-color) {

    background-color: @background;

    border-color: @border;

    color: @text-color;

    hr {

    border-top-color: darken(@border, 5%);

    }

    .alert-link {

    color: darken(@text-color, 10%);

    }

    }

    Scss:

    @mixin alert-variant($background, $border, $text-color) {

    background-color: $background;

    border-color: $border;

    color: $text-color;

    hr {

    border-top-color: darken($border, 5%);

    }

    .alert-link {

    color: darken($text-color, 10%);

    }

    }

    转换 Mixins 的使用

    Less:

    .a {

    .center-block;

    }

    Scss:

    .a {

    @include center-block;

    }

    支持 Mixins 的具有默认值的参数

    Less:

    @state-success-text: #3c763d;

    @state-success-bg: #dff0d8;

    @state-success-border: darken(spin(@state-success-bg, -10), 5%);

    @state-info-text: #31708f;

    @state-info-bg: #d9edf7;

    @state-info-border: darken(spin(@state-info-bg, -10), 7%);

    @state-warning-text: #8a6d3b;

    @state-warning-bg: #fcf8e3;

    @state-warning-border: darken(spin(@state-warning-bg, -10), 5%);

    @state-danger-text: #a94442;

    @state-danger-bg: #f2dede;

    @state-danger-border: darken(spin(@state-danger-bg, -10), 5%);

    .box-shadow(@shadow) {

    -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1

    box-shadow: @shadow;

    }

    .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {

    // Color the label and help text

    .help-block,

    .control-label,

    .radio,

    .checkbox,

    .radio-inline,

    .checkbox-inline,

    &.radio label,

    &.checkbox label,

    &.radio-inline label,

    &.checkbox-inline label {

    color: @text-color;

    }

    // Set the border and box shadow on specific inputs to match

    .form-control {

    border-color: @border-color;

    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work

    &:focus {

    border-color: darken(@border-color, 10%);

    @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);

    .box-shadow(@shadow);

    }

    }

    // Set validation states also for addons

    .input-group-addon {

    color: @text-color;

    border-color: @border-color;

    background-color: @background-color;

    }

    // Optional feedback icon

    .form-control-feedback {

    color: @text-color;

    }

    }

    // Feedback states

    .has-success {

    .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);

    }

    .has-warning {

    .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);

    }

    .has-error {

    .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);

    }

    Scss:

    $state-success-text: #3c763d;

    $state-success-bg: #dff0d8;

    $state-success-border: darken(adjust_hue($state-success-bg, -10), 5%);

    $state-info-text: #31708f;

    $state-info-bg: #d9edf7;

    $state-info-border: darken(adjust_hue($state-info-bg, -10), 7%);

    $state-warning-text: #8a6d3b;

    $state-warning-bg: #fcf8e3;

    $state-warning-border: darken(adjust_hue($state-warning-bg, -10), 5%);

    $state-danger-text: #a94442;

    $state-danger-bg: #f2dede;

    $state-danger-border: darken(adjust_hue($state-danger-bg, -10), 5%);

    @mixin box-shadow($shadow) {

    -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1

    box-shadow: $shadow;

    }

    @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {

    // Color the label and help text

    .help-block,

    .control-label,

    .radio,

    .checkbox,

    .radio-inline,

    .checkbox-inline,

    &.radio label,

    &.checkbox label,

    &.radio-inline label,

    &.checkbox-inline label {

    color: $text-color;

    }

    // Set the border and box shadow on specific inputs to match

    .form-control {

    border-color: $border-color;

    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work

    &:focus {

    border-color: darken($border-color, 10%);

    $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);

    @include box-shadow($shadow);

    }

    }

    // Set validation states also for addons

    .input-group-addon {

    color: $text-color;

    border-color: $border-color;

    background-color: $background-color;

    }

    // Optional feedback icon

    .form-control-feedback {

    color: $text-color;

    }

    }

    // Feedback states

    .has-success {

    @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);

    }

    .has-warning {

    @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);

    }

    .has-error {

    @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);

    }

    转换函数

    字符串函数

    转换 CSS 转义函数,也就是:~”xxx”

    Less:

    @input-border-focus: #66afe9;

    .box-shadow(@shadow) {

    -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1

    box-shadow: @shadow;

    }

    .form-control-focus(@color: @input-border-focus) {

    @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);

    &:focus {

    border-color: @color;

    outline: 0;

    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");

    }

    }

    .form-control {

    .form-control-focus();

    }

    Scss:

    $input-border-focus: #66afe9;

    @mixin box-shadow($shadow) {

    -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1

    box-shadow: $shadow;

    }

    @mixin form-control-focus($color: $input-border-focus) {

    $color-rgba: rgba(red($color), green($color), blue($color), .6);

    &:focus {

    border-color: $color;

    outline: 0;

    @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba});

    }

    }

    .form-control {

    @include form-control-focus();

    }

    颜色函数

    将 Less 的 spin() 函数转换为 Scss 的 adjust_hue() 函数

    Less:

    @state-success-border: darken(spin(@state-success-bg, -10), 5%);

    Scss:

    $state-success-border: darken(adjust_hue($state-success-bg, -10), 5%);

    转换 @import At-Rules

    Less:

    @import "foo";

    @import "foo.less";

    @import "foo.php";

    @import "foo.css";

    Scss:

    @import "foo";

    @import "foo";

    @import "foo";

    @import "foo.css";

    如果使用 postcss-less2scss 插件

    const postcss = require('postcss')

    const syntax = require('postcss-less')

    const converter = require('postcss-less2scss')

    const lessText = `

    // Variables

    @link-color: #428bca; // sea blue

    @link-color-hover: darken(@link-color, 10%);

    // Usage

    a,

    .link {

    color: @link-color;

    }

    a:hover {

    color: @link-color-hover;

    }

    .widget {

    color: #fff;

    background: @link-color;

    }

    `

    const scssText = postcss([converter])

    .process(lessText, { syntax })

    .css

    console.log('lessText = ', lessText, ', \nscssText = ', scssText)

    和 gulp 集成

    /**

    * Use postcss-less2scss to convert bootstrap v3.3.7 styles from less to scss

    */

    gulp.task('less2scss', () => {

    return gulp.src('assets/less/bootstrap3/**/*.less')

    .pipe(postcss([less2scss], {

    syntax: less

    }))

    .pipe(rename(path => {

    if (path.basename !== 'bootstrap') {

    path.basename = '_' + path.basename

    }

    path.extname = '.scss'

    }))

    .pipe(gulp.dest('build/scss/bootstrap3/'))

    })

    相关

    展开全文
  • vite postcss

    千次阅读 2021-05-19 11:03:27
    PostCSS PostCSS是一款使用JavaScript插件对CSS实现转换的工具 PostCSS拥有非常强大的插件,典型的比如autoprefixer、cssnext、css modules等。 PostCSS插件的处理方式类似CSS预处理器,而非预处理器和后处理器。 ...
  • postcss

    2021-01-12 08:46:25
    什么是postcsspostcss 一种对css编译的工具,... css 代码压缩等等postcss 只是一个工具,本身不会对css一顿操作,它通过插件实现功能,autoprefixer 就是其一。与 less sass 的区别less sass 是预处理器,用来支持...
  • Postcss

    2021-01-12 13:42:32
    Postcss一、了解Postcss1.安装2.对文件进行转换3.postcss配置文件二、postcss常用插件1.安装插件2. autoprefixer 浏览器前缀插件3.poscss-import 引入合并css4. cssnano 对css压缩5.postcss-cssnext6.stylelint 语言...
  • 这里报错postcss-pxtorem 需要 8. 我以为要使用postcss-pxtorem 8.以上的版本就去看了一下postcss-pxtorem版本最高才6.0 这里降低postcss-pxtorem@5.1.1 npm i postcss-pxtorem@5.1.1
  • 相信最近使用postcss-pxtorem + amfe-flexible移动端适配的同学会发现,安装完postcss-pxtorem并配置好vue.config.js后,会报错Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.,明明是按以往配置,怎么...
  • 解决方案 安装 先卸载 再安装 npm uninstall tailwindcss postcss autoprefixer npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  • 这个问题经查找是postcss-pxtorem版本过高导致的,可以降级 npm i postcss-pxtorem@5.1.1 -D 这样就好了
  • 今天在vue项目中安装postcss-pxtorem报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.” 看了很多大佬的博客,找到解决办法就是下载指定版本 npm i postcss-pxtorem@5.1.1 这样就可以了,记录...
  • Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users @ ./src/styles/index.less 4:14...
  • 我将向你展示如何使用PostCSSPostCSS-modules在服务端自动处理它。CSS最初只是用来美化文档的一种工具。自1996年以来,许多事情发生了变化。浏览器不再是文档查看器了。聊天、工作、游戏,几乎没有任何浏览器不能...
  • 基于postCss的TaiWindCss源码解析一级目录二级目录三级目录 一级目录 二级目录 三级目录
  • postcss-less2scss

    2021-08-04 08:31:12
    PostCSS 插件 Less2Scss PostCSS 将 Less 转换为 Scss 的 PostCSS 插件.转换变量转换变量的定义和使用不属于任何一个 Rule 的变量Less:@link-color: #428bca;Scss:$link-color: #428bca;在某个 Rule 中定义的变量...
  • CSS预编译器三剑客(Sass、Less、Stylus)及PostCSS(AST、开发插件) 文章目录CSS预编译器三剑客(Sass、Less、Stylus)及PostCSS(AST、开发插件)1. CSS预编译器三剑客(Sass、Less、Stylus)2. PostCSS 总结: ...
  • 其中PostCSS plugin postcss-pxtorem requires PostCSS 8 说是PostCSS插件PostCSS -pxtorem需要PostCSS 8,但是PostCSS没有8,我们需要降低下postcss-pxtorem版本,改为5.1.1, 再 npm i 即可 ...
  • 对我们的css样式兼容性处理我们需要postcss-loader和postcss-preset-env postcss-loader:对我们的css文件进行兼容性处理 postcss-preset-env:帮postcss找到package.json中browserslist里面的配置,通过配置加载...
  • 在vue-cli3.0中使用postcss-plugin-px2rem插件 插件的作用是 自动将vue项目中的px转换为rem postcss-plugin-px2rem优势:  因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性,它可以配置 是否对 ...
  • 解决 Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. 一、问题背景介绍 1、在Vue的项目中使用了postcss-pxtorem这个包,同时在项目根目录中,配置了postcss.config.js,如下图所示: ...
  • postcss工具

    2021-06-05 23:24:19
    1.定义: postcss是一个通过JavaScript来...2,首先安装npm install postcss postcss-cli -D 再安装插件:npm install autoprefixer -D 然后npx postcss --use autoprefixer -o result.css ./src/css/test.css 指定要
  • 最新在写vue3.0的项目,有一次把node_modules包删除,重新install后,终端出现了Error: PostCSS plugin autoprefixer requires PostCSS 8的错误。 解决方案,autoprefixer设置成9.0.0: "autoprefixer": "9.0.0...
  • npm WARN postcss-modules@4.2.2 requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself. 其实不只是vue-virtual-scroll-list,有时候安装其他的插件也会出现这...
  • postcss-pxtorem版本过高 解决方案: 降低postcss-pxtorem版本 执行: npm uninstall postcss-pxtorem 在项目的package.json的devDependencies下添加"postcss-pxtorem": “^5.1.1”, 再执行:npm i 再进行打包运行...
  • 解决方法: # 删除原安装包 npm uninstall tailwindcss postcss autoprefixer # 安装低版本包 npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  • PostCSS 基本用法

    2020-12-20 02:36:56
    1、postcss相关网站2、介绍PostCSS 的主要功能只有两个:第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构(Abstract Syntax Tree,AST),第二个就是调用插件来处理 AST 并得到结果。PostCSS...
  • postcss踩坑问题集合

    2020-12-20 02:36:00
    业务背景从昨天18/9/12开始学postcss直到现在还没完全用顺手记录一下遇到的问题,以后慢慢处理懒得一个一个提问了坑一【已解决】webstorm不支持postcss-simple-vars插件的$语法示例代码如下$gray: #6C6C6C;...
  • 因项目需要,用户突然要坚持小屏幕也要观看大屏代码,临时解决方案是加了一个postcss-px-to-viewport ,安装过程中报错Error: true is not a PostCSS plugin 首先声明我的vue-cli中package-lock.json写的webpack版本...
  • Uni-app postcss-pxtorpx 使用(可以exclude某个文件夹) 1、postcss-pxtorem 介绍: 一款可以把px单位转成rem的插件,具体使用方法可以点击上方链接。 // postcss.config.js module.exports = { plugins: [ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 292,666
精华内容 117,066
关键字:

postcss