外部のスタイルシートファイルや他のSassファイルをインポートするためのディレクティブです。
※以前までは@importが使用されていた
@use
記法
_ファイル名.scss
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="cssのリンク先" />
<title>@use</title>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>以下のcssとscssは同一デザイン記述になります
Sass
$apple-green-color: #bfdd9e;
$turquoise-blue-color: #56c1db;
$yamabuki-color: #f4af2b;
$white: white;// アンダーバーやscssは省略できる
@use "./variables" as var;
.box1 {
background-color: var.$apple-green-color;
color: var.$white;
}
.box2 {
background-color: var.$turquoiseーblue-color;
color: var.$white;
}
.box3 {
background-color: var.$yamabuki-color;
color: var.$white;
}
css
.box1 {
background-color: #bfdd9e;
color: white;
}
.box2 {
background-color: #56c1db;
color: white;
}
.box3 {
background-color: #f4af2b;
color: white;
}出力結果
box1
box2
box3