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.

Solution 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.

Solution 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.

Solution 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.

Comments

[Evanss]

I need to disable warnings for a particular style in my SASS for when the thing that is triggering the error is actually intentional. I don't want to disable all warnings. Ive updated my question to make it clearer.

[Jeroen]

Point taken. Thinking I'll leave my answer here for others that land here through Googling, might be of use to someone.

[Jeroen]

@Evans I've updated my answer. As far as I can tell what you want is just not possible with sass-lint. If another answer proves me wrong please ping me so I can remove that assumption from my own answer.

[Evanss]

I need to ignore certain styles, not set global rules. Eg the duplicate style warning should normal be displayed, however for a particular single instance in my SASS it's intentional and i need to disable the warning for this instance only.

[Ian Routledge]

v1.10.1 now has support for this, github.com/sasstools/sass-lint#disabling-linters-via-source

[Ian Routledge]

v1.10.1 now has support for this, github.com/sasstools/sass-lint#disabling-linters-via-source

[Jeroen]

Thanks @IanRoutledge. This thread gets a decent amount of views so I've slipstreamed the info you've provided in my answer. Feel free to suggest further edits to improve it.

[Liran H]

I tried // sass-lint:disable-all, // sass-lint:disable/enable [rule], as you suggested - they all work like magic, thank you!