今日、SCSSとは何か、そしてSassとSCSSの違い
そして、変数について知りたいです.

なぜSCSSが必要なのですか?

css基本構文だけでは複雑な状況で効率的に処理することは難しい.
そのため、前処理ツールsass、scssが必要です.

Sassは何ですか?

Sassとscssはほぼ同じで、括弧の有無を除いて違いはありません.
下図を参照すると分かりやすいです.

へんすう

変数宣言は$sizeと同様に$で表される.
これらの変数は再利用可能なグローバル変数です.

万一.boxでグローバル変数と同じ名前の変数を宣言したらどうなりますか?

このようにbox内で宣言された$wと同じ値は、宣言されたブロック内でのみ有効です.
しかし!globalを使用すると、使用範囲がグローバルになります.
変数には、次のような異なる値があります.

// Numbers 
$number1: 1;
$number2: .82;
$number3: 20px;
$number4: 2fr;

// Strings
$string1: bold;
$string2: absolute;
$string3: "assets/images/";

// Colors
$color1: blue;
$color2: yellowgreen;
$color3: rgba(255, 0, 0, .5);
$color4: #ffff00;

// Booleans
$boolean1: true;
$boolean2: false;

// Null
$null: null;

// lists
// [0, 1, 2, 3, 4]
// 아래의 3개는 모두 같다. 
$list1: (10px, 20px, 30px);
$list2: 10px, 20px, 30px;
$list3: 10px 20px 30px;

$list4: apple, banana, cherry;

// Maps
// { key: value}
$map1: ( key: value );
$map2: (a: apple, b: banana, c: cherry);