Sass ตัวแปร

Sass ตัวแปร

ตัวแปรเป็นวิธีเก็บข้อมูล คุณสามารถใช้มันอีกครั้งในอนาคต

ผ่าน Sass คุณสามารถเก็บinformationเก็บอยู่ในตัวแปร อย่างเช่น：

• string
• number
• color
• boolean
• list
• null

Sass ใช้สัญญาณ $ ตามด้วยชื่อเพื่อประกาศตัวแปร：

Sass ตัวแปร ภาษาบอร์เทิร์น

$variablename: value;

ตัวอย่างด้านล่างนี้ประกาศตัวแปร 4 ตัว

• myFont
• myColor
• myFontSize
• myWidth

หลังจากประกาศตัวแปร คุณสามารถใช้ตัวแปรนี้ได้ทุกที่ในไฟล์ Sass ของคุณ：

ความเข้าใจทางภาษา SCSS：

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}
#container {
  width: $myWidth;
}

ดังนั้น เมื่อแบบภาพ Sass ถูกแปลเป็น CSS มันจะใช้ตัวแปร (myFont, myColor และอื่น ๆ) และออกผลลัพธ์ CSS ทั่วไปและใส่ค่าตัวแปรใน CSS ตามด้วย อย่างเช่น：

การออก CSS：

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}
#container {
  width: 680px;
}

ตัวแปร Sass ส่วนว่าง

ตัวแปร Sass สามารถใช้ได้เมื่อกำหนดในระดับที่มีอยู่ของมันเท่านั้น。

โปรดดูตัวอย่างด้านล่างนี้：

ความเข้าใจทางภาษา SCSS：

$myColor: red;
h1 {
  $myColor: green;
  color: $myColor;
}
p {
  color: $myColor;
}

<p> สีของข้อความในแท็กต์จะเป็นสีเขียวหรือสีแดง? มันเป็นสีแดง!

การนิยามอีกครั้ง $myColor: green; ตั้งอยู่ <h1> ในกฎภายใน และสามารถใช้ได้เมื่อเท่านั้น!

ดังนั้น การออก CSS จะเป็น：

การออก CSS：

h1 {
  color: green;
}
p {
  color: red;
}

ดีน่ะ นี่คือพฤติกรรมการควบคุมขอบเขตตัวแปรโดยมาตรฐาน

ใช้ Sass !global

สามารถใช้ !global เปลี่ยนพฤติกรรมการควบคุมของขอบเขตตัวแปร

!global บอกว่าตัวแปรเป็นโลก ซึ่งหมายความว่ามันสามารถเข้าถึงได้ทุกระดับ

ดูตัวอย่างด้านล่าง (เหมือนดังกล่าว แต่เพิ่ม !global）：

ความเข้าใจทางภาษา SCSS：

$myColor: red;
h1 {
  $myColor: green !global;
  color: $myColor;
}
p {
  color: $myColor;
}

ตอนนี้ <p> สีของข้อความในแท็กต์จะเป็นเขียว!

ดังนั้น การออก CSS จะเป็น：

การออก CSS：

h1 {
  color: green;
}
p {
  color: green;
}

คำแนะนำ：ควรนิยามตัวแปรโลกในกฎที่ไม่มีนอกเหนือจากกฎทั้งหมด ทางเลือกที่เหมาะสมคือการนิยามตัวแปรโลกทั้งหมดในไฟล์ของตัวเอง โดยใช้ชื่อ "_globals.scss" และใช้ @include คำถามที่มีในไฟล์นี้