LoginSignup
45
49

More than 5 years have passed since last update.

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

Posted at

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

整形方法

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

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

プロパティ記述順序

これにはジェネレーターはないので、自分で定義することになります。以下を参考にしました。
・記述順序の参考
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/

45
49
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
45
49