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

Spread the love

เครื่องมือ 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

  1. โครงสร้าง Folder ต้องมี 2 Folder คือ scss และ css
  2. ดับเบิ้ลคลิก "compass-app.exe" เพื่อเริ่มใช้งานโปรแกรม
  3. ที่มุมขวาล่างของหน้าจอ Windows คลิกตามรูป
  4. จากนั้นเลือก "Watch a Folder..."
  5. จากนั้น Folder Project ที่เราสร้างไว้ เท่านี้โปรแกรมก็จะเริ่มทำงานโดยอัตโนมัติแล้ว
  6. จากนั้นคลิก "Change Options..." เพื่อกำหนดชื่อ Folder
  7. กำหนดชื่อ Folder สำหรับเก็บไฟล์ .scss .css และเก็บรูป
  8. วิธีสังเกตุว่าโปรแกรมทำงานอยู่หรือไม่ให้สังเกตุที่ 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 ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<