はじめに
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の中身はこちら
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にインポートしたパッケージを追加します。
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にインポートします。
$text:#000;
$bg:#F5F5F5;
$shadow:rgba(0,0,0,.16);
@custom-media --sp (max-width: 480px);
@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は以下になります。
.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サービスのコーディングの時には使ってみてはいかがでしょうか。