【クリスマスだし】CSScomb for sublime text 2　CSSプロパティの順序をカスタマイズ【25日目の5】

特集

清田 隆志

2012.12.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

CSScomb for Sublime Text 2

前回書かせていただいた、記事に引き続き。今回もCSScombを書こうと思います。

アジェンダ

  • どうやってカスタムするの？
  • カスタムしてみる。
  • 動作を確認してみる。
  • 設定ファイルを作る
  • まとめ

どうやってカスタムするの？

前回までは、プラグインが動作するまでは確認できました。

しかし、プロジェクトごとにコーディング規約があったり、自分なりのcssのプロパティ順序を指定したい場合があると思います。

そこらへんのカスタマイズをsublime text 2の preferences > packeges setting でできるもんだと思ってたんですが。。。キーバインドの設定しかない。。。こまった。

csscomb.phpで編集するみたいです。

ちょっといろいろ探ってみたところ、GitHubのissuesに何やら同じ質問されている方を発見！

https://github.com/miripiruni/CSScomb/issues/96

csscomb.phpを編集するのはわかったので、sublime text 2のプラグインが格納されているとこを探ってみたところ以下のフォルダ配下にありました。

Windowsユーザーの方:
AppData\Roaming\Sublime Text 2\Packages\CSScomb\cs\scomb\libs

Macユーザーの方:
~/Library/Application Support/Sublime Text 2/Packages/CSScomb/csscomb/libs

http://csscomb.com/about/よく読んでみると公式ページのABOUTページに記載されていました。。。
How to adjust the order of sorting?箇所です。

その他のテキストエディタの設定ファイルは以下みたいです。

  • In TextMate: /Applications/TextMate.app/Contents/SharedSupport/Bundles/CSS.tmbundle/Support/lib/csscomb.php
  • In Coda: /Users/%YOUR_USER_NAME%/Library/Application Support/Coda/Plug-ins/CSScomb.codaplugin/Contents/Resources/csscomb.php
  • In Sublime Text 2: /Users/%YOUR_USER_NAME%/Library/Application Support/Sublime Text 2/Packages/CSScomb/csscomb/libs/csscomb.php

カスタムしてみる。

csscomb.phpをテキストエディタで開くとずらーといろいろ書かれています。

41行目の$default_sort_orderはデフォルトの指定されている変数

$default_sort_order = '[　省略　]';

411行目の$yandex_sort_orderプロパティのグルーピング指定されている変数
具体的なソートされる内容は、公式サイトtestsページのSort orderに書かれています。

$yandex_sort_order = '[　[省略] , [省略] , [省略]　]';
    /**
     * @param string css
     * @param boolean debug
     * @param json custom_sort_order JSON expected
     * @return string
     *
     * @TODO: https://github.com/miripiruni/CSScomb/issues/21
     */

https://github.com/miripiruni/CSScomb/issues/21
TODOと書かれている箇所へ行くと、指定方法がおそらくロシア語？で書かれています。

動作を確認してみる。

それではさっそく動作確認してみます。

まずは基本の動作チェック

img_000

モジャモジャしたプロパティを選択し、Ctrl+Shift+c

img_002

デフォルト設定のソートがされました。

プロパティ順番を変更した動作

csscomb.phpをテキストエディタで開き、$default_sort_orderの変数内を変更します。

    $default_sort_order = '[
        "position",
        "top",
        "right",
        "bottom",
        "left",
        "z-index",
        "display",
        "visibility",
        
        //以下省略

上記の指定の最上部の指定にfloatを指定してみます。

    $default_sort_order = '[
        "float",
        "position",
        "top",
        "right",
        "bottom",
        "left",
        "z-index",
        "display",
        "visibility",
        
        //以下省略

プロパティを選択し、Ctrl+Shift+c

img_003

CSSプロパティの一番上にfloatプロパティがきました。

プロパティ順番とプロパティグループ分けを変更した動作

次にプロパティグループ分けされた動作を確認するのですが、その際に修正するファイルが増えます。

csscomb.phpと同階層にあるcall_string.phpを修正します。

require_once 'csscomb.php';

/* Обертка для вызова CSScomb */
$csscomb = new csscomb();

/*$sort_type = is_file($argv[2]) ? file_get_contents($argv[2]) : $argv[2];*/
$input = $csscomb->csscomb($argv[1], false, null);

echo $input;

以下、7行目のcsscomb関数の第3引数に'yandex'を指定。

require_once 'csscomb.php';

/* Обертка для вызова CSScomb */
$csscomb = new csscomb();

/*$sort_type = is_file($argv[2]) ? file_get_contents($argv[2]) : $argv[2];*/
$input = $csscomb->csscomb($argv[1], false, 'yandex');

echo $input;

上記のように変更後、プロパティを選択し、Ctrl+Shift+c

img_004

ちょっと分かりずらいですが、position、top、rightとdisplay、floatが分かれた表示になりました。

解説

'yandex'ってなんのこと？と探ってみると、csscomb.phpの411行目の$yandex_sort_order変数を反映する指定みたいです。

$yandex_sort_order = '[　[省略] , [省略] , [省略]　]';

設定ファイルを作る

長々と説明してきましたが、ここからが本題になります。

csscomb.phpを直接編集するのもいいのですが、設定ファイルは別個で持っておくほうがいいなと思い自分の設定をご紹介します。

フォルダ構成

ファイル格納パス:
AppData\Roaming\Sublime Text 2\Packages\CSScomb\cs\scomb\libs

libsフォルダ以下の構成はこちら

  1. call.php
  2. call_string.php(編集します。)
  3. csscomb.php
  4. csscomb_setting.php(新規作成)
  5. license.txt

今回はcsscomb_setting.php、call_string.phpを編集したいとおもいます。

まず、csscomb_setting.phpを新規作成

csscomb_setting.phpを作成し、以下を記述します。

<?php
$custom_sort_order = '[
        [
            "position",
            "z-index",
            "top",
            "right",
            "bottom",
            "left"
        ],
        [
            "display",
            "visibility",
            "float",
            "clear",
            "overflow",
            "overflow-x",
            "overflow-y",
            "-ms-overflow-x",
            "-ms-overflow-y",
            "clip",
            "zoom",
            "flex-direction",
            "flex-order",
            "flex-pack",
            "flex-align"
        ],
        
        //以下省略
        
];
[/php]

<p><strong>$custom_sort_order</strong>変数内を、JSON形式で自分好みのプロパティ順、グループ分け記述してください。</p>

<h3>次に、call_string.phpを編集</h3>


<?php
//csscomb.phpの読み込み
require_once 'csscomb.php';

//csscomb_setting.phpの読み込み
require_once 'csscomb_setting.php';

//csscombクラスのインスタンスを作成
$csscomb = new csscomb();

//csscombインスタンスのcsscomb関数を実行
//csscomb関数の第3引数にカスタマイズしたプロパティ$custom_sort_orderを渡す。
$input = $csscomb->csscomb($argv[1], false, $custom_sort_order);

//出力
echo $input;

今後はcsscomb_setting.phpを編集でCSScombのプロパティ順の設定をすることができました。

まとめ

2部構成で、CSScombをご紹介してきました。

ちょっと痒いとこに手が届く、良いツールさんだなと。まだSCSSの @includeとかの細々した指定もできるとさらにうれしいかなとおもいました。
開発者のSlava Oliyanchukさんも、少しずつアップデートしてくれているので今後のアップデートに期待したいと思います。

customer-story-analytics