ตัวแปรเริ่มต้นใน SASS

ในบางกรณี หากค่าของตัวแปวยังไม่ได้ถูกกำหนดไว้ แต่จำเป็นต้องใช้ในโค้ด เราสามารถตั้งค่าเริ่มต้นให้กับมันได้ โดยต่อท้ายด้วยเครื่องหมาย !default

ควรสังเกตว่า หากตัวแปร ได้รับการกำหนดค่าไว้แล้วก่อนหน้านี้ ค่าดั้งเดิมจะยังคงอยู่ แต่ หากเราสร้างตัวแปรใหม่ที่ว่างเปล่า ค่าที่กำหนดไว้จะเป็นค่าเริ่มต้น

styles.scss$name: "John";
$name: "Bob" !default;
$new_name: "Mark" !default;

#main {
  name: $name;
  new_name: $new_name;
}

ผลลัพธ์ของการคอมไพล์โค้ดที่นำเสนอนี้จะเป็น ดังต่อไปนี้:

styles.css#main {
  name: "John";
  new_name: "Mark";
}

หากเราตั้งค่าตัวแปรเป็น null !default จะพิจารณาว่ามัน ไม่มีค่า:

styles.scss$name: null;
$name: "Bob" !default;

#main {
  name: $name;
}

หลังการคอมไพล์เราจะเห็น:

styles.css#main {
  name: "Bob"; 
}