Ionic 4 มีการเปลี่ยนแปลงที่แม้จะไม่ใหญ่เท่ากับ Ionic ไปสู่ Ionic 2 แต่ก็เรียกได้ว่ามีการนำเทคโนโลยีใหม่ๆ ที่เป็นมาตรฐานเข้ามาใช้งานเยอะพอตัว ทำให้พวกเราได้ตื่นเต้นกับเครื่องมือใหม่ๆ อีกครั้ง เช่น
และในส่วนของการออกแบบตกแต่ง ที่ Ionic 3 ใช้แนวทางของ SASS ในการทำงาน ใน Ionic 4 ก็
รู้จักกับ SASS: การเขียน CSS ที่มีระบบตัวแปรใน Ionic 3
อย่างที่รู้ว่าการเขียน CSS นั้น สะดวกสบายและตรงไปตรงมาในการตกแต่งหน้าเว็บ หรือแอพที่เขียนได้ด้วย Ionic ก็จริง
เช่นการเขียนกำหนดสีพื้นหลังแบบนี้
.action-box {
background-color: blue;
} แต่เวลาเขียนบนแอพพลิเคชั่นหรือเว็บไซต์จริงๆ สีฟ้า (background-color:blue) ที่ว่านี้ อาจจะมีการใช้งานในหลายจุด
ที่ออกแบบแล้วทำให้เป็นระบบ Theme ที่ต้องดูแล และปรับเปลี่ยนให้ไปในทิศทางเดียวกันนั่นเอง
ระบบ SASS ให้นักพัฒนาเขียน CSS แบบสร้าง ตัวแปร ขึ้นมา เพื่อเอาไปใช้ในส่วนต่างๆ ของแอพพลิเคชั่น แล้วถ้าต้องการเราก็สามารถเปลี่ยนค่าที่ตัวแปรนี้ได้เลย เช่น
$colors: (
primary: #ecf0f1,
secondary: #e74c3c,
danger: #f53d3d,
light: #e74c3c,
dark: #222222
);เวลาเอาไปใช้ก็สามารถเขียนได้แบบนี้ (และต้อง compile เป็น CSS ปกติภายหลัง แต่ก็ทำให้เราไม่ต้องไปไล่แก้ในทุกๆ ส่วน)
.my-class {
background-color: map-get($colors, primary);
}CSS4 Variables: การใช้งานตัวแปรใน CSS แบบมาตรฐาน
จากที่ใช้ SASS มันดีมั้ย? ตอบเลยว่าดี เพราะลดเวลางานของเราในการปรับแต่ง Theme ของเว็บเรา หรือแอพเราได้ง่าย
แต่มันก็ติดตรงที่ว่า SASS มันต้อง compile เป็น CSS ก่อน ดังนั้นการเขียนโค้ดเปลี่ยนแปลงค่าตอนใช้งานตัวแอพนั้น แทบจะเป็นไปไม่ได้
CSS4 Variables ที่มาให้มาตรฐาน CSS ตัวล่าสุด และมีใช้ใน Ionic 4 จึงเป็นทางเลือกที่ชาญฉลาด
จริงๆ CSS4 Variables ใช้หลักการทำงานเดียวกับ SASS นั่นคือการนำระบบตัวแปรมาใช้อย่างเป็นทางการนั่นเอง
ดูตัวอย่างการเขียน CSS4 Variable กันครับ
:root {
--ion-color-primary: #ecf0f1;
--ion-color-secondary: #e74c3c;
--ion-color-danger: #f53d3d;
--ion-color-light: #e74c3c;
--ion-color-dark: #222222;
}- สังเกตว่าการเขียน variable ใน CSS4 แบบปกติจะเป็นแบบ
--variable-name - สังเกตว่า
:rootเปรียบได้กับ<html>ในการเขียน HTML นั่นคือตัวแปรที่ประกาศในส่วนนี้ จะเอาไปใช้ได้กับส่วนอื่นๆ นั่นเอง
และด้านล่างคือการเรียกใช้ Variable ใน CSS ทั่วไปของเราครับ
.my-class {
background-color: var(--ion-color-primary);
}เทียบการใช้งาน SASS ใน Ionic 3 และ CSS 4 Variable ใน Ionic 4
มาลองดู SASS เทียบกับ CSS4 Variables กัน
ด้านล่างนี้คือตอนประกาศ
/* SASS */
$colors: (
primary: #ecf0f1,
secondary: #e74c3c,
danger: #f53d3d,
light: #e74c3c,
dark: #222222
);
/* CSS4 Variables */
:root {
--ion-color-primary: #ecf0f1;
--ion-color-secondary: #e74c3c;
--ion-color-danger: #f53d3d;
--ion-color-light: #e74c3c;
--ion-color-dark: #222222;
}แล้วตอนเรียกใช้งานใน CSS Rule ปกติ
/* SASS */
.my-class {
background-color: map-get($colors, primary);
}
/* CSS4 Variables */
background-color: var(--ion-color-primary);
}ข้อดีของ CSS4 Variables
- ไม่ต้องเสียเวลา compile แบบ SASS เพราะรองรับการทำงานจาก Web Browser โดยตรง
- สามารถเขียนโค้ด JavaScript, TypeScript ปรับเปลี่ยนตอนแอพรันอยู่ได้
- ใช้ความเข้าใจในการเขียน CSS ทั่วไป ทำให้ง่ายกว่า
เปิดอบรม เรียนสร้างแอพ iOS และ Android ด้วยภาษาเว็บ
เริ่มต้น และพัฒนา Mobile Application ที่เขียนครั้งเดียวได้ทั้ง iOS และ Android ด้วยเนื้อหาที่เข้าใจง่าย และแชร์ประสบการณ์จากวิทยากรประสบการณ์กว่า 6 ปี
พิเศษ! โปรรับปีใหม่ลงทะเบียนและชำระค่าลงทะเบียนรอบ 28-30 มกราคม พร้อมต่อยอดเรียนออนไลน์เนื้อหาขั้นสูงมูลค่า 5,800 บาทฟรี!