Have sass-lint ignore a certain line?

Question

I'm using sass-lint with Gulp. How can I disable warnings for a particular style in my sass from the lint console output?

I've found a similar question but I'm using sass-lint, not scss-lint: Having scss-lint ignore a particular line

This is the one I'm using: https://www.npmjs.com/package/gulp-sass-lint

I've tried a few variations based off of the scss-lint project:

// scss-lint:disable ImportantRule
// sass-lint:disable ImportantRule
// sass-lint:disable no-important

Just to be clear, I want to disable warnings for a specific style in my SASS, not globally. I will use this when the thing triggering the warning is intentional. For instance I might set multiple background styles so one can be a fallback for older browsers. But currently this is triggering the no-duplicate-properties warning.

Answer 1

Disabling through comments

Update per December 2016 according to the docs this will now be possible using this syntax:

Disable more than 1 rule for entire file

// sass-lint:disable border-zero, quotes

p {
  border: none; // No lint reported
  content: "hello"; // No lint reported
}

Disable a rule for a single line

p {
  border: none; // sass-lint:disable-line border-zero
}

Disable all lints within a block (and all contained blocks)

p {
  // sass-lint:disable-block border-zero
  border: none; // No result reported
}

^{New info courtesy of commenter @IanRoutledge.}

However, before, if you wanted to disable certain rules, but only for specific code blocks and/or pieces of the code. As far as I can tell from the underlying source code it would not be possible with sass-lint. I've tried a few other searches as well, and skimmed the code base in general, but found no hint that the feature you're looking for exists.

For comparison, this query for the scss-lint source code clearly shows it is implemented there, in a fashion that doesn't seem to have an analogous solution in the lib you are using.

Disabling through yml configs

You can disable rules in general though. You need to have a .sass-lint.yml file to disable warnings.

Suppose you have this gulpfile.js:

'use strict';

var gulp = require('gulp'),
    sassLint = require('gulp-sass-lint');

gulp.task('default', [], function() {
  gulp.src('sass/*.scss')
    .pipe(sassLint())
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError());
});

And this package.json:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-sass": "^2.1.1",
    "gulp-sass-lint": "^1.1.1"
  }
}

Running on this styles.scss file:

div { dsply: block; }

You get this output:

[23:53:33] Using gulpfile D:\experiments\myfolder\gulpfile.js
[23:53:33] Starting 'default'...
[23:53:33] Finished 'default' after 8.84 ms

sass\styles.scss
  1:7   warning  Property `dsply` appears to be spelled incorrectly  no-misspelled-properties
  1:21  warning  Files must end with a new line                      final-newline

??? 2 problems (0 errors, 2 warnings)

Now if you add a .sass-lint.yml file next to the gulpfile, with this content:

rules:
  no-misspelled-properties: 0

You'll instead see:

[23:54:56] Using gulpfile D:\experiments\myfolder\gulpfile.js
[23:54:56] Starting 'default'...
[23:54:56] Finished 'default' after 9.32 ms

sass\styles.scss
  1:21  warning  Files must end with a new line  final-newline

??? 1 problem (0 errors, 1 warning)

One of the warnings is now ignored.

The sass-lint readme.md links to the apparent default config which has some more examples.

Answer 2

As of sass-lint 1.10.0 it's been possible to disable sass-lint rules via source comments

Below are the different permutations of this, intentionally almost identical to the scss-lint way before.

Disable a rule for the entire file

// sass-lint:disable border-zero
p {
  border: none; // No lint reported
}

Disable more than 1 rule

// sass-lint:disable border-zero, quotes
p {
  border: none; // No lint reported
  content: "hello"; // No lint reported
}

Disable a rule for a single line

p {
  border: none; // sass-lint:disable-line border-zero
}

Disable all lints within a block (and all contained blocks)

p {
  // sass-lint:disable-block border-zero
  border: none; // No result reported
}

a {
  border: none; // Failing result reported
}

Disable and enable again

// sass-lint:disable border-zero
p {
  border: none; // No result reported
}
// sass-lint:enable border-zero

a {
  border: none; // Failing result reported
}

Disable/enable all linters

// sass-lint:disable-all
p {
  border: none; // No result reported
}
// sass-lint:enable-all

a {
  border: none; // Failing result reported
}

The sass-lint readme includes all of the details and the docs have been updated too.

The grunt, gulp and atom plugins have all been updated too to require v1.10 and above so a quick reinstall of these or an update and you'll be ready to go.

We're sorry it took so long to come out but we had to fix a few issues in our AST before we were confident of them being useful.

Answer 3

Disabling linting rules for specific lines is supported as of sass-lint 1.10.

https://github.com/sasstools/sass-lint#disabling-linters-via-source

As yet sass-lint does not support disabling rules on a per-file or per-line basis. They have a long-standing GitHub issue tracking the feature.

Answer 4

Gotcha.

First, here's the listing of rules for sass-lint:

https://github.com/sasstools/sass-lint/tree/develop/lib/rules

Next, you can set an option for the rule you want:

rule:
    severity: 0

0 = nothing written

1 = warning

2 = error

Is this what you needed?