pip install sortcss.py
- Create
~/.vim/ftplugin/css.vim
if it's not existed yet. - Open
~/.vim/ftplugin/css.vim
and add new lines below:
" CSS Property Sorter Script (:SortCSS to run)
command! -range=% -nargs=* SortCSS :<line1>,<line2>!python /path/to/sortcss.py <f-args>
usage: sortcss.py [-h] [-g] [--css-props-file [CSS_PROPS_FILE]]
[INFILE] [OUTFILE]
positional arguments:
INFILE Input file
OUTFILE Output file
optional arguments:
-h, --help show this help message and exit
-g, --group group properties
--css-props-file [CSS_PROPS_FILE]
use custom CSS properties list file
You can use custom list by supplying the file to sortcss.py
, the basic format is:
# comment
margin
padding
background
color
The order of properties is the order thatsortcss.py
sort by and the blank line also indicates separate groups. If you have -g
, then sortcss.py
will insert a blank line between the groups.
- Open a CSS file in Vim.
- Turn in to Visual mode.
- Select CSS definition(s). At least 1 set of
{
to}
. - Type
:SortCSS
and return.
This will automatically sort your CSS properties.
- You can just type
:SortCSS
so that entire properties will be sorted in a file. - You can also append arguments as if using
sortcss.py
directly, e.g.:SortCSS -g
for grouping.
You can find more information about the script below: http://lab.youck.org/css-property-order.html
This script is based on Kyo Nagashima's Perl script: http://hail2u.net/blog/coding/perl-sort-css-properties.html
- Yu-Jie Lin, http://yjl.im
- Yu I., Twitter @japboy
- Kyo Nagashima kyo@hail2u.net, http://hail2u.net/
- xaicron, http://blog.livedoor.jp/xaicron/
MIT License, see COPYING