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.