มีวิธีการรวบรวมไฟล์น้อยไป CSS หรือไม่ (เพื่อให้ทุกเบราว์เซอร์ไม่ต้อง)

ฉันกำลังพิจารณาใช้LESSแต่ฉันคิดว่าเบราว์เซอร์ที่ปิดใช้งาน JavaScript และ CSS ของฉันไม่สามารถอ่านได้ (และไซต์ดูแย่มาก)

นอกจากนี้ยังทำให้วิศวกรในฉันบังคับให้ทุก ๆ เบราว์เซอร์ "คอมไพล์" ไฟล์ Less เป็น. css เมื่อเราสามารถ "คอมไพล์" มันเพียงครั้งเดียวทุกครั้งที่เราแก้ไขมัน

ใช่. คุณสามารถใช้แอพที่รวบรวมไฟล์ LESS ให้กับ CSS บนเครื่องพัฒนาของคุณโดยอัตโนมัติขณะที่คุณโค้ด จากนั้นอัปโหลดไฟล์ CSS ที่สร้างขึ้นไปยังเซิร์ฟเวอร์ของคุณเมื่อคุณพัฒนาเสร็จแล้ว

• กระทืบ! สำหรับ Windows & Mac
• WinLessสำหรับ Windows
• CodeKitสำหรับ Mac

ฉันใช้SimpLESS - ลากวางทำได้

LESS มาพร้อมกับไบนารี่ (lessc) ที่ให้คุณทำการคอมไพล์ไฟล์ .less ของคุณล่วงหน้า คุณใช้มันเช่น:

 $ lessc styles.less > styles.css

แต่ฉันคิดว่าคนส่วนใหญ่ใช้คำสั่งlessc -wor lessc --watchเพื่อคอมไพล์สไตล์ชีท CSS ใหม่โดยอัตโนมัติทุกครั้งที่มีการอัพเดทไฟล์ LESS คุณสามารถมี CSS น้อยลงเช่นlessc -w -xกัน

แก้ไข:เพื่อชี้แจง, lessc มาพร้อมกับการติดตั้งฝั่งเซิร์ฟเวอร์ (เช่นเมื่อคุณติดตั้งน้อยลงผ่านตัวจัดการแพคเกจ node.js) แต่คุณสามารถดาวน์โหลดได้ด้วยตนเองจาก GitHub

lessc /bin/lesscตั้งอยู่ที่ นี้เป็นหลักสูตรไบนารีระวัง * (ควรทำงานสำหรับ Mac) แต่มีเป็นไบนารี Windows ( lessc.exe ) ตาม dotless ซึ่งเป็นอีกหนึ่งของ Windows น้อยคอมไพเลอร์

อัปเดต: ใช้less-watchเพื่อรวบรวมโดยอัตโนมัติ

อีกทางเลือกหนึ่งนักพัฒนาวันนี้ใช้นักวิ่งงานที่ต้องการgruntจัดการสร้างระบบอัตโนมัติ (รวบรวม, ลดขนาด, การทดสอบและอื่น ๆ ) การใช้grunt-contrib-watch, grunt-contrib-lessและgrunt-contrib-livereloadจริงๆคุณสามารถปรับปรุงเวิร์กโฟลว์การพัฒนาของคุณ

ตัวอย่างเช่นถ้าคุณใช้yoเพื่อนั่งร้านโครงการเว็บใหม่ของคุณจะมีการกำหนดค่าล่วงหน้าเพื่อดูไฟล์ LESS / CSS / JS / HTML ของคุณสำหรับการเปลี่ยนแปลงและคอมไพล์ส่วนที่จำเป็นของโครงการเมื่อจำเป็น เรียกใช้grunt serveและคุณพร้อมที่จะโค้ดโดยไม่ต้องกังวลเกี่ยวกับการคอมไพล์ด้วยตนเอง (LESS / SASS / CoffeeScript) / minifying / concatenating รหัสของคุณหรือรีเฟรชเบราว์เซอร์ของคุณเองเหมือนมนุษย์ถ้ำ ...

มีหลายตัวเลือกสำหรับการรวบรวมน้อยถึง CSS บนเซิร์ฟเวอร์และตัวเลือกที่คุณเลือกอาจขึ้นอยู่กับสิ่งที่คุณใช้สำหรับส่วนที่เหลือของเว็บไซต์

• ถ้าคุณใช้ Node.js เดิมlesscssจะทำงาน
• ถ้าคุณใช้ PHP, PHP น้อยลง มันมี API ขยะเล็กน้อยเมื่อพูดถึงการส่งผ่านตัวแปรจาก PHP แต่ทำงานได้
• หากคุณใช้ Ruby, SASSไม่ใช่ LESS แต่คล้ายกันมากเมื่อฉันเปลี่ยนจากการใช้ SASS (โครงการส่วนตัว) เป็น LESS (โครงการ PHP ในที่ทำงาน) ฉันไม่ได้สังเกตเห็นความแตกต่างใด ๆ นอกเหนือจากนามสกุลไฟล์ นอกจากนี้ยังมีห้องสมุดที่มีประโยชน์ของ mixins - COMPASS ฉันไม่ได้ลองใช้กับ LESS แต่คาดว่าพวกเขาจะใช้งานได้ (เห็นได้ชัดว่า LESS เดิมเป็น Ruby ดังนั้นอาจมีคอมไพเลอร์เก่าที่ลอยอยู่รอบ ๆ ด้วย)
• ถ้าคุณใช้ ASP.Net . less ฉันไม่ได้ใช้อันนี้ดังนั้นฉันไม่รู้ว่ามันใช้งานได้ดีแค่ไหน
• ถ้าคุณใช้ Java lesscss4j จะรวบรวมข้อมูลกับสภาพแวดล้อมการเขียนสคริปต์ Rhino ในตัวของ LESS และ Java 6
• ถ้าคุณใช้ Perl มีโมดูลLESSpใน CPAN