There are a number of options you can use, all of them are switched off by default.

Whether to add a semicolon after the last value/mixin.

Acceptable value: true.

Example: { "always-semicolon": true }

/* before */
a { color: red }

/* after */
a { color: red; }

In *.scss and *.less files semicolons are not added after } even if it's part of a value.

Example: { "always-semicolon": true }

// before
div {
    color: tomato;
    font: {
        family: fantasy;
        size: 16px
        }
    }

// after
div {
    color: tomato;
    font: {
        family: fantasy;
        size: 16px;
        }
    }

Set indent for code inside blocks, including media queries and nested rules.

Acceptable values:

• {Number} — number os whitespaces;
• {String} — string with whitespaces and tabs. Note that line breaks are not allowed here.

Example: { 'block-indent': 4 }

// Before:
a {
top: 0;
  p {
      color: tomato;
position: happy;
 }
}

// After:
a {
    top: 0;
    p {
        color: tomato;
        position: happy;
        }
    }

Example: { 'block-indent': '' }

// Before:
a {
top: 0;
  p {
      color: tomato;
position: happy;
 }
}

// After:
a {
top: 0;
p {
color: tomato;
position: happy;
}
}

Unify case of hexadecimal colors.

Acceptable values:

• lower — for lowercase,
• upper — for uppercase.

Example: { "color-case": "lower" }

/* before */
a { color: #FFF }

/* after */
a { color: #fff }

Whether to expand hexadecimal colors or use shorthands.

Acceptable values:

• true — use shorthands;
• false — expand hexadecimal colors to 6 symbols.

Example: { "color-shorthand": true }

/* before */
b { color: #ffcc00 }

/* after */
b { color: #fc0 }

Example: { "color-shorthand": false }

/* before */
b { color: #fc0 }

/* after */
b { color: #ffcc00 }

Unify case of element selectors.

Acceptable values:

• lower — for lowercase;
• upper — for uppercase.

Example: { "element-case": "upper" }

/* before */
li > a { color: red }

/* after */
LI > A { color: red }

Add/remove line break at EOF.

Acceptable values:

• true — add line break;
• false – remove line break.

Example: { "eof-newline": true }

a { color: red } → a { color: red }\n

Example: { "eof-newline": false }

a { color: red }\n → a { color: red }

List files that should be ignored while combing.

Acceptable value:

• {String[]} — array of Ant path patterns.

Example: { "exclude": ["node_modules/**"] } — exclude all files and directories under node_modules dir.

Add/remove leading zero in dimensions.

Acceptable values:

* `true` — add leading zero;
* `false` — remove leading zero.

Example: { "leading-zero": false }

/* before */
p { padding: 0.5em }

/* after */
p { padding: .5em }

Unify quotes style.

Acceptable values:

• single — transform all " to ';
• double — transform all ' to ".

Example: { "quotes": "single" }

/* before */
p[href^="https://"]:before { content: "secure" }

/* after */
p[href^='https://']:before { content: 'secure' }

Remove all rulesets that contain nothing but spaces.

Acceptable value: true

Example: { "remove-empty-rulesets": true }.

a { color: red; } p { /* hey */ } b { } → a { color: red; } p { /* hey */ }

Set sort order.

Note: Use one of predefined configs as an example.

Acceptable values:

• {Array} of rules
• {Array} of arrays of rules for groups separation

Example: { "sort-order": [ "margin", "padding" ] }

/* before */
p {
    padding: 0;
    margin: 0;
}

/* after */
p {
    margin: 0;
    padding: 0;
}

Example: { "sort-order": [ [ "margin", "padding" ], [ "border", "background" ] ] }

/* before */
p {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
}

/* after */
p {
    margin: 0;
    padding: 0;

    border: 0;
    background: none;
}

If you sort properties in *.scss or *.less files, you can use one of 3 keywords in your config:

• $variable — for variable declarations (e.g. $var in Sass or @var in LESS);
• $include — for included mixins (e.g. @include ... and @extend ... in Sass or .mixin() in LESS);
• $import — for @import rules.

Example: { "sort-order": [ [ "$variable" ], [ "$include" ], [ "top", "padding" ] ] }

/* before */
p {
    padding: 0;
    @include mixin($color);
    $color: tomato;
    top: 0;
}

/* after */
p {
    $color: tomato;

    @include mixin($color);

    top: 0;
    padding: 0;
}

Set space after : in declarations.

Acceptable values:

• {Number} — number of whitespaces;
• {String} — string with whitespaces, tabs or line breaks.

Example: { 'space-after-colon': '' }

// Before:
a {
    top: 0;
    color: tomato;
}

// After:
a {
    top:0;
    color:tomato;
}

Example: { 'space-after-colon': 1 }

// Before:
a {
    top:0;
    color:tomato;
}

// After:
a {
    top: 0;
    color: tomato;
}

Set space after combinator (for example, in selectors like p > a).

Acceptable values:

• {Number} — number of whitespaces;
• {String} — string with whitespaces, tabs or line breaks.

Example: { 'space-after-combinator': 1 }

// Before:
p>a { color: panda; }

// After:
p> a { color: panda; }

Example: { 'space-after-combinator': '\n ' }

// Before:
p > a { color: panda; }

// After:
p >
  a { color: panda; }

Set space after {.

Acceptable values:

• {Number} — number of whitespaces;
• {String} — string with whitespaces, tabs or line breaks.

Example: { 'space-after-opening-brace': 1 }

// Before:
a {color: panda;}

// After:
a { color: panda;}

Example: { 'space-after-opening-brace': '\n' }

// Before:
a{color: panda;}

// After:
a{
color: panda;}

Set space before : in declarations.

Acceptable values:

• {Number} — number of whitespaces;
• {String} — string with whitespaces, tabs or line breaks.

Example: { 'space-before-colon': '' }

// Before:
a {
    top : 0;
    color : tomato;
}

// After:
a {
    top: 0;
    color: tomato;
}

Example: { 'space-before-colon': 1 }

// Before:
a {
    top:0;
    color:tomato;
}

// After:
a {
    top :0;
    color :tomato;
}

Set space before combinator (for example, in selectors like p > a).

Acceptable values:

• {Number} — number of whitespaces;
• {String} — string with whitespaces, tabs or line breaks.

Example: { 'space-before-combinator': 1 }

// Before:
p>a { color: panda; }

// After:
p >a { color: panda; }

Example: { 'space-before-combinator': '\n' }

// Before:
p > a { color: panda; }

// After:
p
> a { color: panda; }

Set space before {.

Acceptable values:

• {Number} — number of whitespaces;
• {String} — string with whitespaces, tabs or line breaks.

Example: { 'space-before-opening-brace': 1 }

// Before:
a{
    color: panda;
    }

// After:
a {
    color: panda;
    }

Example: { 'space-before-opening-brace': '\n' }

// Before:
a{
    color: panda;
    }

// After:
a
{
    color: panda;
    }

Whether to trim trailing spaces.

Acceptable value: true.

Example: { "strip-spaces": true }

a { color: red } \n \n \n → a { color: red }\n

a { color: red }\t → a { color: red }

Note: See configuration docs for more information.

Acceptable value:

• {String} — path to the .css file.

Example: { "template": "example.css" }

Whether to remove units in zero-valued dimensions.

Acceptable value: true.

Example: { "unitless-zero": true }

/* before */
img { border: 0px }

/* after */
img { border: 0 }

Whether to align prefixes in properties and values.

Acceptable value: true.

Example: { "vendor-prefix-align": true }

/* before */
a
{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
    background: -moz-linear-gradient(top, #fff 0, #eee 100%);
    background: linear-gradient(to bottom, #fff 0, #eee 100%);
}

/* after */
a
{
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
    background:    -moz-linear-gradient(top, #fff 0, #eee 100%);
    background:         linear-gradient(to bottom, #fff 0, #eee 100%);
}

Whether to use --verbose option in CLI.

Acceptable value: true.

Example: { "verbose": true }

csscomb ./test

✓ test/integral.origin.css
  test/integral.expect.css

2 files processed
1 file fixed
96 ms spent