☰

カラー属性でCSSファイルを並べ替える

tag-icon • tag-icon shell-script sort html
カラー属性でCSSファイルを並べ替える

CSSファイルを色でソートするスクリプトを作成したいと思います。たとえば、

.actions_menu_forgot_password_link:hover {color: #deca9b;}
.login_popup_forgot_password_link {color: #ddeffb;}
.login_popup_forgot_password_link:hover {color: #deca9b;}
.trading_data_allTrades_button {color: #ddeffb; }

予想される結果：

.actions_menu_forgot_password_link:hover {color: #deca9b;}
.login_popup_forgot_password_link:hover {color: #deca9b;}
.login_popup_forgot_password_link {color: #ddeffb;}
.trading_data_allTrades_button {color: #ddeffb; }

答え1

次のシェルスクリプトを作成できます。

column  -s "#" -o "#" -t css.txt | sort -r -k2

これにより、出力が最初に劣化し、2番目の列の行が逆ソートされます。

おそらく欠点は、コードが少し変更されますが（それほど悪くはありません）、必ずしも16進形式の色が必要であるということです。 「color：blue」などの記号を使用すると機能しません。

答え2

この入力を使用するには、sortが文字で始まる行をソートするように指示するだけです#。#区切られたフィールドがあり、2番目のフィールドをソートキーとして使用したいと言います（または、1行当たり1つのフィールドしかないと仮定すると、#2番目のフィールドで始まるすべてのフィールドをソートキーとして使用しようとしています）。 。

sort -t '#' -k 2

複数の属性の色が同じ場合は、-s同じ色の属性間の元の順序を維持するオプションを追加してください。または-k 1,1 後ろに -k 2属性名をセカンダリソートキーとして使用します（すべてのインデントもこのセカンダリソートキーに含まれています）。

これはあなたのユースケースに十分です。実際のユースケースがより複雑な場合は、入力をソートする前に処理する必要があります。ソートキーを直接識別できないデータをソートするために使用するには、一般的なアイデアでは、行変換ツールsort（sedやawkなど）を使用して行の先頭にソートキーをコピーしてソートし、最後にコピーしたソートキーを削除します。たとえば、コピーされたソートキーからカラー名を16進値に変換する追加の手順を含む、このユースケースに適用される手法は次のとおりです（元の値は変更されません）。

sed 's/^.*color: *\([^;]*\);/\1;&/' |
sed 's/^black;/#000000;/; s/^red;/#ff0000;/; #etc.' |
sort |
sed 's/^[^;]*;//'

関連情報