PostCss简介

2017-01-13 11:40:49来源:CSDN作者:u011127019人点击

官网地址:http://postcss.org/

源代码地址:https://github.com/postcss

来自官方的文档上写着的是PostCSS是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合,转化css3的新特性语法、行内图片等。

其中一个比较为人所知的插件AutoPrefixer就是出自这里,目前上面已经超过200多个插件在github

解决全局CSS问题

  • postcss-use to explicitly setPostCSS plugins in CSS and execute them only for the current file.
  • postcss-modules orreact-css-modules automatically isolates selectors in components.
  • postcss-autoreset uses local reset in component, instead of global one.
  • postcss-initial addsall: initial support to reset all inherit styles.
  • cq-prolyfill adds media queries for component size or parent background.

使用最新的CSS特性

  • autoprefixer adds vendor prefixes, using data from Can I Use.
  • cssnext allows you to use future CSS features today (includesautoprefixer).

更高的CSS可读性

  • precss contains plugins for Sass-like features like nesting or mixins.
  • postcss-sorting sorts rules content with specified order.
  • short adds and extends numerous shorthand properties.

图片和字体

  • postcss-assets inserts image dimensions and inlines files.
  • postcss-sprites generates image sprites.
  • font-magician generates all the@font-face rules needed in CSS.
  • postcss-inline-svg allows to inline SVG and customize its styles.
  • postcss-write-svg allows to write simple SVG directly in CSS.

Linters

  • stylelint is a modular linter for CSS.
  • doiuse lints CSS for browser support, using data from Can I Use.
  • colorguard helps maintain a consistent color palette.

Other

  • lost is feature-richcalc() grid system by Jeet author.
  • cssnano is a modular CSS minifier.
  • rtlcss mirrors styles for right-to-left locales.

语法类

viaPostCSS can transform styles in any syntax, not just CSS.原文来自:http://caibaojian.com/postcss.html

  • postcss-scss to work with SCSS(but does not compile SCSS to CSS).
  • postcss-js to write styles in JS or transform React Inline Styles, Radium or JSS.
  • postcss-safe-parser finds and fixes CSS syntax errors.
  • midas converts a CSS string to highlightedhtml.

相关文章

  • Some things you may think about PostCSS… and you might be wrong
  • What PostCSS Really Is; What It Really Does
  • PostCSS Guides

演示

Autoprefixer

PostCSS最有名的插件是Autoprefixer。如名所示,可以自动为你添加浏览器私有前缀。它的添加值会参考Can I Use及你设定的浏览器支持范围,因此相当可靠。下面是一个示例(以我设定的浏览器支持范围):

.container{    display: flex;}

编译后:

//code from http://caibaojian.com/postcss.html.container{    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;}

postcss-nested&postcss-mixins

在刚开始使用PostCSS时,我就想到要用PostCSS实现我在Sass中最常用的特性。所以,我找到了postcss-nestedpostcss-mixins。将它们结合起来后,就可以做到这样:

@define-mixin clearfix{    &:after{        display: table;        clear: both;        content: " ";    }}.column-container{    color: #333;    @mixin clearfix;}

编译后:

.column-container{    color: #333;}.column-container:after{    display: table;    clear: both;    content: " ";}

到这里,你是否已经有了“预编译器可以做到的它也可以做到”的感觉呢?

如何使用PostCSS

我个人推荐结合Gulp使用,本文在此只介绍gulp-postcss的用法。

gulp-postcss及插件都是npm,首先,使用npm install将它们分别安装到项目目录中(会位于node_modules)。然后,编辑glupfile.js,将PostCSS注册为Gulp的一个任务。以下是一个结合使用了Autoprefixerpostcss-simple-varspostcss-mixinspostcss-nested4个插件,且生成source map文件的例子:

var gulp = require("gulp");var postcss = require("gulp-postcss");var autoprefixer = require('autoprefixer-core');var postcssSimpleVars = require("postcss-simple-vars");var postcssMixins = require("postcss-mixins");var postcssNested = require("postcss-nested");var sourcemaps = require("gulp-sourcemaps");// Css process.gulp.task("postcss", function(){    var processors = [        postcssMixins,        postcssSimpleVars,        postcssNested,        autoprefixer({            browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]        })];    return gulp.src(["./stylesheets/src/*.css"])        .pipe(sourcemaps.init())        .pipe(postcss(processors))        .pipe(sourcemaps.write("."))        .pipe(gulp.dest("./stylesheets/dest"));});

在上面这段代码中,processors是一个数组,定义了用到的PostCSS插件。PostCSS会按照定义顺序依次执行插件,因此,在结合多个插件使用时,请注意它们的位置。

自定义转换

此外,你可以很容易地创建你自己的转换(还记得前面说过PostCSS的插件都是javascript函数吧?)。例如,下面是一个自定义的转换方法,它将css代码中的带有rem单位的值,更改为px的值。

var custom = function(css, opts){    css.eachDecl(function(decl){        decl.value = decl.value.replace(//d+rem/, function(str){            return 16 * parseFloat(str) + "px";        });    });};

然后,你将这个方法直接添加到processors中(就像postcssMixins那些那样)就可以使用。如果原来有值是3rem,将变成48px


更多:

cssnext

在 ASP.NET 应用中使用 LESS

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台