noScssNullComparison (CSS)

Language CSS

Summary

Rule available since: v2.6.7
Diagnostic Category: lint/nursery/noScssNullComparison
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Inspired from scss/at-if-no-null

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noScssNullComparison": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow comparing values to null in Sass @if conditions.

In Sass, null counts as false in a condition. Writing $value == null or $value != null in an @if condition is longer than needed: not $value and $value check the same thing in most cases.

The rule checks the conditions of @if and @else if, including comparisons combined with and, or and not.

A != null check followed by and, as in $value != null and $value > 1, isn’t reported. This is a common way to check that a value exists before using it in the rest of the condition.

Examples

Invalid

1
a {
2
  @if $value == null {}
3
}

code-block.scss:2:7 lint/nursery/noScssNullComparison ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This condition compares a value to null.
  
    1 │ a {
  > 2 │   @if $value == null {}
      │       ^^^^^^^^^^^^^^
    3 │ }
    4 │ 
  
  ℹ In Sass, null counts as false in a condition, so the comparison isn't needed.
  
  ℹ Check the value with not instead, as in @if not $value.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
a {
2
  @if $value != null {}
3
}

code-block.scss:2:7 lint/nursery/noScssNullComparison ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This condition compares a value to null.
  
    1 │ a {
  > 2 │   @if $value != null {}
      │       ^^^^^^^^^^^^^^
    3 │ }
    4 │ 
  
  ℹ In Sass, null counts as false in a condition, so the comparison isn't needed.
  
  ℹ Use the value as the condition instead, as in @if $value.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
a {
2
  @if $value {}
3
  @if not $value {}
4
  @if $value != null and $value > 1 {}
5
}