sass 「@use」のメモ

基本

「@import」じゃなく「@use」を使うようにしなくちゃいけないらしい

▼_init.scss

@charset "utf-8";
@mixin base-font {
    font-size: 1em;
}

▼style.scss

@charset "utf-8";
@use "init"; // 「@import」じゃなく「@use」を使って「_init.scss」を読み込む

body {
    @include init.base-font; // 「_init.scss」の「base-font」をインクルード
}

名前空間

省略したい

頻繁に使うものは出来れば省略したい

@charset "utf-8";
@use "init" as *;

body {
    @include base-font;
}

名前を変更したい

名前が長い・スペルが面倒…とか大人の事情で変更したい

@charset "utf-8";
@use "init" as common;

body {
    @include common.base-font;
}

@useするファイルに変数を渡したい

▼with()を使えばいけるっぽい

@use "bootstrap.scss" with(
  $primary: red,
  $danger: blue,
  $info: green,
);