---

---

【Sass】@useを使用したモジュール化について解説

投稿日：2021年3月15日

@useはsassに新しく追加されたモジュール機能です。複数のモジュールの管理に頭を悩ませていた方は使用を検討してみましょう。

---

はじめに

useとは

---

実践

namespace

$font_black: rgb(15, 20, 25);

@import "_sample";

.link {
  color: $font_black;
}

@import "_base";
@import "_widget";
@import "_layout";

.link {
  color: $font_black;  // この変数はどこに定義してある！？
}

@use "sample.scss";

.link {
  color: sample.$font_black;
}

明示的なネームスペースの指定

@use "sample.scss" as s;

.link {
  color: s.$font_black;
}

Private変数の定義

$_hover_color: rgb(20, 20, 30); // private
$-transition_duration: 2s;         // private

.link {
  color: g.$_hover_color;             // エラー
  background-color: g.$_hover_color;  // エラー
}

デフォルト値の設定

$font_black: rgb(15, 20, 25) !default;
$font_grey: #5b7083 !default;
$font_white: white !default;
$font_shadow: rgba($font_black, 0.5);

@use "../_generic.scss" as g with ($font_black: rgb(30,40,50), $font_white: #f0f0f0);

---

---

---