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;
}

When there are properties that are not mentioned in the sort-order option, they are inserted after all the sorted properties in the new group in the same order they were in the source stylesheet.

You can override this by using a “leftovers” token: ... — just place it either in its own group, or near other properties in any other group and CSSComb would place all the properties that were not sorted where the ... was in sort-order.

So, with this value:

{
    "sort-order": [
        ["$variable"],
        ["position"],
        ["...", "border"],
        ["$include"],
        ["font"]
    ]
}

everything would go into five groups: variables, then group with position, then group containing all the leftovers plus the border, then group with all includes and then the font.

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 after selector delimiter.

Acceptable values:

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

Example: { 'space-after-selector-delimiter': 1 }

// Before:
a,b{
    color: panda;
    }

// After:
a, b {
    color: panda;
    }

Example: { 'space-after-selector-delimiter': '\n' }

// Before:
a, b{
    color: panda;
    }

// After:
a,
b{
    color: panda;
    }

Set space before }.

Acceptable values:

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

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

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

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

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

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

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

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;
    }

Set space before selector delimiter.

Acceptable values:

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

Example: { 'space-before-selector-delimiter': 0 }

// Before:
a , b{
    color: panda;
    }

// After:
a, b {
    color: panda;
    }

Example: { 'space-before-selector-delimiter': '\n' }

// Before:
a, b{
    color: panda;
    }

// After:
a
,b{
    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 }

Set tab size (number of spaces to replace hard tabs).

Acceptable values:

• {Number} — number of whitespaces;

Example: { 'tab-size': 2 }

// Before:
a{
	color: panda;
	}

// After:
a {
  color: panda;
  }

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