ข้ามไปยังเนื้อหา
เครื่องมือแปลงไฟล์

คอมไพล์ Less เป็น CSS ออนไลน์

คอมไพล์ Less เป็น CSS ในเบราว์เซอร์ คอมไพเลอร์ less.js อย่างเป็นทางการจะขยายตัวแปร การซ้อน mixins และการดำเนินการเป็น CSS ปกติ จึงตรวจผลลัพธ์ได้โดยไม่ต้องติดตั้ง lessc

ตรวจ CSS ที่สร้างจากตัวแปร การซ้อน และ mixins ของ Less

Less

CSS

เหมาะกับงานแบบไหน

  • ตรวจ CSS ที่สร้างจากตัวแปร การซ้อน และ mixins ของ Less
  • แปลงไฟล์ Less ขนาดเล็กสำหรับโปรเจกต์ที่ใช้ CSS ปกติ

วิธีใช้

  1. วางโค้ด Less หรือเปิดไฟล์ .less
  2. เลือกการตั้งค่า vendor prefix สำหรับเบราว์เซอร์เป้าหมาย
  3. ตรวจ CSS ที่สร้าง แล้วคัดลอก

ข้อมูลเข้า Less

@primary: #2563eb;
.button {
  color: @primary;
  &:hover { text-decoration: underline; }
}

ผลลัพธ์ CSS

.button {
  color: #2563eb;
}
.button:hover {
  text-decoration: underline;
}

รายละเอียดและข้อจำกัด

ตัวแปรที่ไม่ได้กำหนดหรือวงเล็บที่ไม่ปิดจะหยุดการคอมไพล์ เริ่มจากโค้ดสั้นๆ เมื่อต้องหาข้อผิดพลาด

คอมไพล์ในเบราว์เซอร์ การ @import URL ภายนอกอาจทำให้เบราว์เซอร์ดึงทรัพยากรนั้น จึงควรใช้โค้ดที่มีข้อมูลครบในตัว

ไม่รองรับการนำเข้าไฟล์อื่นในอุปกรณ์ ปลั๊กอิน Less และตัวเลือกคอมไพเลอร์เฉพาะโปรเจกต์ ส่วน vendor prefixes ขึ้นกับการตั้งค่าเบราว์เซอร์เป้าหมาย

FAQ

เหมือนกับการคอมไพล์ด้วย lessc หรือไม่?

ใช้ less.js ซึ่งเป็นคอมไพเลอร์เดียวกับ lessc ไฟล์ที่มีข้อมูลครบในตัวจึงคอมไพล์เป็น CSS เดียวกันเมื่อใช้ตัวเลือกเริ่มต้น แต่ไม่มีฟีเจอร์โปรเจกต์ เช่น การนำเข้าไฟล์ในอุปกรณ์และปลั๊กอิน

คอมไพล์ไฟล์ที่ใช้ @import ได้หรือไม่?

เบราว์เซอร์ไม่สามารถแก้การอ้างอิงไปยังไฟล์อื่นในคอมพิวเตอร์ได้ ให้วางโค้ดที่นำเข้าไว้ในไฟล์เดียวกัน หรือคอมไพล์ทั้งโปรเจกต์ด้วย lessc

Less ต่างจาก CSS อย่างไร?

Less เป็นพรีโพรเซสเซอร์ CSS ที่เพิ่มตัวแปร การซ้อน mixins และฟังก์ชัน ต้องคอมไพล์เป็น CSS ก่อนที่เบราว์เซอร์จะใช้งานได้

ข้อกำหนดและแหล่งอ้างอิง