0
# Linting Rules
1

2
Sass Lint provides 73 comprehensive linting rules covering syntax, formatting, best practices, and Sass-specific concerns. Rules are organized into logical categories and can be configured individually with various options.
3

4
## Rule Configuration Format
5

6
```yaml { .api }
7
# Rule configuration in .sass-lint.yml
8
rules:
9
  rule-name:
10
    - severity    # 0 = off, 1 = warning, 2 = error
11
    - options     # Rule-specific options object
12
```
13

14
**JavaScript Configuration:**
15
```javascript { .api }
16
{
17
  rules: {
18
    'rule-name': [severity, options]
19
  }
20
}
21
```
22

23
## Complete Rule List
24

25
All 73 available rules organized alphabetically:
26

27
```yaml { .api }
28
# Complete list of sass-lint rules
29
attribute-quotes          # Enforce quotes around attribute selectors
30
bem-depth                 # Limit BEM depth
31
border-zero               # Enforce consistent zero value for border properties
32
brace-style               # Enforce consistent brace style
33
class-name-format         # Enforce naming convention for class names
34
clean-import-paths        # Clean @import paths (remove extensions/underscores)
35
declarations-before-nesting # Enforce property declarations before nested rules
36
empty-args                # Enforce empty argument parentheses consistency
37
empty-line-between-blocks # Enforce empty lines between CSS blocks
38
extends-before-declarations # Enforce @extend before property declarations
39
extends-before-mixins     # Enforce @extend before @include declarations
40
final-newline             # Enforce newline at end of file
41
force-attribute-nesting   # Force nesting of attribute selectors
42
force-element-nesting     # Force nesting of element selectors
43
force-pseudo-nesting      # Force nesting of pseudo selectors
44
function-name-format      # Enforce naming convention for functions
45
hex-length                # Enforce short or long hex color values
46
hex-notation              # Enforce uppercase or lowercase hex colors
47
id-name-format            # Enforce naming convention for ID selectors
48
indentation               # Enforce consistent indentation
49
leading-zero              # Enforce leading zeros in decimal numbers
50
max-file-line-count       # Limit maximum lines per file
51
max-line-length           # Limit maximum line length
52
mixin-name-format         # Enforce naming convention for mixins
53
mixins-before-declarations # Enforce @include before property declarations
54
nesting-depth             # Limit maximum nesting depth
55
no-attribute-selectors    # Disallow attribute selectors
56
no-color-hex              # Disallow hex color values
57
no-color-keywords         # Disallow color keywords (red, blue, etc.)
58
no-color-literals         # Disallow color literals (require variables)
59
no-combinators            # Disallow combinator selectors
60
no-css-comments           # Disallow CSS-style comments /* */
61
no-debug                  # Disallow @debug statements
62
no-disallowed-properties  # Disallow specified properties
63
no-duplicate-properties   # Disallow duplicate properties
64
no-empty-rulesets         # Disallow empty rulesets
65
no-extends                # Disallow @extend
66
no-ids                    # Disallow ID selectors
67
no-important              # Disallow !important
68
no-invalid-hex            # Disallow invalid hex color values
69
no-mergeable-selectors    # Disallow mergeable selectors
70
no-misspelled-properties  # Disallow misspelled properties
71
no-qualifying-elements    # Disallow qualifying elements (div.class)
72
no-trailing-whitespace    # Disallow trailing whitespace
73
no-trailing-zero          # Disallow trailing zeros in numbers
74
no-transition-all         # Disallow transition: all
75
no-universal-selectors    # Disallow universal selectors (*)
76
no-url-domains            # Disallow domains in URLs
77
no-url-protocols          # Disallow protocols in URLs (http://, https://)
78
no-vendor-prefixes        # Disallow vendor prefixes
79
no-warn                   # Disallow @warn statements
80
one-declaration-per-line  # Enforce one property declaration per line
81
placeholder-in-extend     # Enforce placeholder selectors in @extend
82
placeholder-name-format   # Enforce naming convention for placeholders
83
property-sort-order       # Enforce alphabetical or custom property order
84
property-units            # Enforce specific units for properties
85
pseudo-element            # Enforce double colon syntax for pseudo-elements
86
quotes                    # Enforce single or double quotes
87
shorthand-values          # Enforce shorthand property values
88
single-line-per-selector  # Enforce one selector per line
89
space-after-bang          # Enforce space after !important
90
space-after-colon         # Enforce space after colons
91
space-after-comma         # Enforce space after commas
92
space-around-operator     # Enforce space around operators
93
space-before-bang         # Enforce space before !important
94
space-before-brace        # Enforce space before opening braces
95
space-before-colon        # Enforce space before colons
96
space-between-parens      # Enforce space between parentheses
97
trailing-semicolon        # Enforce trailing semicolons
98
url-quotes                # Enforce quotes around URLs
99
variable-for-property     # Enforce variables for specific properties
100
variable-name-format      # Enforce naming convention for variables
101
zero-unit                 # Enforce omitting units for zero values
102
```
103

104
## Rule Categories
105

106
### Extends and Mixins Rules
107

108
Rules governing the placement and usage of `@extend` and `@mixin` declarations.
109

110
```yaml { .api }
111
# Enforce @extend before @mixin declarations
112
extends-before-mixins:
113
  - 2  # error
114

115
# Enforce @extend before property declarations
116
extends-before-declarations:
117
  - 2  # error
118

119
# Require placeholder selectors in @extend
120
placeholder-in-extend:
121
  - 2  # error
122

123
# Enforce @mixin before property declarations
124
mixins-before-declarations:
125
  - 2  # error
126
```
127

128
**Usage Examples:**
129

130
```scss
131
// ✓ Good - extends before mixins and declarations
132
.button {
133
  @extend %button-base;
134
  @include border-radius(3px);
135
  color: blue;
136
}
137

138
// ✗ Bad - mixins before extends
139
.button {
140
  @include border-radius(3px);
141
  @extend %button-base;  // Should come first
142
}
143
```
144

145
### Line Spacing and Layout Rules
146

147
Rules controlling whitespace, line breaks, and overall code layout.
148

149
```yaml { .api }
150
# One declaration per line
151
one-declaration-per-line:
152
  - 2  # error
153

154
# Empty lines between CSS blocks
155
empty-line-between-blocks:
156
  - 1  # warning
157
  - include: true
158
    allow-single-line-rulesets: false
159

160
# Single line per selector
161
single-line-per-selector:
162
  - 2  # error
163
```
164

165
**Usage Examples:**
166

167
```scss
168
// ✓ Good - proper spacing
169
.header {
170
  color: blue;
171
  margin: 0;
172
}
173

174
.footer {
175
  background: gray;
176
}
177

178
// ✗ Bad - multiple declarations per line
179
.header { color: blue; margin: 0; }
180
```
181

182
### Disallow/Restriction Rules
183

184
Rules that prohibit certain CSS/Sass features for consistency or best practices.
185

186
```yaml { .api }
187
# Disallow attribute selectors
188
no-attribute-selectors:
189
  - 2  # error
190

191
# Disallow hex color values
192
no-color-hex:
193
  - 0  # off
194

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

199
# Disallow color literals in favor of variables
200
no-color-literals:
201
  - 2  # error
202
  - allow-map-identifiers: true
203
    allow-rgba: false
204
    allow-variable-identifiers: true
205

206
# Disallow combinator selectors
207
no-combinators:
208
  - 0  # off
209

210
# Disallow CSS comments /* */
211
no-css-comments:
212
  - 1  # warning
213

214
# Disallow @debug statements
215
no-debug:
216
  - 2  # error
217

218
# Disallow specific properties
219
no-disallowed-properties:
220
  - 2  # error
221
  - properties: ['float', 'text-align']
222

223
# Disallow duplicate properties
224
no-duplicate-properties:
225
  - 2  # error
226
  - exclude: ['fallbacks']
227

228
# Disallow empty rulesets
229
no-empty-rulesets:
230
  - 2  # error
231

232
# Disallow @extend
233
no-extends:
234
  - 0  # off
235

236
# Disallow ID selectors
237
no-ids:
238
  - 2  # error
239

240
# Disallow !important
241
no-important:
242
  - 1  # warning
243

244
# Disallow invalid hex values
245
no-invalid-hex:
246
  - 2  # error
247

248
# Disallow mergeable selectors
249
no-mergeable-selectors:
250
  - 1  # warning
251
  - whitelist: []
252

253
# Disallow misspelled properties
254
no-misspelled-properties:
255
  - 2  # error
256

257
# Disallow qualifying elements
258
no-qualifying-elements:
259
  - 2  # error
260
  - allow-element-with-attribute: false
261
    allow-element-with-class: false
262
    allow-element-with-id: false
263

264
# Disallow trailing whitespace
265
no-trailing-whitespace:
266
  - 2  # error
267

268
# Disallow trailing zeros
269
no-trailing-zero:
270
  - 2  # error
271

272
# Disallow transition: all
273
no-transition-all:
274
  - 1  # warning
275

276
# Disallow universal selectors
277
no-universal-selectors:
278
  - 2  # error
279

280
# Disallow domains in URLs
281
no-url-domains:
282
  - 2  # error
283

284
# Disallow protocols in URLs
285
no-url-protocols:
286
  - 2  # error
287

288
# Disallow vendor prefixes
289
no-vendor-prefixes:
290
  - 1  # warning
291
  - additional-identifiers: []
292
    excluded-identifiers: []
293

294
# Disallow @warn statements
295
no-warn:
296
  - 2  # error
297
```
298

299
**Usage Examples:**
300

301
```scss
302
// ✓ Good - using variables instead of literals
303
$primary-color: #3498db;
304
.button {
305
  background: $primary-color;
306
}
307

308
// ✗ Bad - color literal
309
.button {
310
  background: #3498db;  // Should use variable
311
}
312

313
// ✓ Good - class selector only
314
.navigation {}
315

316
// ✗ Bad - ID selector
317
#navigation {}  // IDs not allowed
318
```
319

320
### Nesting Rules
321

322
Rules controlling Sass nesting depth and structure.
323

324
```yaml { .api }
325
# Property declarations before nested rules
326
declarations-before-nesting:
327
  - 2  # error
328

329
# Force attribute nesting
330
force-attribute-nesting:
331
  - 0  # off
332

333
# Force element nesting
334
force-element-nesting:
335
  - 0  # off
336

337
# Force pseudo nesting
338
force-pseudo-nesting:
339
  - 0  # off
340

341
# Limit nesting depth
342
nesting-depth:
343
  - 2  # error
344
  - max-depth: 3
345
```
346

347
**Usage Examples:**
348

349
```scss
350
// ✓ Good - declarations before nesting
351
.card {
352
  padding: 1rem;
353
  background: white;
354
  
355
  .title {
356
    font-size: 1.2em;
357
  }
358
}
359

360
// ✗ Bad - nesting before declarations
361
.card {
362
  .title {
363
    font-size: 1.2em;
364
  }
365
  padding: 1rem;  // Should come first
366
}
367
```
368

369
### Name Format Convention Rules
370

371
Rules enforcing naming conventions for classes, IDs, variables, functions, and mixins.
372

373
```yaml { .api }
374
# Class name format
375
class-name-format:
376
  - 2  # error
377
  - allow-leading-underscore: true
378
    convention: hyphenatedlowercase  # or camelcase, snakecase, strictbem, hyphenatedbem
379
    convention-explanation: false
380
    ignore: []
381

382
# Function name format
383
function-name-format:
384
  - 2  # error
385
  - allow-leading-underscore: true
386
    convention: hyphenatedlowercase
387
    convention-explanation: false
388

389
# ID name format
390
id-name-format:
391
  - 2  # error
392
  - convention: hyphenatedlowercase
393

394
# Mixin name format
395
mixin-name-format:
396
  - 2  # error
397
  - allow-leading-underscore: true
398
    convention: hyphenatedlowercase
399

400
# Placeholder name format
401
placeholder-name-format:
402
  - 2  # error
403
  - convention: hyphenatedlowercase
404

405
# Variable name format
406
variable-name-format:
407
  - 2  # error
408
  - allow-leading-underscore: true
409
    convention: hyphenatedlowercase
410
```
411

412
**Convention Options:**
413
- `hyphenatedlowercase`: `my-class-name`
414
- `camelcase`: `myClassName`
415
- `snakecase`: `my_class_name`
416
- `strictbem`: `block__element--modifier`
417
- `hyphenatedbem`: `block__element--modifier`
418

419
**Usage Examples:**
420

421
```scss
422
// ✓ Good - hyphenated lowercase
423
.my-button {}
424
$primary-color: blue;
425
@mixin button-style() {}
426

427
// ✗ Bad - camelCase (if hyphenatedlowercase required)
428
.myButton {}
429
$primaryColor: blue;
430
@mixin buttonStyle() {}
431
```
432

433
### Style Guide Rules
434

435
Rules enforcing consistent code style and formatting.
436

437
```yaml { .api }
438
# Attribute quote style
439
attribute-quotes:
440
  - 2  # error
441
  - include: true
442

443
# BEM depth limitations
444
bem-depth:
445
  - 1  # warning
446
  - max-depth: 2
447

448
# Border zero values
449
border-zero:
450
  - 2  # error
451
  - convention: zero  # or none
452

453
# Brace style
454
brace-style:
455
  - 2  # error
456
  - allow-single-line: false
457
    style: 1tbs  # or stroustrup, allman
458

459
# Clean import paths
460
clean-import-paths:
461
  - 2  # error
462
  - filename-extension: false
463
    leading-underscore: false
464

465
# Empty argument handling
466
empty-args:
467
  - 2  # error
468
  - include: true
469

470
# Hex color length
471
hex-length:
472
  - 2  # error
473
  - style: short  # or long
474

475
# Hex notation case
476
hex-notation:
477
  - 2  # error
478
  - style: lowercase  # or uppercase
479

480
# Indentation
481
indentation:
482
  - 2  # error
483
  - size: 2  # or tab
484

485
# Leading zero handling
486
leading-zero:
487
  - 2  # error
488
  - include: false  # or true
489

490
# Maximum line length
491
max-line-length:
492
  - 1  # warning
493
  - length: 80
494

495
# Maximum file line count
496
max-file-line-count:
497
  - 1  # warning
498
  - length: 300
499

500
# Property sort order
501
property-sort-order:
502
  - 1  # warning
503
  - order: alphabetical  # or smacss, recess, concentric, or custom array
504
    ignore-custom-properties: false
505

506
# Pseudo-element syntax
507
pseudo-element:
508
  - 2  # error
509

510
# Quote style
511
quotes:
512
  - 2  # error
513
  - style: single  # or double
514

515
# Shorthand values
516
shorthand-values:
517
  - 2  # error
518
  - allowed-shorthands: [1, 2, 3, 4]
519

520
# URL quotes
521
url-quotes:
522
  - 2  # error
523

524
# Variable usage for properties
525
variable-for-property:
526
  - 1  # warning
527
  - properties: ['color', 'background-color']
528

529
# Zero unit handling
530
zero-unit:
531
  - 2  # error
532
  - include: false
533
```
534

535
**Usage Examples:**
536

537
```scss
538
// ✓ Good - consistent style
539
.button {
540
  padding: 0.5rem 1rem;
541
  margin: 0;
542
  color: #fff;
543
  background: url('icon.png');
544
}
545

546
// ✗ Bad - inconsistent style
547
.button{
548
  padding: .5rem 1rem;
549
  margin: 0px;
550
  color: #FFFFFF;
551
  background: url(icon.png);
552
}
553
```
554

555
### Spacing Rules
556

557
Rules controlling whitespace around operators, punctuation, and delimiters.
558

559
```yaml { .api }
560
# Space after comma
561
space-after-comma:
562
  - 2  # error
563
  - include: true
564

565
# Space before colon
566
space-before-colon:
567
  - 2  # error
568
  - include: false
569

570
# Space after colon
571
space-after-colon:
572
  - 2  # error
573
  - include: true
574

575
# Space before brace
576
space-before-brace:
577
  - 2  # error
578
  - include: true
579

580
# Space before !important
581
space-before-bang:
582
  - 2  # error
583
  - include: true
584

585
# Space after !important
586
space-after-bang:
587
  - 2  # error
588
  - include: false
589

590
# Space between parentheses
591
space-between-parens:
592
  - 2  # error
593
  - include: false
594

595
# Space around operators
596
space-around-operator:
597
  - 2  # error
598
  - include: true
599
```
600

601
**Usage Examples:**
602

603
```scss
604
// ✓ Good - proper spacing
605
.button {
606
  margin: 0 1rem;
607
  padding: calc(1rem + 2px);
608
  font-family: 'Arial', sans-serif;
609
  color: red !important;
610
}
611

612
// ✗ Bad - improper spacing
613
.button{
614
  margin:0 1rem;
615
  padding:calc(1rem+2px);
616
  font-family:'Arial',sans-serif;
617
  color:red!important;
618
}
619
```
620

621
### Final Formatting Rules
622

623
Rules for final file formatting requirements.
624

625
```yaml { .api }
626
# Trailing semicolon requirements
627
trailing-semicolon:
628
  - 2  # error
629
  - include: true
630

631
# Final newline requirements
632
final-newline:
633
  - 2  # error
634
  - include: true
635
```
636

637
## Rule Severity Levels
638

639
```yaml { .api }
640
# Severity options for all rules
641
0  # Off - rule is disabled
642
1  # Warning - rule violation generates warning
643
2  # Error - rule violation generates error
644
```
645

646
## Custom Rule Configuration
647

648
Rules can be configured with various options to suit different coding standards:
649

650
```yaml
651
rules:
652
  # Complex rule with multiple options
653
  indentation:
654
    - 2
655
    - size: 2  # 2 spaces or 'tab'
656
  
657
  class-name-format:
658
    - 2
659
    - convention: strictbem
660
      allow-leading-underscore: false
661
      ignore: ['js-*']
662
  
663
  property-sort-order:
664
    - 1
665
    - order:
666
        - display
667
        - position
668
        - top
669
        - right
670
        - bottom
671
        - left
672
        # ... custom order array
673
```
674

675
## Rule Inheritance
676

677
Rules can inherit from predefined configurations:
678

679
```yaml
680
# Extend from built-in configurations
681
extends: sass-lint:recommended
682

683
# Override specific rules
684
rules:
685
  indentation:
686
    - 2
687
    - size: 4
688
  no-ids: 0
689
```