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