45
49

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?