При использовании math выдает ошибку в Sass?

Question

[Bredy]

Подскажите пожалуйста как исправить

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after " $result: math": expected expression (e.g. 1px, bold), was ".div($px, $from) * "
on line 13 of src/components/sccs/mixins.scss
from line 5 of src/components/sccs/style.scss
>> $result: math.div($px, $from) * 100%;
--------------^

вот код
@function percent($px, $from) {
$result: math.div($px, $from) * 100%;
return $result;
}

Использую Dart Sass

Comments

[Модератор]

Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

[Ankhena]

Где и как подключен math?

Answer 1

[black1277]

Перед использованием math его надо подключить в начале файла. Примерно вот так

@use "sass:math";

td.w1_3 {
  width: percentage(math.div(1, 3));
}

а в вашем примере ошибка в синтаксисе. Перед return нужно @ ставить.

Comments

[Bredy]

Делал так. в основном файлу Style.scss и непосредственно в файле с миксинами, все равно ошибка, но вычисления отдельно работают.. переделал код иначе width:(1/ 3)

[black1277]

Bredy, тогда проверяйте версию Dart Sass, должна быть не ниже 1.33.0

[black1277]

Bredy, у вас ошибка в синтаксисе! перед return нужно @ ставить. Вот так работает

@function percent($px, $from) {
  $result: math.div($px, $from) * 100%;
  @return $result;
}