■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について定義したファイル
.h1 {color: variable.$font-color;}
■@foward
①定義したファイル
②定義系をいろいろまとめたファイル 例)variable mixinなど
③変数を使って呼び出したいファイル
①<base/variable.scss>
fontについて定義したファイル
②<base/foundation.scss>
定義系をまとめたファイル
橋渡しができるようにfoundationのファイルに@forwardを記載
@forward"base.variable"
③<text.scss>
@useファイル名.変数名を使って呼び出し
.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;}