Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@test6tyome

PostCSSでSassをもっと楽に

More than 1 year has passed since last update.

gulpのタスクを追加して便利な環境にしよう ← 前回のやつ

PostCSS

PostCSSプラグイン PostCSS.parts

その他プラグイン一覧

プラグイン名 プラグイン機能 参考ページ
stylelint CSSの構文チェックツール stylelintの環境構築
column stylelint column
will stylelint will
be stylelint be
left stylelint center
aligned stylelint aligned

PostCSSのインストール

まずは、npmから「gulp-postcss」パッケージをインストール

cmd
npm install --save-dev gulp-postcss

パッケージをインストールしたら、gulpfile.jsに読み込みの設定をします。

gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
// 「gulp-postcss」を読み込む
var postcss = require('gulp-postcss');

ベンダープレフィックスを自動付与する

Autoprefixerはベンダープレフィックスを自動付与してくれるプラグインでPostCSSでは一番よく使われてる定番プラグインです。
Autoprefixerがあれば、わざわざベンダープレフィックスを記述する必要がなくなります。

インストールと設定

まずは、npmから「gulp-autoprefixer」パッケージをインストール

cmd
npm install --save-dev gulp-autoprefixer

パッケージをインストールしたら、gulpfile.jsに読み込みの設定とpostcss([autoprefixer()])を追記します。
Sassのコンパイル後に処理したいので、sassより後に記述します。

gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var postcss = require('gulp-postcss');
// 「gulp-autoprefixer」を読み込む
var autoprefixer = require('autoprefixer');

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")});   
    .pipe(sourcemaps.init());
    .pipe(saccGlob());
    .pipe(sass({outputStyle:'expanded'}))
    // 「sass」の後に指定
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write());
    .pipe(gulp.dest('css'));
});

その他に、対象ブラウザを設定したり、バージョン指定することなどもできます。

CSSプロパティの記述順を自動でソートする

CSSプロパティの順番を気にする方用に「css-declaration-sorter」

インストールと設定

まずは、npmから「css-declaration-sorter」パッケージをインストール

cmd
npm install --save-dev css-declaration-sorter

パッケージをインストールしたら、gulpfile.jsに読み込みの設定とpostcss([cssdeclsort({order:'smacss'})])を追記します。
Sassのコンパイル後に処理したいので、sassより後に記述します。

gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

// 「css-declaration-sorter」を読み込む
var assets = require('postcss-assets');
var cssdeclsort = require('css-declaration-sorter');

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")});   
    .pipe(sourcemaps.init());
    .pipe(saccGlob());
    .pipe(sass({outputStyle:'expanded'}))

    // 「sass」の後に指定
    .pipe(postcss([cssdeclsort({order:'smacss'})])
    // alphobetically アルファベット順に
    // smacss SMACSSが定義するレイアウトに最も重要な順に
    // concentric-css Concentric CSSが提唱するボックスモデルの外側から内側の順に

    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write());
    .pipe(gulp.dest('css'));
});

バラバラになったメディアクエリをまとめる

「CSS MQPacker」を使えば、バラバラに記述されたメディアクエリをまとめてくれます。

インストールと設定

まずは、npmから「css-mqpacker」パッケージをインストール

cmd
npm install --save-dev css-mqpacker

パッケージをインストールしたら、gulpfile.jsに読み込みの設定とpostcss([mqpacker()])を追記します。
Sassのコンパイル後に処理したいので、sassより後に記述します。

gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var assets = require('postcss-assets');
var cssdeclsort = require('css-declaration-sorter');
// 「css-mqpacker」を読み込む
var mqpacker = require('css-mqpacker');

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")});   
    .pipe(sourcemaps.init());
    .pipe(saccGlob());
    .pipe(sass({outputStyle:'expanded'}))
    // 「sass」の後に指定
    .pipe(postcss([mqpacker()]))

    .pipe(postcss([cssdeclsort({order:'smacss'})])
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write());
    .pipe(gulp.dest('css'));
});
4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?