เครื่องมือเปลี่ยน scss เป็น css วิธี convert scss to css

Spread the love

จำนวนผู้เข้าชม : 18

เครื่องมือ 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 ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย