stylelint-scss

What is stylelint-scss?

The stylelint-scss npm package is a plugin for stylelint that provides linting rules specific to SCSS syntax. It helps enforce consistent conventions and avoid errors in your SCSS files.

What are stylelint-scss's main functionalities?

Linting SCSS-specific syntax

This feature allows you to lint SCSS-specific syntax such as @rules, $variables, and nesting. The code sample shows how to enable rules in a stylelint configuration file to disallow unknown @rules, enforce a naming pattern for $variables, and prevent redundant nesting selectors.

"rules": {
  "scss/at-rule-no-unknown": true,
  "scss/dollar-variable-pattern": "^foo-",
  "scss/selector-no-redundant-nesting-selector": true
}

Enforcing best practices

This feature helps enforce best practices in SCSS by preventing common mistakes. The code sample demonstrates enabling rules that ensure placeholders are used with @extend, discourage the use of leading underscores in partial names on @import, and prevent duplicate $variable declarations.

"rules": {
  "scss/at-extend-no-missing-placeholder": true,
  "scss/at-import-no-partial-leading-underscore": true,
  "scss/no-duplicate-dollar-variables": true
}

Customizable rules for SCSS

This feature provides customizable rules tailored for SCSS, allowing you to enforce specific stylistic decisions or prevent certain patterns. The code sample shows rules that enforce no spaces around operators, disallow nested properties, and ensure that dimensions only contain numeric values.

"rules": {
  "scss/operator-no-unspaced": true,
  "scss/declaration-nested-properties": "never",
  "scss/dimension-no-non-numeric-values": true
}

Other packages similar to stylelint-scss

sass-lint

sass-lint is a Node-only Sass linter for both sass and scss syntax. It offers similar functionality to stylelint-scss but is not a plugin for stylelint and has its own set of rules and configuration.

postcss-scss

postcss-scss is a SCSS parser for PostCSS, which allows you to lint SCSS within PostCSS's ecosystem. It can be used with stylelint but does not provide SCSS-specific linting rules on its own.

scss-lint

scss-lint is a Ruby gem that provides linting for SCSS files. It is similar to stylelint-scss in that it focuses on SCSS syntax but requires Ruby and is not integrated with the stylelint ecosystem.

README

at-mixin-pattern

Specify a pattern for Sass/SCSS-like mixin names.

@mixin complex-object ($items: 10) {
/**    ↑
 * The pattern of this */

Options

regex or string

A string will be translated into a RegExp like so new RegExp(yourString) — so be sure to escape properly.

E.g. /foo-.+/

The following patterns are considered warnings:

@mixin boo-bar {

The following patterns are not considered warnings:

@mixin foo-bar {

Changelog

1.1.1

• Fixed: newlines inside braces in at-function-pattern, at-mixin-pattern.
• Fixed: false positives and false negatives in selector-no-redundant-nesting-selector.