PostCSS_html/css_WEB-ITnose に関する簡単な説明

はじめに

PostCSS は、JS プラグインでスタイルを変換するためのツールです。これらのプラグインは、CSS をリントし、変数とミックスインをサポートし、将来の CSS 構文、インライン画像などをトランスパイルできます。

PostCSS は、ツールベースです。スタイルを変換するための JS プラグイン ツールについて。 PostCSS プラグインはプリプロセッサのようなもので、コードを最適化して自動接頭辞を追加したり、変数やロジックを追加したり、コーディングへのショートカットを提供したりできます。

PostCSS は

• 表面的にはプリプロセッサのように見えますが、プリプロセッサではありません

• 表面的にはポストプロセッサのように見えますが、実際にはポストプロセッサではありません。将来の構文を促進およびサポートできますが、将来の構文ではありません

• コードのクリーニングや最適化などの機能を提供できますが、コードのクリーニングや最適化のためのツールではありません

• それは、どれか 1 つだけではありませんそれは、無限の可能性を秘めているということであり、必要な機能を自分のニーズに合わせて設定できる

• PostCSSの利点

多様な機能プラグインがエコロジーなプラグインシステムを構築します

• 必要な特性に応じてモジュール化を実行します

• 高速開発

• 独自のパッケージを作成し、許容可能な CSS を使用します

• どのプリプロセッサにも依存しませんライブラリを作成する機能

• 多くの人気のあるツールのビルドでシームレスにデプロイ可能

• webpack の設定

ほとんどの同僚は現在も Gulp を使用しています Damo 先生が Gulp の設定について書いています この記事は非常に詳細です。コピー＆ペーストはしません。ポータルはこちらです: (PostCSS の詳細な学習: Gulp 設定) [http://www.w3cplus.com/PostCSS/postcss-q....]

• ここではwebpackの基本的な構成を説明します(NPMパッケージやその他の知識は既にご存知だと仮定します...github元アドレス: PostCSS for Webpack)

まずは

npm install postcss-loader - -save-dev

webpack 設定ファイルに postcss を設定します

var precss       = require('precss');var autoprefixer = require('autoprefixer');module.exports = {    module: {        loaders: [            {                test:   /\.css$/,                loader: "style-loader!css-loader!postcss-loader"            }        ]    },    postcss: function () {        return [precss, autoprefixer];    }}

この例を実装するには 2 つのプラグインをインストールする必要があります

npm install precss --save-dev npm install autoprefixer --save-dev

PostCSS plugin

PostCSS のコア そのプラグイン システムです。 PostCSS プラグインの選び方は気分によって異なります。

プラグインを探す

PostCSS には Github にプラグイン リポジトリがあり、そのホームページにはプラグイン リストが維持されています。このプラグイン リストは頻繁に更新されるため、プラグインがどのように開発され、どこで入手できるかを確認するには非常に信頼できる場所です。

PostCSS Twitter

PostCSS の Twitter アカウントをフォローすることもできます。 @PostCSS。新しいプラグインがリリースされるたびに。 Twitterで発信していきますので、このアカウントをフォローしていただければご確認いただけます。

これなしでは生きていけないいくつかのプラグイン

Bennon が使用しているプラ​​グインをいくつか紹介します

PreCSS

npm install precss --save-dev

PreCSS 構文と Sass は非常に似ています。難なく使えます。

ネスト

PreCSS でのネストは、セレクターの中括弧内にセレクターをネストすることで、Sass や LESS と同じです。例:

.menu {    width: 100%;    a {        text-decoration: none;    }    &::before {        content: '';    }}

Variable

PreCSS は、$ 記号の後に変数名が続き、その後に変数値が続きます。

$text_color: #232323;body {    color: $text_color;}

Conditions

PreCSS には条件付きコマンドなどの機能もあります。構文は @if と @else を使用するものと同じです。

$column_layout: 2;.column {    @if $column_layout == 2 {        width: 50%;        float: left;    }   @else {        width: 100%;    }}

Imports

複数の CSS ファイルをマージできます。 1 つは @import を介して 1 つです。例:

import 'normalize.css';

概要

PostCSS の強力なプリプロセッサ PreCSS プラグイン パッケージとして、多くの機能があります:

PreCSS でのネストは Sass または LESS でのネストと同じです

PreCSS は変数 Sass を宣言しますのような構文

PreCSS には @if や @else のような条件付きコマンドの機能もあります
@for および @each ループは有効です
PreCSS $arg1 で @define-mixin mixin_name を使用します$arg2{...} を宣言する構文
PreCSS で @mixin mixin_name pass_arg1, pass_arg2 構文を使用して
• を呼び出します

• @mixin-content使用方法类似于Sass中的@content

• PreCSS中使用@define-extend extend_name{...}来声明可扩展的代码块

• PreCSS中使用@extend extend_name语法来调用声明的代码扩展块

• 在PreCSS可以使用@import中导入CSS文件

Autoprefixer

npm install autoprefixer --save-dev

在我们使用Sass的时候我们会经常使用Compass库中使用 @include box-sizing(border-box);来解决 box-sizing属性在各浏览器私有前缀的问题。但它本身存在一些问题：

• 要知道属性需要的前缀，然后才能决定如何部署混合宏

• 必须知道混合宏的名称和如何调用混合宏

• 必须时刻关注浏览器对每个属性的私有前缀变化（比如，box-sizing现在就不再需要前缀）

当我们使用Autoprefixer的时候发现这些都不是问题，它可以根据CanIUse.com数据对属性自动添加浏览器的私有前缀。书写没有私有前缀的css(实际上是忘了写...)

:fullscreen a {    display: flex}

Autoprefixer会根据当前不同浏览器支持的特性来为你添加前缀，编译后的代码：

:-webkit-full-screen a {    display: -webkit-box;    display: -webkit-flex;    display: flex}:-moz-full-screen a {    display: flex}:-ms-fullscreen a {    display: -ms-flexbox;    display: flex}:fullscreen a {    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex}

更多关于Autoprefixer的信息可以异步传送门： Autoprefixer的github地址

cssnano

它提供了一个非常强大的CSS优化的插件包cssnano，这个插件包是一个可以即插即用的。它汇集了大约25个插件，只需要执行一个命令，就可以做多方面不同类型的优化。它包括：

• 删除空格和最后一个分号

• 删除注释

• 优化字体权重

• 丢弃重复的样式规则

• 优化calc()

• 压缩选择器

• 减少手写属性

• 合并规则

提供个官网的例子

h1::before, h1:before {    margin: 10px 20px 10px 20px;    color: #ff0000;    -webkit-border-radius: 16px;    border-radius: 16px;    font-weight: normal;    font-weight: normal;}/* invalid placement */@charset "utf-8";

编译后

@charset "utf-8";h1:before{margin:10px 20px;color:red;border-radius:1pc;font-weight:400}

更多特性和功能可以一步官网查看。官网传送门： cssnano.co

Sass和PostCSS

如果你对PostCSS的各种特性很感兴趣，但又不想放弃熟练使用的Sass。不用担心，你可以完全把Sass与PostCSS结合使用.因为你已经使用了Node.js来运行Gulp或webpack和PostCSS.所以使用Sass最简单的方法就是使用LibSass。你只需要安装node-sass.

npm install node-sass --save-dev

然后只需要在配置文件中先对.scss文件进行处理后再用PostCSS进行处理。

小结

当我使用了一次PostCSS后我就深深的爱上了它，我相信你也会有这种感觉。这篇文章只是简单的介绍了一下PostCSS，推荐大漠老师的文章： 大漠老师POSTCSS；