画像のサイズやパスの補完をしてくれるPostCSSプラグイン「postcss-assets」をSassで使う

PostCSSといえば、CSSNextを使ったり、今使っているCSSメタ言語に飽きた人が使っているようなイメージが(勝手に)ありますが、PostCSSプラグインを複数取り込むことで、今使っているメタ言語を更に便利にすることもできます。
今回は、postcss-assetsというPostCSSプラグインをSassで使えるようにする方法についてご紹介します。

postcss-assetsとは?

postcss-assetsは、画像のサイズやパスの補完をしてくれるPostCSSのプラグインです。
以下のように、images/ 以下のパスをいい感じに補完したり、指定した画像のサイズを自動で挿入することが可能になります。また、インライン画像を挿入することも可能です。

/* before */
div {
  background-image: resolve("bg.jpg");
}
.thumb {
  width: width("thumb/thumb1.png");
  height: height("thumb/thumb1.png");
  background-image: resolve("thumb/thumb1.png");
}
.inline {
  background-image: inline("pattern.png");
}


/* after */
div {
  background-image: url("/images/bg.jpg");
}
.thumb {
  width: 600px;
  height: 315px;
  background-image: resolve("/images/thumb/thumb1.png");
}
.inlnie {
  background-image: url("data:image/...");
}

使用するためには、PostCSSを動作させる環境(Gulp/npm scriptなど)が必要ですが、ここでは割愛します。

ディレクトリ構造は以下のような想定です。

./
  node_modules/
  package.json
  gulpfile.js
  public/
    images/
      bg.jpg
      pattern.png
      thumb/
        thumb1.png
    index.html
    css/
      style.css
    js/
      script.js
  src/
    pug/
    scss/
      style.scss
      _function.scss
    js/

導入方法

以下のように、postcss-assets用のfunction名をSassのfunctionで定義するだけです。


@function resolve($url) {
  @return unquote("resolve(#{$url})");
}

@function width($url) {
  @return unquote("width(#{$url})");
}

@function height($url) {
  @return unquote("height(#{$url})");
}

@function size($url) {
  @return unquote("size(#{$url})");
}

@function inline($url) {
  @return unquote("inline(#{$url})");
}

@import "function";

.wrapper {
  background-image: resolve("bg.jpg");
  backgorund-size: size("bg.jpg");
}
.inline {
  background-image: inline("inline.png");
}

このように記述することで、Sass=>cssの出力では以下のようになります。


.wrapper {
  background-image: resolve("bg.jpg");
  backgorund-size: size("bg.jpg");
}
.inline {
  background-image: inline("inline.png");
}

出力されたものにはpostcss-assetsの関数名が引用符なしでかかれているので、
これをgulp-postcssで変換します。

変換処理をGulpで記述する

以下は最小限SCSSをcssに変換し、PostCSSを適用する流れをGulpで記述しています。

まずは任意のディレクトリで初期化&インストール。

yarn init
yarn add gulp gulp-postcss postcss-assets -D

gulpfile.jsは以下のようにpipeを繋ぎます。ディレクトリ構造は、始めの方で紹介した構造と同じ想定です。


const gulp = require("gulp");
const postcss = require("gulp-postcss");
const sass = require("gulp-sass");

gulp.task("sass-postcss", () => {
  return gulp.src("./src/scss/")
    .pipe(sass())
    .pipe(postcss([
      require("postcss-assets")({
        loadPaths: [ 'images/' ],  // 対象とするディレクトリ
        basePath: './public',  // プロジェクトで公開する部分のディレクトリ
        // relative: './public/css' // loadPathからの相対パスを操作したい場合に
      })
    ]))
    .pipe(gulp.dest("./public/css"));
});

あとは、package.jsonにnpm scriptを書いて、


"scripts": {
  "sass": "gulp sass-postcss"
}

実行します。

yarn run sass

ここまでで、 public/css/style.css が生成されていれば動作確認は終了です。postcss-assetsの恩恵を存分に味わってください。

最後に

postcss-assetsはとても便利なので、是非使うことをおすすめします。
画像サイズをいちいちFinderで確認するのはやめにしましょう。

  • BLOG
  • >
  • web
  • >
  • 画像のサイズやパスの補完をしてくれるPostCSSプラグイン「postcss-assets」をSassで使う