เครื่องมือ convert scss to css (compass คืออะไร)
compass.app คือ โปรแกรมสำหรับ covert ไฟล์ scss ให้ออกมาเป็นไฟล์ css ซึ่งโดยปกติแล้วเราต้องทำการติดตั้งโปรแกรม 2 - 3 ตัวเพื่อที่จะสามารถแปลงให้โค้ดที่เขียนในรูปแบบของ scss ให้กลายเป็นโค้ด css ได้ ว่าแล้วก็มาดูกันดีกว่า เราจะสามารถใช้งานโปรแกรม compass.app ได้อย่างไร
เริ่มต้นคือเราต้องทำการ Download Compass.app กันก่อน โดยคุณสามารถ คลิกที่นี่ เพื่อ Download โดยเมื่อเสร็จแล้ว คุณจะเห็นไฟล์ตามรูปด้านล่าง จากนั้นก็ดับเบิ้ลคลิกที่ "compass-app.exe" เพื่อใช้งานกันได้เลย
วิธีเปิดใช้งาน compass.app เพื่อ convert ไฟล์ scss เป็นไฟล์ css
- โครงสร้าง Folder ต้องมี 2 Folder คือ scss และ css
- ดับเบิ้ลคลิก "compass-app.exe" เพื่อเริ่มใช้งานโปรแกรม
- ที่มุมขวาล่างของหน้าจอ Windows คลิกตามรูป
- จากนั้นเลือก "Watch a Folder..."
- จากนั้น Folder Project ที่เราสร้างไว้ เท่านี้โปรแกรมก็จะเริ่มทำงานโดยอัตโนมัติแล้ว
- จากนั้นคลิก "Change Options..." เพื่อกำหนดชื่อ Folder
- กำหนดชื่อ Folder สำหรับเก็บไฟล์ .scss .css และเก็บรูป
- วิธีสังเกตุว่าโปรแกรมทำงานอยู่หรือไม่ให้สังเกตุที่ icon จะเปลี่ยนเป็นสีส้มตามรูปด้านล่าง
ตัวอย่างการเขียน scss และการ covert ไฟล์เป็น css
ตัวอย่างการเขียนโค้ดฝั่ง scss
body{ display: flex; .container{ .inner-box{ display: inline-flex; flex: 0 0 100%; } } }
ตัวอย่างเมื่อทำการ covert ออกมาเป็นไฟล์ css
/* line 1, ../scss/style.scss */ body { display: flex; } /* line 4, ../scss/style.scss */ body .container .inner-box { display: inline-flex; flex: 0 0 100%; }
เพิ่มเติม: กรณีที่ต้องการ covert ไฟล์พร้อมกับทำการ Minify CSS ก็สามารถตั้งค่าโดยเลือก "Output Style" เป็น "compressed"
Output ที่ได้ออกมา
body{display:flex}body .container .inner-box{display:inline-flex;flex:0 0 100%}
บทความอื่น ๆ ที่เกี่ยวข้องกับเครื่องมือการเขียนโปรแกรม
เป็นยังไงกันบ้างคะ สำหรับบทความเรื่อง เครื่องมือเปลี่ยน scss เป็น css วิธี convert scss to css ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย