PostCSSを触ってみた


PostCSSとは

PostCSS、名前を聞いただけじゃどんなものかピンとこないかもしれませんが、そんなに難しいものではありません。SassとかLessとかを使うと、独自の言語ルールで縛られてしまいますし、いらない機能もたくさん読み込まないといけません。PostCSSの場合、自分で好きなルールをpostcssプラグインから選んで読み込み、使用する事ができます。たとえばSassとかLessとかにあるようなfor文やif文なんかは使わなかったりしますよね?必要な機能、たとえばmixinや変数のみなどを取り込んで使う仕組みがPostCSSです。
つまり、PostCSSを使えば、自分オリジナルのPreprocessorを簡単に作れちゃうという事です。

PostCSS導入

たとえば、gulpでpostcssを導入するとするなら以下のような書き方をします。

var gulp = require('gulp');
var postcss = require('gulp-postcss');


gulp.task('css', function () {
	return gulp.src('css/src/**.css')
	.pipe(postcss([
		require("postcss-import"),//@import機能を使いたい
		require('postcss-mixins'),//mixinを利用したい
		require('postcss-nested'),//セレクターのネストをしたい
		require('postcss-simple-vars'),//変数を定義したい
		require('postcss-cssnext'),//次世代のcssの文法を使いたい
		require('cssnano'),//CSSを圧縮したい
	]))
	.pipe(gulp.dest('css/dist/'));
});

gulp.task('default', ['css']);

package.json

{
  "devDependencies": {
    "cssnano": "*",
    "gulp": "*",
    "gulp-postcss": "^6.2.0",
    "postcss-cssnext": "*",
    "postcss-import": "^8.1.2",
    "postcss-mixins": "^5.3.0",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0"
  }
}

githubにサンプルのソースコードを置いていますので、試してみてください。コマンドラインツールよりnpm installで依存パッケージのインストール、gulpでCSSのコンパイルができます。


PostCSSを使う上で注意したい事

PostCSSを使うという事はSassなどLessなど、用意された言語仕様ではなく、自分である程度のルールを決めるということになります。それを社内で導入するとなると、そのルールの周知徹底が必要になってきます。SassやLessなら文法はGoogleで調べればヒットしますが、導入したPostCSSプラグインのルールはすぐに見つからないかもしれません。
なので、すでにSassなどを社内ですでに使っていて、もし新たにPostCSSを使いたいのであれば、最初のうちは、ベンダープリフィックスを付与する、autoprefixerやCSSを圧縮するcssnanoくらいを利用する程度にとどめておく方が無難かもしれませんね。


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →