DartSass @use・@fowardについて パート１

■DartSass

  VSコードのプラグイン
  @import 不可のため@use・@fowardを使用

＜前提＞

　①定義したファイル　

　　例）ファイル名<base/variable.scss>

　②定義系をいろいろまとめたファイル　

　　例）ファイル名<base/foundation.scss>

　　　　例）variable mixinなど

　　　　　・（variable: $）・・・変数

　　　　　　　データ（値）を保存。任意の名前を付けて、必要に応じて呼び出して使える

　　　　　・mixin

　　　　　　　cssのスタイルを定義しておいて別の場所でそのスタイルを使いまわす

　③変数を使って呼び出したいファイル

　　例）ファイル名<text.scss>

■@use

①定義したファイル　

②定義系をいろいろまとめたファイル　例）variable mixinなど

③変数を使って呼び出したいファイル

→②はないので①と③だけでOK＝直接呼び出せる）

①<base/variable.scss>

fontについて定義したファイル

$font-color:red;

③<text.scss>

＠useファイル名.変数名を使って呼び出し

@use"base/variable" 
.h1 {color: variable.$font-color;}

■@foward

①定義したファイル　

②定義系をいろいろまとめたファイル　例）variable mixinなど

③変数を使って呼び出したいファイル

①<base/variable.scss>

fontについて定義したファイル

$font-color:red;

②<base/foundation.scss>

　定義系をまとめたファイル

　橋渡しができるようにfoundationのファイルに＠forwardを記載

＠forward"base.variable"

③<text.scss>

＠useファイル名.変数名を使って呼び出し

@use"base/foundation" 
.h1 {color: foundation.$font-color;}

＠useだけだと呼び出せない

②ファイル名<base/foundation.scss>

　いろいろな定義系をまとめたファイル

@use"base/variable" 
.h1 {color: variable.$font-color;}

③ファイル名<text.scss>

<founddation.scss>で定義したものを

個別のファイルで使いたい　　

base/foundationを＠useでは使用不可

 ×　呼び出せない

@use"base/foundation" 
.h1 {color: variable.$font-color;}