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

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

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

執筆時 gulp-dart-sass@1.0.2 を利用してコンパイルしましたが、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: 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: color.adjust(#000, $alpha: -0.3);
}

色を明るくする

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

変更前

.hoge {
  background-color: lighten(#000, 50%);
}

変更後

@use "sass:color";
.hoge {
  background-color: color.scale(#000, $lightness: 50%);
}

色を暗くする

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

変更前

.hoge {
  background-color: darken(#fff, 50%);
}

変更後

@use "sass:color";
.hoge {
  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: 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: 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)
  }
}

また、Dart Sass では map.get() に複数の引数を渡すと、ネストされた値を取得できます。

ネストされた値を取得

@use "sass:map";
$category-colors: (
  hoge: (
    main: #e866a5,
    bg: #fff
  ),
  fuga: (
    main: #8667e5,
    bg: #fff
  ),
  piyo: (
    main: #36ce9f,
    bg: #fff
  )
);
@debug map.get($category-colors, hoge, main); // #e866a5