มีเครื่องมือที่แปลง css เป็น less.css หรือไม่

ฉันมีไฟล์ CSS ขนาดใหญ่ที่ฉันต้องการแปลงให้น้อยลง เมื่อฉันเขียน CSS ฉันไม่รู้จัก less.css แต่ตอนนี้ฉันยังต้องการใช้ CSS เก่าของฉัน

มีเครื่องมือที่สามารถช่วยให้ฉันแปลงเป็นอัตโนมัติหรือไม่?

ตอนนี้ฉันพบบางสิ่งแล้วจริง ๆ : http://leafo.net/lessphp/lessify/

มันเป็นรูปแบบพื้นฐานเช่น:

#header {
/* ... */
}

#header p {
/* ... */
}

ไปยัง

#header {
/* ... */
p {
/* ... */
}
}

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

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

ฉันทำเช่นเดียวกันสำหรับ SCSS และโครงการใหญ่มากที่มีไฟล์ CSS 10 ไฟล์ เกือบเป็นไปไม่ได้ (และเสียเวลามาก) ในการเขียน CSS ทั้งหมดด้วย SCSS ฉันเปลี่ยนชื่อมันจากนั้นทุกครั้งที่ฉันทำงานกับไฟล์ CSS ฉันจะทำการปรับโครงสร้างโค้ดใหม่เพื่อใช้ประโยชน์จากมิกซ์อิน, ตัวแปรและอื่น ๆ

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

อย่างน้อยก็ทำงานได้ดีขึ้นของการเพิ่มประสิทธิภาพและดูเหมือนว่าจะทำงานได้มากขึ้น มันยังจัดการ pseudoclasses สำหรับคุณ:

http://toki-woki.net/p/least/

เครื่องมือเหล่านี้เหมาะอย่างยิ่งสำหรับการทำงานกับไฟล์ CSS ที่มีมาก่อน นี่คือขั้นตอนที่ฉันแนะนำให้แปลง CSS เป็น LESS (ตรวจสอบให้แน่ใจว่าคุณเก็บสำเนาของไฟล์ CSS ดั้งเดิม):

1. หากคุณกำลังทำงานกับไฟล์ CSS เพิ่มเติมหลายไฟล์ให้รวมเป็นไฟล์ CSS ไฟล์เดียว สิ่งนี้ทำให้มั่นใจได้ว่าทุกอย่างได้รับการปรับปรุงน้อยลง

2. เรียกใช้โค้ด CSS ที่เป็นผลลัพธ์ผ่านยูทิลิตี้การทำความสะอาด CSS ออนไลน์ ฉันได้มีผลดีกับ cleancss: http://www.cleancss.com/ สิ่งนี้จะลบมาร์กอัปที่ไม่เกี่ยวข้องและซ้ำซ้อนซึ่งอาจไม่ถูกใช้โดยตัวแปลง LESS

3. ลบ @Media และสไตล์ใหม่ที่คุณมีในไฟล์ CSS พวกเขาอาจสร้างปัญหาหรือแนะนำซ้ำซ้อนที่เป็นไปได้ อาจเป็นความคิดที่ดีที่จะเก็บการตั้งค่าไว้ในไฟล์แยกกัน

4. วางไฟล์ CSS ผลลัพธ์ลงใน Least และดูสัตว์ร้าย

5. สร้างชุดรีเซ็ตและ @screen ขึ้นมาอีกครั้ง

6. ตอนนี้คุณทำเสร็จแล้วไปยังแต่ละคุณสมบัติและหาผู้สมัครที่ดีสำหรับการ refactoring และเปลี่ยนพวกเขาเป็นตัวแปรน้อยและการแสดงออก คุณสมบัติ CSS สีและแบบอักษรเป็นสิ่งที่ง่ายที่สุดในการแยกตัวออกค้นหาทั่วโลกและเปลี่ยนได้ง่าย ในตอนท้ายคุณสามารถตัดสินใจได้ว่าคุณต้องการแยกไฟล์เดี่ยวออกเป็นไฟล์โลจิคัลที่เล็กกว่าหรือไม่ คุณอาจพบว่ากระบวนการทำให้คุณจัดระเบียบไฟล์ของคุณในวิธีที่แตกต่างกัน

ฉันไม่ใช่ผู้แต่งของ Least เพียงคนที่กำลังมองหาเครื่องมือที่คล้ายกันและตัดสินใจที่จะบอกให้โลกรู้เกี่ยวกับมัน

ฉันไม่คิดว่าจะมีวิธีใดที่ตัวแปลงจะรู้ว่าคุณต้องการทำอะไรกับโค้ดส่วนใหญ่

ตัวอย่างเช่นไม่จำเป็นต้องรู้ว่าคุณต้องการใช้ตัวแปรใด หรือวิธีการสร้างมิกซ์อินหรือฟังก์ชั่น

ฉันคิดว่าสิ่งนี้คุณจะต้องทำด้วยตนเอง

วิธีการเกี่ยวกับการค้นหาและแทนที่

ถ้าคุณมีcolor:#ffffffและคุณต้องการที่จะเปลี่ยนเป็น@color

เพียงค้นหาcolor:#ffffffหรือและแทนที่ด้วยcolor : #ffffff@color

ฉันมักจะไม่เชื่อถือเครื่องมือเหล่านี้

หรือคุณสามารถเขียนสคริปต์ PHP ที่ง่ายมากที่จัดการมัน

อัปเดต 1 :
หรือคุณสามารถใช้http://nex-3.com/posts/96-scss-sass-is-a-css-extensionซึ่งคล้ายกับน้อยกว่าและมีเครื่องมือแปลง

ลองเว็บไซต์นี้: css2less.cc

มันแปลง CSS ของคุณเป็น LESS ในขณะที่คุณพิมพ์