Linting Rules

# Rule configuration in .sass-lint.yml
rules:
  rule-name:
    - severity    # 0 = off, 1 = warning, 2 = error
    - options     # Rule-specific options object

{
  rules: {
    'rule-name': [severity, options]
  }
}

# Complete list of sass-lint rules
attribute-quotes          # Enforce quotes around attribute selectors
bem-depth                 # Limit BEM depth
border-zero               # Enforce consistent zero value for border properties
brace-style               # Enforce consistent brace style
class-name-format         # Enforce naming convention for class names
clean-import-paths        # Clean @import paths (remove extensions/underscores)
declarations-before-nesting # Enforce property declarations before nested rules
empty-args                # Enforce empty argument parentheses consistency
empty-line-between-blocks # Enforce empty lines between CSS blocks
extends-before-declarations # Enforce @extend before property declarations
extends-before-mixins     # Enforce @extend before @include declarations
final-newline             # Enforce newline at end of file
force-attribute-nesting   # Force nesting of attribute selectors
force-element-nesting     # Force nesting of element selectors
force-pseudo-nesting      # Force nesting of pseudo selectors
function-name-format      # Enforce naming convention for functions
hex-length                # Enforce short or long hex color values
hex-notation              # Enforce uppercase or lowercase hex colors
id-name-format            # Enforce naming convention for ID selectors
indentation               # Enforce consistent indentation
leading-zero              # Enforce leading zeros in decimal numbers
max-file-line-count       # Limit maximum lines per file
max-line-length           # Limit maximum line length
mixin-name-format         # Enforce naming convention for mixins
mixins-before-declarations # Enforce @include before property declarations
nesting-depth             # Limit maximum nesting depth
no-attribute-selectors    # Disallow attribute selectors
no-color-hex              # Disallow hex color values
no-color-keywords         # Disallow color keywords (red, blue, etc.)
no-color-literals         # Disallow color literals (require variables)
no-combinators            # Disallow combinator selectors
no-css-comments           # Disallow CSS-style comments /* */
no-debug                  # Disallow @debug statements
no-disallowed-properties  # Disallow specified properties
no-duplicate-properties   # Disallow duplicate properties
no-empty-rulesets         # Disallow empty rulesets
no-extends                # Disallow @extend
no-ids                    # Disallow ID selectors
no-important              # Disallow !important
no-invalid-hex            # Disallow invalid hex color values
no-mergeable-selectors    # Disallow mergeable selectors
no-misspelled-properties  # Disallow misspelled properties
no-qualifying-elements    # Disallow qualifying elements (div.class)
no-trailing-whitespace    # Disallow trailing whitespace
no-trailing-zero          # Disallow trailing zeros in numbers
no-transition-all         # Disallow transition: all
no-universal-selectors    # Disallow universal selectors (*)
no-url-domains            # Disallow domains in URLs
no-url-protocols          # Disallow protocols in URLs (http://, https://)
no-vendor-prefixes        # Disallow vendor prefixes
no-warn                   # Disallow @warn statements
one-declaration-per-line  # Enforce one property declaration per line
placeholder-in-extend     # Enforce placeholder selectors in @extend
placeholder-name-format   # Enforce naming convention for placeholders
property-sort-order       # Enforce alphabetical or custom property order
property-units            # Enforce specific units for properties
pseudo-element            # Enforce double colon syntax for pseudo-elements
quotes                    # Enforce single or double quotes
shorthand-values          # Enforce shorthand property values
single-line-per-selector  # Enforce one selector per line
space-after-bang          # Enforce space after !important
space-after-colon         # Enforce space after colons
space-after-comma         # Enforce space after commas
space-around-operator     # Enforce space around operators
space-before-bang         # Enforce space before !important
space-before-brace        # Enforce space before opening braces
space-before-colon        # Enforce space before colons
space-between-parens      # Enforce space between parentheses
trailing-semicolon        # Enforce trailing semicolons
url-quotes                # Enforce quotes around URLs
variable-for-property     # Enforce variables for specific properties
variable-name-format      # Enforce naming convention for variables
zero-unit                 # Enforce omitting units for zero values

# Enforce @extend before @mixin declarations
extends-before-mixins:
  - 2  # error

# Enforce @extend before property declarations
extends-before-declarations:
  - 2  # error

# Require placeholder selectors in @extend
placeholder-in-extend:
  - 2  # error

# Enforce @mixin before property declarations
mixins-before-declarations:
  - 2  # error

// ✓ Good - extends before mixins and declarations
.button {
  @extend %button-base;
  @include border-radius(3px);
  color: blue;
}

// ✗ Bad - mixins before extends
.button {
  @include border-radius(3px);
  @extend %button-base;  // Should come first
}

# One declaration per line
one-declaration-per-line:
  - 2  # error

# Empty lines between CSS blocks
empty-line-between-blocks:
  - 1  # warning
  - include: true
    allow-single-line-rulesets: false

# Single line per selector
single-line-per-selector:
  - 2  # error

// ✓ Good - proper spacing
.header {
  color: blue;
  margin: 0;
}

.footer {
  background: gray;
}

// ✗ Bad - multiple declarations per line
.header { color: blue; margin: 0; }

# Disallow attribute selectors
no-attribute-selectors:
  - 2  # error

# Disallow hex color values
no-color-hex:
  - 0  # off

# Disallow color keywords (red, blue, etc.)
no-color-keywords:
  - 1  # warning

# Disallow color literals in favor of variables
no-color-literals:
  - 2  # error
  - allow-map-identifiers: true
    allow-rgba: false
    allow-variable-identifiers: true

# Disallow combinator selectors
no-combinators:
  - 0  # off

# Disallow CSS comments /* */
no-css-comments:
  - 1  # warning

# Disallow @debug statements
no-debug:
  - 2  # error

# Disallow specific properties
no-disallowed-properties:
  - 2  # error
  - properties: ['float', 'text-align']

# Disallow duplicate properties
no-duplicate-properties:
  - 2  # error
  - exclude: ['fallbacks']

# Disallow empty rulesets
no-empty-rulesets:
  - 2  # error

# Disallow @extend
no-extends:
  - 0  # off

# Disallow ID selectors
no-ids:
  - 2  # error

# Disallow !important
no-important:
  - 1  # warning

# Disallow invalid hex values
no-invalid-hex:
  - 2  # error

# Disallow mergeable selectors
no-mergeable-selectors:
  - 1  # warning
  - whitelist: []

# Disallow misspelled properties
no-misspelled-properties:
  - 2  # error

# Disallow qualifying elements
no-qualifying-elements:
  - 2  # error
  - allow-element-with-attribute: false
    allow-element-with-class: false
    allow-element-with-id: false

# Disallow trailing whitespace
no-trailing-whitespace:
  - 2  # error

# Disallow trailing zeros
no-trailing-zero:
  - 2  # error

# Disallow transition: all
no-transition-all:
  - 1  # warning

# Disallow universal selectors
no-universal-selectors:
  - 2  # error

# Disallow domains in URLs
no-url-domains:
  - 2  # error

# Disallow protocols in URLs
no-url-protocols:
  - 2  # error

# Disallow vendor prefixes
no-vendor-prefixes:
  - 1  # warning
  - additional-identifiers: []
    excluded-identifiers: []

# Disallow @warn statements
no-warn:
  - 2  # error

// ✓ Good - using variables instead of literals
$primary-color: #3498db;
.button {
  background: $primary-color;
}

// ✗ Bad - color literal
.button {
  background: #3498db;  // Should use variable
}

// ✓ Good - class selector only
.navigation {}

// ✗ Bad - ID selector
#navigation {}  // IDs not allowed

# Property declarations before nested rules
declarations-before-nesting:
  - 2  # error

# Force attribute nesting
force-attribute-nesting:
  - 0  # off

# Force element nesting
force-element-nesting:
  - 0  # off

# Force pseudo nesting
force-pseudo-nesting:
  - 0  # off

# Limit nesting depth
nesting-depth:
  - 2  # error
  - max-depth: 3

// ✓ Good - declarations before nesting
.card {
  padding: 1rem;
  background: white;
  
  .title {
    font-size: 1.2em;
  }
}

// ✗ Bad - nesting before declarations
.card {
  .title {
    font-size: 1.2em;
  }
  padding: 1rem;  // Should come first
}

# Class name format
class-name-format:
  - 2  # error
  - allow-leading-underscore: true
    convention: hyphenatedlowercase  # or camelcase, snakecase, strictbem, hyphenatedbem
    convention-explanation: false
    ignore: []

# Function name format
function-name-format:
  - 2  # error
  - allow-leading-underscore: true
    convention: hyphenatedlowercase
    convention-explanation: false

# ID name format
id-name-format:
  - 2  # error
  - convention: hyphenatedlowercase

# Mixin name format
mixin-name-format:
  - 2  # error
  - allow-leading-underscore: true
    convention: hyphenatedlowercase

# Placeholder name format
placeholder-name-format:
  - 2  # error
  - convention: hyphenatedlowercase

# Variable name format
variable-name-format:
  - 2  # error
  - allow-leading-underscore: true
    convention: hyphenatedlowercase

// ✓ Good - hyphenated lowercase
.my-button {}
$primary-color: blue;
@mixin button-style() {}

// ✗ Bad - camelCase (if hyphenatedlowercase required)
.myButton {}
$primaryColor: blue;
@mixin buttonStyle() {}

# Attribute quote style
attribute-quotes:
  - 2  # error
  - include: true

# BEM depth limitations
bem-depth:
  - 1  # warning
  - max-depth: 2

# Border zero values
border-zero:
  - 2  # error
  - convention: zero  # or none

# Brace style
brace-style:
  - 2  # error
  - allow-single-line: false
    style: 1tbs  # or stroustrup, allman

# Clean import paths
clean-import-paths:
  - 2  # error
  - filename-extension: false
    leading-underscore: false

# Empty argument handling
empty-args:
  - 2  # error
  - include: true

# Hex color length
hex-length:
  - 2  # error
  - style: short  # or long

# Hex notation case
hex-notation:
  - 2  # error
  - style: lowercase  # or uppercase

# Indentation
indentation:
  - 2  # error
  - size: 2  # or tab

# Leading zero handling
leading-zero:
  - 2  # error
  - include: false  # or true

# Maximum line length
max-line-length:
  - 1  # warning
  - length: 80

# Maximum file line count
max-file-line-count:
  - 1  # warning
  - length: 300

# Property sort order
property-sort-order:
  - 1  # warning
  - order: alphabetical  # or smacss, recess, concentric, or custom array
    ignore-custom-properties: false

# Pseudo-element syntax
pseudo-element:
  - 2  # error

# Quote style
quotes:
  - 2  # error
  - style: single  # or double

# Shorthand values
shorthand-values:
  - 2  # error
  - allowed-shorthands: [1, 2, 3, 4]

# URL quotes
url-quotes:
  - 2  # error

# Variable usage for properties
variable-for-property:
  - 1  # warning
  - properties: ['color', 'background-color']

# Zero unit handling
zero-unit:
  - 2  # error
  - include: false

// ✓ Good - consistent style
.button {
  padding: 0.5rem 1rem;
  margin: 0;
  color: #fff;
  background: url('icon.png');
}

// ✗ Bad - inconsistent style
.button{
  padding: .5rem 1rem;
  margin: 0px;
  color: #FFFFFF;
  background: url(icon.png);
}

# Space after comma
space-after-comma:
  - 2  # error
  - include: true

# Space before colon
space-before-colon:
  - 2  # error
  - include: false

# Space after colon
space-after-colon:
  - 2  # error
  - include: true

# Space before brace
space-before-brace:
  - 2  # error
  - include: true

# Space before !important
space-before-bang:
  - 2  # error
  - include: true

# Space after !important
space-after-bang:
  - 2  # error
  - include: false

# Space between parentheses
space-between-parens:
  - 2  # error
  - include: false

# Space around operators
space-around-operator:
  - 2  # error
  - include: true

// ✓ Good - proper spacing
.button {
  margin: 0 1rem;
  padding: calc(1rem + 2px);
  font-family: 'Arial', sans-serif;
  color: red !important;
}

// ✗ Bad - improper spacing
.button{
  margin:0 1rem;
  padding:calc(1rem+2px);
  font-family:'Arial',sans-serif;
  color:red!important;
}

# Trailing semicolon requirements
trailing-semicolon:
  - 2  # error
  - include: true

# Final newline requirements
final-newline:
  - 2  # error
  - include: true

# Severity options for all rules
0  # Off - rule is disabled
1  # Warning - rule violation generates warning
2  # Error - rule violation generates error

rules:
  # Complex rule with multiple options
  indentation:
    - 2
    - size: 2  # 2 spaces or 'tab'
  
  class-name-format:
    - 2
    - convention: strictbem
      allow-leading-underscore: false
      ignore: ['js-*']
  
  property-sort-order:
    - 1
    - order:
        - display
        - position
        - top
        - right
        - bottom
        - left
        # ... custom order array

# Extend from built-in configurations
extends: sass-lint:recommended

# Override specific rules
rules:
  indentation:
    - 2
    - size: 4
  no-ids: 0