Dart Sass if() syntax is deprecated

[mwentz]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

The latest release of Dart SASS 1.95.0 (https://github.com/sass/dart-sass/releases/tag/1.95.0) deprecates the if() function, which is introducing a number of deprecation warnings.

Deprecation Warning [if-function]: The Sass if() syntax is deprecated in favor of the modern CSS syntax.

Suggestion: if(sass($arg == "$value"): $value; else: $arg)

More info: https://sass-lang.com/d/if-function

   ╷
58 │       $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
   │                                                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\bootstrap\scss\_functions.scss 58:55  @import
    Assets\scss\main.scss 5:9                          root stylesheet

Deprecation Warning [if-function]: The Sass if() syntax is deprecated in favor of the modern CSS syntax.

Suggestion: if(sass($arg == "$key"): $key; else: if($arg == "$value", $value, $arg))

More info: https://sass-lang.com/d/if-function

   ╷
58 │       $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
   │                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\bootstrap\scss\_functions.scss 58:30  @import
    Assets\scss\main.scss 5:9                          root stylesheet

Deprecation Warning [if-function]: The Sass if() syntax is deprecated in favor of the modern CSS syntax.

Suggestion: if(sass($l1 > $l2): divide($l1 + 0.05, $l2 + 0.05); else: divide($l2 + 0.05, $l1 + 0.05))

More info: https://sass-lang.com/d/if-function

    ╷
177 │   @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules\bootstrap\scss\_functions.scss 177:11  @import
    Assets\scss\main.scss 5:9                           root stylesheet

Deprecation Warning [if-function]: The Sass if() syntax is deprecated in favor of the modern CSS syntax.

Suggestion: if(sass(divide($value, 255) < 0.04045): divide(divide($value, 255), 12.92); else: nth($_luminance-list, $value + 1))

More info: https://sass-lang.com/d/if-function

    ╷
191 │     $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
    │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules\bootstrap\scss\_functions.scss 191:13  @import
    Assets\scss\main.scss 5:9                           root stylesheet

Deprecation Warning [if-function]: The Sass if() syntax is deprecated in favor of the modern CSS syntax.

Suggestion: if(sass($weight > 0): shade-color($color, $weight); else: tint-color($color, -$weight))

More info: https://sass-lang.com/d/if-function

    ╷
217 │   @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules\bootstrap\scss\_functions.scss 217:11  @import
    Assets\scss\main.scss 5:9                           root stylesheet

Reduced test cases

File: _functions.scss

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

v5.3.8

[harkor]

This thing done the job but it's not a fix

#40962 (comment)

css: {
    preprocessorOptions: {
      scss: {
        silenceDeprecations: ['import', 'color-functions', 'global-builtin', 'if-function'],
      },
    },
  },

[TheSeg]

Some context on the change:

There is developing support for if() natively in CSS, which creates a conundrum for SCSS if(). There is a migration approach with the existing if().

@harkor's post about how to silence deprecations in Vite (and others where silenceDeprecations is exposed) is helpful for the meantime. Which if you're already using Bootstrap, you're already using the other silence deprecations.