CSS、SCSSで変数を使ったり他ファイルを読み込んだり

書き方どうだっけ？って何度も調べてしまうので、まとめておく

変数の書き方

例は微妙ですが、こんな感じ。

:root {
–font-size-main: 14px;
}

font-size: var(–font-size-main);

CSSに比べてすっきり

$font-size-main: 14px;

font-size: $font-size-main;

@import url(“./xxxxx.css”);

↓でも大丈夫！！

@import ‘./xxxxx.css’;

importはCSSと書き方一緒。

@import url(“./xxxxx.scss”);

変数持ちするものをまとめたりして、そのファイルをimportして使うというのはとても便利です。
ですが、CSSの場合importするとパラレルでの読み込みができなくなり、読み込み時間が大きくなるというデメリットがががが・・・
詳しくは、細かく検証してくれているサイトがあったので、そちら参照