Lint Rule Comparison

This is a comparison of scss-lint rules recommended by Sass Guidelines with similar stylelint rules and not a direct comparison of scss-lint rules with stylelint rules. scss-lint does an excellent job of linting .scss files. Stylelint also has the ability to lint .scss files and with the help of stylelint-scss, it can match a lot of the linter rules from scss-lint.

scss-lint rule used in Sass Guidelines	Equivalent lint rules in stylelint
BangFormat enabled space_before_bang true space_after_bang false	declaration-bang-space-before / declaration-bang-space-after declaration-bang-space-before always declaration-bang-space-after never
BemDepth enabled max_elements 1	-
BorderZero enabled convention zero	declaration-property-value-blacklist "/^border/": ["none"]
ColorKeyword enabled	color-named never
DebugStatement enabled	at-rule-blacklist ["debug"]
DeclarationOrder enabled	declaration-block-properties-order alphabetical Plugin: [stylelint-order][stylelint-order] [order/order][]
[
[
"custom-properties",
"dollar-variables",
{
"type": "at-rule",
"name": "extend"
},
{
"type": "at-rule",
"name": "include",
"hasBlock": false
},
"declarations",
{
"type": "at-rule",
"hasBlock": true
},
{
"type": "at-rule",
"name": "include",
"hasBlock": true
},
{
"type": "rule",
"selector": "/^&:\\w/"
},
{
"type": "rule",
"selector": "/^&::\\w/"
},
"rules"
]
]

| | DisableLinterReason enabled
| stylelint-disable-reason always-before | | ElsePlacement enabled
style
same_line | - | | EmptyLineBetweenBlocks enabled
ignore_single_line_blocks
true






| rule-nested-empty-line-before / rule-non-nested-empty-line-before
always-multi-line

except
first-nested

ignore
after-comment | | EmptyRule enabled | block-no-empty true | | FinalNewline enabled
present
true | no-missing-end-of-source-newline

true
| | HexLength enabled
style
short | color-hex-length

short | | HexNotation enabled
style
lowercase | color-hex-case

lower | | HexValidation enabled
| color-no-invalid-hex true | | IdSelector enabled | selector-no-id true | | ImportPath enabled
leading_underscore
false

filename_extension
false | Plugin: stylelint-scss
at-import-no-partial-leading-underscore
true

at-import-partial-extension-blacklist
["scss"]
| | Indentation enabled
allow_non_nested_indentation
true

character
space

width
2 | indentation
-
-


number


2 | | LeadingZero enabled
style
include_zero | number-leading-zero

always | | NameFormat enabled
allow_leading_underscore
true

convention
hyphenated_lowercase | Plugin: stylelint-scss
scss/at-function-pattern, scss/at-mixin-pattern, scss/dollar-variable-pattern


^[a-z]+([a-z0-9-]+[a-z0-9]+)?$ | | NestingDepth enabled
max_depth
number 1 | max-nesting-depth

1 | | PlaceholderInExtend enabled
| Plugin: stylelint-scss
scss/at-extend-no-missing-placeholder
true | | PrivateNamingConvention enabled
prefix
_ | - | | PropertySpelling enabled
extra_properties
[] | property-no-unknown
ignoreProperties
[] | | PseudoElement enabled

| selector-pseudo-element-colon-notation double
selector-pseudo-element-no-unknown true | | QualifyingElement enabled
allow_element_with_attribute
false

allow_element_with_class
false

allow_element_with_id
false | selector-no-qualifying-type true








| | SelectorDepth enabled
max_depth
3 | selector-max-compound-selectors

3 | | SelectorFormat enabled
convention
hyphenated_lowercase

class_convention
^(?:u|is|has)\-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:\-[a-z][a-zA-Z0-9]*)?(?:\-\-[a-z][a-zA-Z0-9]*)?$




| selector-class-pattern



^(?:u|is|has)\-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:\-[a-z][a-zA-Z0-9]*)?(?:\-\-[a-z][a-zA-Z0-9]*)?$

Plugin: stylelint-scss
scss/percent-placeholder-pattern
^[a-z]+([a-z0-9-]+[a-z0-9]+)?$ | | Shorthand enabled
| shorthand-property-no-redundant-values true | | SingleLinePerProperty enabled
allow_single_line_rule_sets
false

| declaration-block-semicolon-newline-after
always
declaration-block-single-line-max-declarations
1 | | SingleLinePerSelector enabled
| selector-list-comma-newline-after always | | SpaceAfterComma enabled



| function-comma-space-after
always-single-line
Stylelint does not detect issues with commas within a mixin | | SpaceAfterPropertyColon enabled
style
one_space | declaration-colon-space-after

always-single-line | | SpaceAfterPropertyName enabled
| declaration-colon-space-before never | | SpaceAfterVariableColon enabled
style
at_least_one_space | Plugin: stylelint-scss
scss/dollar-variable-colon-space-after always

| | SpaceAfterVariableName enabled| Plugin: stylelint-scss
scss/dollar-variable-colon-space-before never| | SpaceAroundOperator enabled
style
one_space


| -
stylelint has function-calc-no-unspaced-operator but stylelint does not currently support checking the space around operator inside of scss specific code
Issue logged with stylelint-scss | | SpaceBeforeBrace enabled
allow_single_line_padding
true

style
space | block-opening-brace-space-before
-




always | | SpaceBetweenParens enabled
spaces
0 | function-parentheses-space-inside

never | | StringQuotes enabled
style
single_quotes | string-quotes

single | | TrailingSemicolon enabled

| declaration-block-trailing-semicolon always
declaration-block-semicolon-space-before never | | TrailingZero enabled
| number-no-trailing-zeros true | | UnnecessaryMantissa enabled
| number-no-trailing-zeros true | | UnnecessaryParentReference enabled

| Plugin: stylelint-scss
selector-no-redundant-nesting-selector true | | UrlQuotes enabled
| function-url-quotes always| | VendorPrefix enabled




identifier_list
base| property-no-vendor-prefix true
selector-no-vendor-prefix true
media-feature-name-no-vendor-prefix true
at-rule-no-vendor-prefix true
value-no-vendor-prefix true


| | ZeroUnit enabled
| length-zero-no-unit true |