阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      PostCSS Plugins

      PostCSS Plugins

      控制

      有两个办法让 PostCSS 的魔法更加直观使用。

      譬如,使用 postcss-plugin-context 将一个插件的样式上下文环境限制: :

      .css-example.is-test-for-css4-browsers {
        color: gray(255, 50%);
      }
      @context postcss-preset-env {
        .css-example.is-fallback-for-all-browsers {
          color: gray(255, 50%);
        }
      }
      

      或者可以使用 [postcss-use] 直接在 CSS 里启用插件:

      @use autoprefixer(browsers: ['last 2 versions']);
      
      :fullscreen a {
        display: flex;
      }
      

      打包

      • postcss-utilities includes the most commonly used mixins, shortcuts and helpers to use as @util rules.
      • atcss contains plugins that transform your CSS according to special annotation comments.
      • cssnano contains plugins that optimize CSS size for use in production.
      • oldie contains plugins that transform your CSS for older Internet Explorer compatibility.
      • precss contains plugins that allow you to use Sass-like CSS.
      • rucksack contains plugins to speed up CSS development with new features and shortcuts.
      • level4 contains only plugins that let you write CSS4 without the IE9 fallbacks.
      • short adds and extends numerous shorthand properties.
      • stylelint contains plugins that lint your stylesheets.
      • postcss-hamster for vertical rhythm, typography, modular scale functions.
      • postcss-preset-env lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments.
      • postcss-ui-theme gives you syntax sugar and allow you change theme.

      面向未来的 CSS 语法

      See also [posctss-preset-env] plugins pack to add future CSS syntax by one line of code.

      向下兼容

      See also oldie plugins pack.

      语言扩展

      See also precss plugins pack to add them by one line of code.

      颜色

      图片与字体

      网格

      优化

      See also plugins in modular minifier cssnano.

      快捷工具

      其它

      分析

      反馈报告

      有趣的项目

      目录
      目录