Dart Sass でよく利用するビルトインモジュール

16043 ワード
Sass dart-sass Sass テキストリンク

Dart Sass へ移行すると除算処理とSass関数は、ビルトインモジュールを利用することになります。

というわけで、よく利用していたSass関数をビルトインモジュールへ変更する方法をまとめてみました。

執筆時 [email protected] を利用してコンパイルしましたが、Sass関数は利用できていました。 今後利用できなくなると思われます。

除算する

今まで通りの記述だとコンパイル時に以下のような警告メッセージが表示されます。

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

詳細は以下で確認できます。

Dart Sass で除算する場合はビルトインモジュールの sass:math を利用します。

変更前
.hoge {
  width: (100px / 2);
}
変更後
+ @use "sass:math";
.hoge {
- width: (100px / 2);
+ width: math.div(100px / 2);
}

色を利用する

Dart Sass で色を利用する場合はビルトインモジュールの sass:color を利用します。

rgba()を16進数の値で指定する

第2引数 $alpha の指定方法がSass関数と異なるので注意が必要です。

変更前
.hoge {
  background-color: rgba(#000, 0.7);
}
変更後
+ @use "sass:color";
.hoge {
- background-color: rgba(#000, 0.7);
+ background-color: color.adjust(#000, $alpha: -0.3);
}

色を明るくする

Sass関数とは値の算出方法が違うようで、有彩色を指定した場合、以下の変更方法ではSass関数のカラーコードと同じになりません。

変更前
.hoge {
  background-color: lighten(#000, 50%);
}
変更後
+ @use "sass:color";
.hoge {
- background-color: lighten(#000, 50%);
+ background-color: color.scale(#000, $lightness: 50%);
}

色を暗くする

Sass関数とは値の算出方法が違うようで、有彩色を指定した場合、以下の変更方法ではSass関数のカラーコードと同じになりません。

変更前
.hoge {
  background-color: darken(#fff, 50%);
}
変更後
+ @use "sass:color";
.hoge {
- background-color: darken(#fff, 50%);
+ background-color: color.scale(#fff, $lightness: -50%);
}

配列を利用する

Dart Sass で配列を利用する場合はビルトインモジュールの sass:list を利用します。

配列のインデックス番号を取得する

変更前
$z-index: obj, header, overlay;
.header {
  z-index: index($z-index, header);
}
変更後
+ @use "sass:list";
.hoge {
- z-index: index($z-index, header);
+ z-index: list.index($z-index, header);
}

配列の要素を取得する

変更前
$colors: #67c1b8, #4daadf, #2ea014, #f3a600, #ed571d, #cf1a02;
.hoge {
  @for $i from 1 through 6 {
    &.is-level#{$i} {
      background-color: nth($colors, $i);
    }
  }
}
変更後
+ @use "sass:list";
$colors: #67c1b8, #4daadf, #2ea014, #f3a600, #ed571d, #cf1a02;
.hoge {
  @for $i from 1 through 6 {
    &.is-level#{$i} {
-     background-color: nth($colors, $i);
+     background-color: list.nth($colors, $i);
    }
  }
}

マップを利用する

Dart Sass でマップを利用する場合はビルトインモジュールの sass:map を利用します。

変更前
$sns-colors: (
  twitter : #1d9bf0,
  facebook: #1877f2,
  line    : #06c755
);
.hoge {
  &.is-twitter {
    background-color: map-get($sns-colors, twitter)
  }
}
変更後
+ @use "sass:map";
$sns-colors: (
  twitter : #1d9bf0,
  facebook: #1877f2,
  line    : #06c755
);
.hoge {
  &.is-twitter {
-   background-color: map-get($sns-colors, twitter)
+   background-color: map.get($sns-colors, twitter)
  }
}