วิธีการแปลง CSS เก่าเป็นน้อย
เราได้ครอบคลุมพื้นฐานส่วนใหญ่ของ LESS ในโพสต์ก่อนหน้าของเรา หากคุณติดตามซีรี่ส์ LESS ของเราเราเชื่อว่า ณ จุดนี้คุณมีความคิดที่ดีเกี่ยวกับวิธีใช้ ตัวแปร, mixins และ การทำงาน ใน LESS.
นอกจากนี้เรายังได้กล่าวถึงวิธีการแปลง LESS เป็น CSS ปกติด้วยแอปหรือคอมไพเลอร์ แต่เราจะทำตรงข้ามได้อย่างไร การแปลง CSS เป็น LESS เคล็ดลับนี้เหมาะสำหรับคุณ.
การใช้เครื่องมือ
ด้วยความนิยมที่เพิ่มขึ้นของ ตัวประมวลผลล่วงหน้า CSS, เครื่องมือและแอพใหม่ที่มีเป้าหมายเพื่อทำให้ชีวิตของนักออกแบบเว็บไซต์หรือนักพัฒนาง่ายขึ้นเช่นเครื่องมือนี้: CSS2Less.
เครื่องมือนี้ช่วยให้เราสามารถแปลง CSS ปกติเป็น LESS ดังนั้นลองทำดู ฉันมีกฎ CSS ต่อไปนี้จากไฟล์เก่าที่จะทำการแปลง.
nav height: 40px; ความกว้าง: 100%; พื้นหลัง: # 000; border-bottom: 2px solid #fff; nav ul padding: 0; กำไรขั้นต้น: 0 อัตโนมัติ; nav li display: inline; ลอย: ซ้าย; นำทาง color: #fff; จอแสดงผล: บล็อกแบบอินไลน์; ความกว้าง: 100px; ข้อความเงา: 1px 1px 0px # 000; nav li a border-right: 1px solid #fff; กล่องปรับขนาด: ชายแดนกล่อง; nav li: ลูกคนสุดท้าย ชายแดนขวา: 0; nav a: hover, nav a: active background-color: #fff;
นี่คือผลลัพธ์.
nav a: hover, nav a: active background-color: #fff; nav height: 40px; ความกว้าง: 100%; พื้นหลัง: # 000; border-bottom: 2px solid #fff; a color: #fff; จอแสดงผล: บล็อกแบบอินไลน์; ความกว้าง: 100px; ข้อความเงา: 1px 1px 0px # 000; ul padding: 0; กำไรขั้นต้น: 0 อัตโนมัติ; li: ลูกคนสุดท้าย a เส้นขอบขวา: 0; li display: inline; ลอย: ซ้าย; a border-right: 1px solid #fff; กล่องปรับขนาด: ชายแดนกล่อง;
อย่างที่เราเห็นด้านบนตอนนี้ CSS เก่าของเราตอนนี้ซ้อนกันใน LESS แล้ว.
การ จำกัด
อย่างไรก็ตามเราสามารถเห็นข้อ จำกัด บางอย่างในผลลัพธ์ของการแปลง ใน CSS เก่าเรามีสีเดียวกันหลายสีเช่นในสองการประกาศนี้ border-bottom: 2px solid #fff; และ ขอบขวา: 1px solid #fff; เรามีเส้นขอบทั้งสองเป็นสีขาว ในน้อยเราสามารถเก็บค่าคงที่นี้ได้ใน ตัวแปร.
มันยังไม่ได้ทำรังและแยก หลอก * ด้วยสัญลักษณ์แอมเปอร์แซนด์ (&) เช่นในกฎต่อไปนี้ li: สุดท้ายเด็ก และ nav a: hover, nav a: active. พวกมันยังคงอยู่เหมือนเดิมที่เราสามารถทำให้ชุดกฎได้ง่ายขึ้นด้วยวิธีนี้
li &: first-child a &: hover &: active
ข้อสรุป
แม้จะมีข้อ จำกัด อยู่ในขณะนี้ แต่เครื่องมือนี้มีประโยชน์มากในการประหยัดเวลาของเราในการสร้างชุดกฎ CSS เราเพียง แต่ต้องดำเนินการเองเท่านั้น อาจเป็นไปได้จนกระทั่งถึงข้อ จำกัด ข้างต้น การแก้ไข.
