Sassで除算するときはsass:mathモジュールのdiv関数を使おう

  • Sass
  • 小ネタ

Sassって便利ですよね。スタイリングするときは極力Sassを使いたいですよね。

そんなSass(Dart Sass)をv1.32からv1.34へアップデートして、ビルドしたところ次のような警告が出ました。

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

https://sass-lang.com/d/slash-divを見てみると、パラメータの除算をする際は、/(スラッシュ)ではなく、ビルトインモジュールのsass:mathにあるdiv()を使っていくようにしてとのことです。

現段階では非推奨としていますが、将来的に除算は/ではできなくするようですね。

ということで、警告メッセージにあるような感じで修正しました。

わかりやすいように、次に例を示します。まずは変更前。

@use "variables" as v;

.some-class {
  margin: 0 v.$offset/2;
}

続いては変更後。

@use "sass:math";
@use "variables" as v;

.some-class {
  margin: 0 math.div(v.$offset, 2);
}

上記のような感じに変更し、ビルドしたところ警告は消えました。

sass:mathモジュールは他にも関数があるので、Sassで演算が必要な際は使っていくようにしましょう!

📖 https://sass-lang.com/documentation/modules/math

この記事を共有

アバター

K.Utsunomiya
男・20代
主にWebフロントエンド技術と気になった音楽について投稿していきます。
最近ハマっていることは、クロスバイクで走ることとジムでの運動です。
詳しいプロフィール

© 2020–2021 コレ棚