เงื่อนไขใน SASS
บทความนี้อธิบายเรื่องเงื่อนไขใน SASS
เราอธิบายอย่างชัดเจนตั้งแต่พื้นฐานไปจนถึงการใช้งานขั้นสูงของเงื่อนไขด้วยไดเรกทีฟ @if, @else if และ @else พร้อมตัวอย่างที่ใช้งานได้จริง
YouTube Video
เงื่อนไขใน SASS
SASS เป็นภาษาสไตล์ชีตที่ต่อยอดจาก CSS และคุณสามารถควบคุมสไตล์ได้อย่างยืดหยุ่นด้วยการใช้เงื่อนไข ใน SASS คุณสามารถใช้ @if, @else if และ @else เพื่อสลับผลลัพธ์ของสไตล์ในขณะคอมไพล์
ไวยากรณ์เงื่อนไขแบบพื้นฐาน
เงื่อนไขพื้นฐานใน SASS เขียนได้ด้วยไวยากรณ์ดังต่อไปนี้
1@if condition {
2 // Code executed when the condition is true
3} @else if condition {
4 // Code executed when another condition is true
5} @else {
6 // Code executed when all conditions are false
7}@ifจะประเมินเงื่อนไขแรก และหากเป็นเท็จ จะประเมินบล็อก@else ifหรือ@elseตามลำดับ
ตัวอย่างเงื่อนไขแบบง่าย
ในตัวอย่างต่อไปนี้ สีพื้นหลังจะสลับตามตัวแปร $theme
1$theme: "dark";
2
3body {
4 @if $theme == "dark" {
5 background-color: #333;
6 color: #fff;
7 } @else if $theme == "light" {
8 background-color: #fff;
9 color: #000;
10 } @else {
11 background-color: #f0f0f0;
12 color: #333;
13 }
14}CSS ที่คอมไพล์แล้ว
1body {
2 background-color: #333;
3 color: #fff;
4}- เมื่อ
$themeเป็น"dark"จะใช้พื้นหลังสีเข้มและสีตัวอักษรเป็นสีขาว
การผสานเงื่อนไขกับการคำนวณ
เงื่อนไขไม่เพียงใช้เปรียบเทียบสตริงและสีเท่านั้น แต่ยังรองรับการคำนวณตัวเลขด้วย
1$width: 1200px;
2
3.container {
4 @if $width > 1000px {
5 max-width: 1200px;
6 } @else {
7 max-width: 800px;
8 }
9}CSS ที่คอมไพล์แล้ว
1.container {
2 max-width: 1200px;
3}- สามารถเปรียบเทียบเชิงตัวเลขได้เช่นกัน และเมื่อ
$widthเกิน 1000px จะส่งออกmax-width: 1200px
เงื่อนไขแบบซ้อน
ด้วยการซ้อนเงื่อนไข คุณสามารถแสดงเงื่อนไขที่ซับซ้อนได้
1$theme: "dark";
2$size: "large";
3
4button {
5 @if $theme == "dark" {
6 background-color: #000;
7 color: #fff;
8
9 @if $size == "large" {
10 padding: 20px;
11 } @else {
12 padding: 10px;
13 }
14 } @else {
15 background-color: #fff;
16 color: #000;
17
18 @if $size == "large" {
19 padding: 15px;
20 } @else {
21 padding: 8px;
22 }
23 }
24}CSS ที่คอมไพล์แล้ว
1button {
2 background-color: #000;
3 color: #fff;
4 padding: 20px;
5}- การซ้อนเงื่อนไขช่วยให้กำหนดสไตล์ตามทั้งธีมและขนาดได้
การใช้เงื่อนไขภายในฟังก์ชันแบบกำหนดเอง
การใช้เงื่อนไขภายในฟังก์ชันแบบกำหนดเองช่วยเพิ่มการนำกลับมาใช้ซ้ำ
1@function adjust-color($theme) {
2 @if $theme == "dark" {
3 @return #333;
4 } @else if $theme == "light" {
5 @return #fff;
6 } @else {
7 @return #ccc;
8 }
9}
10
11.card {
12 background-color: adjust-color("dark");
13}CSS ที่คอมไพล์แล้ว
1.card {
2 background-color: #333;
3}- การห่อหุ้มเงื่อนไขไว้ในฟังก์ชันช่วยเพิ่มการนำกลับมาใช้ซ้ำและการบำรุงรักษา
ตัวอย่างการใช้งานจริง - การสลับดีไซน์
มาดูตัวอย่างการสลับดีไซน์โดยรวมตามเงื่อนไขบางอย่าง
1$theme: "light";
2
3body {
4 font-family: Arial, sans-serif;
5
6 @if $theme == "dark" {
7 background-color: #121212;
8 color: #e0e0e0;
9 } @else if $theme == "light" {
10 background-color: #f9f9f9;
11 color: #333;
12 } @else {
13 background-color: #fff;
14 color: #000;
15 }
16}
17
18header {
19 @if $theme == "dark" {
20 border-bottom: 1px solid #333;
21 } @else {
22 border-bottom: 1px solid #ccc;
23 }
24}CSS ที่คอมไพล์แล้ว
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f9f9f9;
4 color: #333;
5}
6
7header {
8 border-bottom: 1px solid #ccc;
9}- คุณสามารถสลับชุดสีของทั้งหน้าแบบไดนามิกตามตัวแปรธีมได้
ข้อควรทราบและแนวทางปฏิบัติที่ดี
เมื่อใช้คำสั่งเงื่อนไขของ SASS ควรพิจารณาประเด็นต่อไปนี้
-
ทำให้เงื่อนไขเรียบง่าย
การซ้อนที่ซับซ้อนทำให้การอ่านยาก ดังนั้นการใช้ฟังก์ชันและมิกซินช่วยรักษาความเรียบง่าย
-
ทำให้เป็นนามธรรมด้วยตัวแปรและฟังก์ชัน
หากคุณใช้เงื่อนไขที่คล้ายกันในหลายที่ การรวมให้เป็นตัวแปรหรือฟังก์ชันจะช่วยเพิ่มความสามารถในการบำรุงรักษา
-
หลีกเลี่ยงตรรกะที่เทอะทะ
พยายามทำให้กฎการออกแบบเป็นหนึ่งเดียวให้มากที่สุด และหลีกเลี่ยงการใช้เงื่อนไขมากเกินไป
บทสรุป
เงื่อนไขใน SASS เป็นเครื่องมือที่มีประสิทธิภาพมากสำหรับการสร้างสไตล์ที่ยืดหยุ่นและไดนามิก ในที่นี้เราได้อธิบายทุกอย่างทีละขั้นตอนตั้งแต่พื้นฐานไปจนถึงตัวอย่างการใช้งานจริง เมื่อใช้เงื่อนไขในโปรเจ็กต์จริง ควรออกแบบโดยคำนึงถึงการนำโค้ดกลับมาใช้ซ้ำ และระวังอย่าให้ทุกอย่างซับซ้อนเกินไป
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย