ตัวแปร SASS
บทความนี้อธิบายเกี่ยวกับตัวแปร SASS
เราจะให้คำอธิบายอย่างละเอียดเกี่ยวกับตัวแปร SASS และเรียนรู้การใช้งานจริงทีละขั้นตอน
YouTube Video
ตัวแปร SASS
SASS เป็นภาษาขยายของ CSS ที่ช่วยให้คุณเขียน CSS ได้อย่างยืดหยุ่นและมีประสิทธิภาพมากขึ้น หนึ่งในฟีเจอร์ของมันคือตัวแปร ซึ่งเป็นเครื่องมือที่ทรงพลังเพื่อคงความสม่ำเสมอของสไตล์และทำให้การเปลี่ยนแปลงง่ายขึ้น
ตัวแปร SASS คืออะไร?
ตัวแปร SASS ช่วยให้สามารถเก็บค่าสี ขนาดฟอนต์ หรือระยะห่างที่ใช้บ่อยใน CSS ไว้ในที่เดียวเพื่อให้ง่ายต่อการจัดการ
ด้วยการใช้ตัวแปร คุณสามารถเปลี่ยนแปลงสไตล์ได้ง่ายและทำให้โค้ดอ่านง่ายขึ้น
วิธีการเขียนตัวแปร
ตัวแปรสามารถเขียนได้ดังนี้
1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;- คุณต้องใส่เครื่องหมาย
$นำหน้าชื่อตัวแปร variable-nameคือชื่อตัวแปร แนะนำให้ตั้งชื่อที่สื่อความหมายและเข้าใจง่ายvalueคือค่าที่กำหนดให้กับตัวแปร
การใช้ตัวแปรพื้นฐาน
ด้านล่างคือ ตัวอย่างพื้นฐานของตัวแปร SASS
1// Variable definition
2$primary-color: #3498db;
3$secondary-color: #2ecc71;
4$base-font-size: 16px;
5
6// Variable usage
7body {
8 font-size: $base-font-size;
9 color: $primary-color;
10 background-color: $secondary-color;
11}- เมื่อคุณกำหนดตัวแปร เช่น
$primary-colorแล้ว คุณสามารถนำค่าดังกล่าวมาใช้ซ้ำได้ไม่จำกัดครั้ง - เมื่อคุณต้องการเปลี่ยนค่า เพียงแก้ไขค่าตัวแปรเพียงจุดเดียว ทำให้สามารถดูแลรักษาโค้ดได้ง่ายขึ้น
ผลลัพธ์ CSS ที่ถูกสร้างขึ้น
1body {
2 font-size: 16px;
3 color: #3498db;
4 background-color: #2ecc71;
5}การใช้ตัวแปรภายในเนสติ้ง (Nesting)
การผสมผสานระหว่างเนสติ้งของ SASS กับตัวแปรช่วยจัดระเบียบโค้ดและง่ายต่อการจัดการ
1@use "sass:color";
2
3// Variable definition
4$button-bg: #e74c3c;
5$button-color: #fff;
6$button-padding: 10px 20px;
7
8.button {
9 background-color: $button-bg;
10 color: $button-color;
11 padding: $button-padding;
12
13 &:hover {
14 background-color: color.adjust($button-bg, $lightness: -10%);
15 }
16}- คุณสามารถใช้ตัวแปรภายใน selector ที่ซ้อนกันได้
- โดยการผสมผสานตัวแปรต่างๆ คุณสามารถปรับแต่งรูปแบบได้อย่างยืดหยุ่น เช่น การทำให้สีเข้มขึ้น 10% ด้วยฟังก์ชัน
color.adjust
ผลลัพธ์ CSS ที่ถูกสร้างขึ้น
1.button {
2 background-color: #e74c3c;
3 color: #fff;
4 padding: 10px 20px;
5}
6
7.button:hover {
8 background-color: #c0392b;
9}ตัวแปรที่มีค่าเริ่มต้น (Default Value)
ใน SASS คุณสามารถกำหนดค่าเริ่มต้นให้กับตัวแปรได้ การตั้งค่าเริ่มต้น ช่วยให้คุณใช้ตัวแปรโดยไม่ไปทับตัวแปรที่มีอยู่เดิม
1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8 font-size: $font-size;
9}- โดยการเติม
!defaultหากตัวแปรนั้นถูกกำหนดไว้แล้ว จะไม่ถูกเขียนทับ - วิธีนี้มีประโยชน์สำหรับการทำงานเป็นทีม หรือการตั้งค่าสำหรับทั้งโปรเจกต์
ผลลัพธ์ CSS ที่ถูกสร้างขึ้น
1p {
2 font-size: 16px;
3}ขอบเขตของตัวแปร (Variable Scope)
ตัวแปร SASS มีขอบเขตการทำงาน ซึ่งขึ้นอยู่กับตำแหน่งที่กำหนดไว้ การเข้าใจขอบเขตของตัวแปร ช่วยป้องกันการเขียนทับโดยไม่ได้ตั้งใจ
- ขอบเขตแบบ Global
1$global-color: #ff6347;
2
3.header {
4 color: $global-color;
5}- ตัวแปรที่อยู่ในขอบเขต Global จะถูกเรียกใช้ได้ตลอดทั้งไฟล์
- ขอบเขตแบบ Local
1.card {
2 $card-bg: #f0f0f0;
3 background-color: $card-bg;
4}
5
6.button {
7 // Error: $card-bg cannot be used
8 background-color: $card-bg;
9}- ตัวแปรที่อยู่ในขอบเขต Local จะถูกใช้ได้เฉพาะภายในเนสติ้ง (nesting) หรือไฟล์ที่กำหนดไว้เท่านั้น
การใช้ตัวแปรในกระบวนการคำนวณ
คุณยังสามารถใช้ตัวแปร SASS ในการคำนวณได้ คุณสามารถคำนวณค่าที่มีหน่วย (เช่น px, em) และสีได้เช่นกัน
1@use "sass:color";
2
3$base-padding: 10px;
4$double-padding: $base-padding * 2;
5
6.container {
7 padding: $double-padding;
8}
9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14 color: $lighter-color;
15}ผลลัพธ์ CSS ที่ถูกสร้างขึ้น
1.container {
2 padding: 20px;
3}
4
5h1 {
6 color: #5dade2;
7}- การใช้ตัวแปรเพื่อปรับสีหรือคำนวณระยะห่าง ช่วยให้ดูแลรักษาโค้ดง่ายขึ้น
สรุป
ตัวแปร SASS เป็นฟีเจอร์ที่จำเป็นสำหรับการจัดการและดูแล CSS อย่างมีประสิทธิภาพ
การใช้ตัวแปร SASS ช่วยให้สไตล์ในโปรเจกต์ของคุณมีความสม่ำเสมอและง่ายต่อการเปลี่ยนแปลง
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย