デザイナーが始めるPostCSS

はじめに

Webアプリのデザインにあたり、より効率よくCSSを作成するためにPostCssを導入しました。 導入手順と追加したプラグインを簡単にご紹介します。

PostCSSとは

PostCssとはNode.js製のモジュールでCSSをコンパイルできるツールです。 Cssをコンパイルするという点では、SassやLessと基本的には同じようなものだと思います。

PostCSSの特徴
・とにかくコンパイルが早い
・はmixinや変数などの機能1つ1つがプラグインになっており、それらをいれることで使用できる
・プラグイン によっては将来取り入れられる標準公文も使用可能

Sassは複数の機能がパッケージになっているため、使わない機能までついてしまいますが、
PostCssなら必要な機能のみ選んで導入できます。

PostCssのインストール

タスクランナーはgulpを使用しています。

コマンドラインでインストールします。

$ npm init                 //任意の値を入れてpackage.jsonを生成
$ npm install gulp --save-dev          //Gulpをインストール
$ npm install gulp-postcss --save-dev  //PostCSSをインストール

gulpfile.jsを作り、package.jsonと同じ階層に置きます。
gulpfile.jsの中身はこちら

gulpfile.js

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

gulp.task('css', function () {
  var plugins = [
  ];
  return gulp.src('./css/src/style.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('./css/dest'));
});

プラグインのインストール

プラグインは現在300以上あるようです。 一覧はこちら

今回導入したプラグイン

cssnext
ベンダープレフィックスを付与するAutoprefixer、メディアクエリーのパラメーターに名前を付けられるようにするCustom Media、変数定義ができるsimple-varsやcustom-propertiesなどの複数の機能を含んだプラグイン

nested
入れ子表記ができる

import
別ファイルの読み込みができる

preces
Sass同様に$を使った変数を使用できる

コマンドラインでそれぞれのプラグインをインストールします。

$ npm install postcss-cssnext --save-dev
$ npm install postcss-nested --save-dev
$ npm install postcss-import --save-dev
$ npm install precess --save-dev

gulpfile.jsにインポートしたパッケージを追加します。

gulpfile.js

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var cssnext = require('postcss-cssnext'); 
var precss = require('precss'); 
var nested = require('postcss-nested'); 
var cssimport = require('postcss-import'); 

gulp.task('css', function () {
  var plugins = [
    cssimport,
    cssnext,
    nested,
    precss,
  ];
  return gulp.src('./css/src/style.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('./css/dest'));
});

今回はstyle.cssに複数のcssをインポートするので、コンパイル元は、style.cssのみを
指定しています。
※taskに追加する際、cssimportを一番上に配置しないとコンパイル時にエラーになるのでご注意ください。

CSSをコンパイルする

CSSを作成します。 ブレイクポイントの設定とカラー設定は別のCSSで作成し、style.cssにインポートします。

/css/src/color.css

$text:#000;
$bg:#F5F5F5;
$shadow:rgba(0,0,0,.16);

/css/src/breakpoint.css

@custom-media --sp (max-width: 480px);

/css/src/style.css

@import 'color.css';
@import 'breakpoint.css';

.container{
  color:$text;
  display: flex;
  background-color: $bg;
  .card{
    box-shadow: 0px 3px 6px $shadow;
    &_ttl{
      font-size: 18px;
    }
  }
  @media(--sp){
    display:block;
  }
}

コマンドラインで、CSSをコンパイルします。

$ gulp css

コンパイルされたCSSは以下になります。

/css/dest/style.css

.container{
  color:#000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #F5F5F5;
}
.container .card{
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
  }
.container .card_ttl{
      font-size: 18px;
    }
@media (max-width: 480px){
  .container{
    display:block;
  }
}

無事にコンパイルできました。

デザイナーでも簡単に使えますので、
ぜひ、大規模なWebサービスのコーディングの時には使ってみてはいかがでしょうか。