Search code examples
csssasscoding-stylestylesheetstylelint

How I should check indentation in SASS file with stylelint?


I try to use stylelint to check my SASS files. When I set rule

"indentation": "tab"

stylelint throws next erros

 2:1   ✖  Expected indentation of 1 tab   indentation
 3:1   ✖  Expected indentation of 1 tab   indentation
 5:1   ✖  Expected indentation of 1 tab   indentation
 8:3   ✖  Expected indentation of 1 tab   indentation
11:3   ✖  Expected indentation of 1 tab   indentation
14:3   ✖  Expected indentation of 1 tab   indentation
....

how to check indent correctly?

UPD: top of the styles:

@import "theme/bootstrap"
@import "theme/bootstrap-theme"
@import "theme/theme"

@keyframes hide-notifi

    0%
        top: 0

    75%
        top: 0

    100%
        top: -100%

Solution

  • stylelint is not currently compatible with the whitespace-based SASS syntax.

    To quote the stylelint.io website:

    Understands CSS-like syntaxes: The linter is powered by PostCSS, so it understands any syntax that PostCSS can parse, including SCSS, SugarSS, and experimental support for Less.

    You could adopt SugarSS, which is a whitespace-based syntax. When combined with the precss PostCSS plugin pack, you'll have something comparable to whitespace-based SASS.

    Another option is contributing a SASS parser to the PostCSS community.

    Alternatively, you can use SASS-lint which supports SASS syntax, but has a different set of features to stylelint.