Help us understand the problem. What is going on with this article?

gulp-csscombで任意のプロパティ記述順序を設定する

More than 5 years have passed since last update.

設定ファイルの内容を定義

整形方法

こちらのジェネレーターでファイルの整形方法を定義できます。

(例)カラーコードの表記方法(小文字 or 大文字)
#aaa or #AAA

http://csscomb.com/config

プロパティ記述順序

これにはジェネレーターはないので、自分で定義することになります。以下を参考にしました。
・記述順序の参考
https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json
https://github.com/csscomb/csscomb.js/blob/master/config/yandex.json
https://github.com/csscomb/csscomb.js/blob/master/config/zen.json

.csscomb.jsonを作成

gulpfile.jsと同じ階層、もしくはプロジェクトのルートフォルダに「.csscomb.json」を置けばできます。

・整形方法
ジェネレーターで適当に作成

・記述順序
sort-orderのところに自分の好きなプロパティ順序をどんどん書いていく形になります。ここではposition関係のものだけ書いてみました。

.csscomb.json
{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "  ",
    "color-shorthand": false,
    "element-case": "upper",
    "eof-newline": true,
    "leading-zero": false,
    "quotes": "single",
    "sort-order-fallback": "abc",
    "space-before-colon": "",
    "space-after-colon": " ",
    "space-before-combinator": "",
    "space-after-combinator": " ",
    "space-between-declarations": " ",
    "space-before-opening-brace": "",
    "space-after-opening-brace": " ",
    "space-after-selector-delimiter": "",
    "space-before-selector-delimiter": " ",
    "space-before-closing-brace": " ",
    "strip-spaces": true,
    "tab-size": true,
    "unitless-zero": true,
    "vendor-prefix-align": true,
    "sort-order": [ [
        "position",
        "top",
        "right",
        "bottom",
        "left"
    ]]
}

gulpfile.jsの書き方

gulpfile.js
var gulp = require('gulp');
var csscomb = require('gulp-csscomb');

gulp.task('styles', function() {
  return gulp.src('src/styles/main.css')
    .pipe(csscomb())
    .pipe(gulp.dest('./build/css'));
});

特別な書き方はありません。普通にcsscombを実行するだけです。
・参考
http://increment-log.com/csscomb-setting/

naoyashiga
クリエイティブ開発者
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