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.49
nos 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;
│ ^^^^^^^^^^^^^^^^
╵
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:math
como un ejemplo así:
@use "sass:math";
body {
font-size: math.div(50, 16) * 1px;
}
O usar /
adentro calc
como 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)