🦓
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;