🦓 SCSSの変数の入れ方と使い方
作成日: 2024/01/30
0

変数の入れ方

SCSSに_variables.scss等のファイルを作成して、その中に変数を作成する

例:

//font-famiry
$main-font: "Roboto", sans-serif;
$text-font: "Noto Sans JP", sans-serif;
$noto-font: 'Noto Sans Japanese';
$hira-w6-font: "ヒラギノ角ゴ ProN W6","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",sans-serif;
$hira-w3-font: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",sans-serif;

//color
$color-white: #FFFFFF;
$header-background: #1B1310;

変数の使用方法

使用したいSCSSの最上部に命令文を書く

例:

@use "./variables" as var;

使用したい場所にvar.(変数)と記入する

例:

font-family: var.$text-font;