Advertencia de obsolescencia: el uso de / para la división fuera de calc() está obsoleto y se eliminará en Dart Sass 2.0.0 [duplicate]

2 minutos de lectura

En estas funciones compilo rem a px y em a px:

$base: 16 !default;

@function scut-strip-unit ($num) {
  @return $num / ($num * 0 + 1);
}

@function rem ($pixels) {
  @return scut-strip-unit($pixels) / $base * 1rem;
}
@function em ($pixels, $context: $base) {
    @return #{$pixels/$context}em;
  }

pero con sass v1.49nos enfrentamos a este error:

Error
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in 
Dart Sass 2.0.0.

Recommendation: math.div(scut-strip-unit($pixels), $base) or calc(scut-strip-unit($pixels) / $base)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
8 │   @return scut-strip-unit($pixels) / $base * 1rem;
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in 
Dart Sass 2.0.0.

Recommendation: math.div($pixels, $context) or calc($pixels / $context)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
11 │     @return #{$pixels/$context}em;
   │               ^^^^^^^^^^^^^^^^
   ╵
   

Avatar de usuario de Youssouf Oumar
Youssouf Oumar

Usando / hacer divisiones fuera de calc la función ya no será compatible. Aquí hay una descripción general de la razón por la cual forman el documentación:

Sass actualmente trata / como una operación de división en algunos contextos y separador en otros. Esto hace que sea difícil para los usuarios de Sass saber qué / significará, y hace que sea difícil trabajar con nuevas características de CSS que usan / como separador.

Deberías usar math.div de sass:mathcomo un ejemplo así:

@use "sass:math";

body {
  font-size: math.div(50, 16) * 1px;
}

O usar / adentro calccomo un ejemplo así:

body {
  font-size: calc(50 / 16) * 1px;
}

  • Documentación de Migración: sass-lang.com/documentation/breaking-changes/slash-div Migración automática Puede usar el migrador Sass para actualizar automáticamente sus hojas de estilo para usar math.div() y list.slash(). $ npm install -g sass-migrator $ sass-migrator división */.scss

    – Ignacio

    29 de septiembre de 2022 a las 10:03

Para evitar usar sass:math, puede usar

calc(scut-strip-unit($pixels) / $base)

¿Ha sido útil esta solución?