ทำงานอย่างมีประสิทธิภาพด้วยเคล็ดลับและเครื่องมือน้อยลง

ในบทช่วยสอนก่อนหน้าของเราเราได้เรียนรู้วิธีใช้ LESS ในทางปฏิบัติโดยใช้แอปพลิเคชันเช่น ChrunchApp เพื่อรวบรวมรหัส ในครั้งนี้เราจะมาแนะนำเคล็ดลับที่มีประโยชน์ที่จะสามารถเพิ่มประสิทธิภาพและประสิทธิภาพการทำงานของเราเมื่อรวบรวม LESS syntax เรากำลังจะตั้งค่าเดสก์ท็อป / สภาพแวดล้อมการทำงานของเราโดยเปิดใช้งานการเน้นไวยากรณ์สำหรับโปรแกรมแก้ไขปัจจุบันของเราโดยใช้เครื่องมือคอมไพเลอร์อัตโนมัติและใช้ Mixins ที่กำหนดไว้ล่วงหน้าจากนั้นซิงโครไนซ์มันทั้งหมดเข้าด้วยกัน.

ถ้าคุณพร้อมเรามาเริ่มกันเลยดีกว่า.

Disclaimer: เคล็ดลับที่อธิบายด้านล่างมาจากประสบการณ์ของฉันในแต่ละวันในฐานะนักออกแบบเว็บไซต์ ดังนั้นก่อนที่เราจะดำเนินการต่อไปฉันต้องการอธิบายว่าเคล็ดลับอาจเหมาะกับนักออกแบบบางคนและไม่ใช่คนอื่น เช่นเดียวกับเคล็ดลับอื่น ๆ ที่คุณพบบนเว็บ อย่างไรก็ตามฉันหวังว่าคุณจะได้รับประโยชน์จากเคล็ดลับต่อไปนี้.

1. เครื่องมือเน้นข้อความ

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

แทนที่จะติดตั้งโปรแกรมแก้ไขรหัสอื่นคุณยังสามารถใช้โปรแกรมปัจจุบันของคุณและเปิดใช้งานการเน้นไวยากรณ์ได้ ดังนั้นในโพสต์นี้ฉันจะแบ่งปันเคล็ดลับในการเพิ่มรหัส LESS ที่ไฮไลต์ลงในเครื่องมือแก้ไขข้อความที่มีชื่อเสียง 2: ข้อความประเสริฐ 2 และ Notepad++.

ข้อความประเสริฐ 2

ขณะนี้โปรแกรมแก้ไขนี้เป็นตัวเลือกที่ฉันต้องการเพื่อช่วยฉันในการเขียนรหัส แอพนี้พร้อมใช้งานสำหรับ Windows, Linux และ OSX ดังนั้นไม่ว่าระบบปฏิบัติการของคุณคืออะไรคุณจะยังคงสามารถปฏิบัติตามคำแนะนำนี้ได้.

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

บันทึก: โปรดตรวจสอบให้แน่ใจว่าคุณได้อ่านใบอนุญาตก่อนดาวน์โหลดเนื่องจากเวอร์ชั่นฟรีนั้นมีไว้สำหรับการประเมินผลเท่านั้น.

ติดตั้ง Package Console

ก่อนอื่นให้เปิด Sublime Text 2 ของคุณแล้วแสดงคอนโซลจากเมนูนี้ ดู> แสดงคอนโซล

จากนั้นคัดลอกและวางบรรทัดคำสั่งต่อไปนี้ลงในคอนโซลแล้วกด Enter เพื่อติดตั้งการควบคุมแพ็คเกจจาก wBond.net:

นำเข้า urllib2, ระบบปฏิบัติการ; pf = "Package Control.sublime-package"; IPP = sublime.installed_packages_path (); os.makedirs (ipp) ถ้าไม่ใช่ os.path.exists (ipp) ไม่มีอื่น; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); เปิด (os.path.join (IPP, PF) 'wb) .write (urllib2.urlopen (' http://sublime.wbond.net/'+pf.replace (", '% 20')) อ่าน ()); พิมพ์ 'โปรดรีสตาร์ท Sublime Text เพื่อสิ้นสุดการติดตั้ง'

นี้ แพ็คเกจคอนโซล จะช่วยให้เราติดตั้งไฮไลต์แพ็คเกจ.

การติดตั้งแพคเกจ LESS-highlighting

รีสตาร์ท Sublime Text 2 และแสดง Command Palette จากเมนูนี้ เครื่องมือ> Command Palette. รอจนกว่ารายการแพคเกจโหลดทั้งหมด จากนั้นพิมพ์ ติดตั้งแพ็คเกจ เพื่อค้นหาและโหลดที่เก็บแพ็กเกจ.

จากนั้นค้นหาแพ็กเกจ LESS จากรายการที่เก็บและกด Enter.

รอสักครู่เพื่อให้ Sublime Text 2 ดาวน์โหลดและติดตั้งแพ็กเกจจนกว่าการแจ้งเตือนต่อไปนี้จะปรากฏบนแถบสถานะ.

ไปที่เมนู ดู> ไวยากรณ์, คุณควรเห็น LESS ในรายการ หมายความว่า Sublime Text 2 รองรับ .น้อยกว่า และไวยากรณ์น้อยของคุณควรมีการเน้นสีที่เหมาะสมในขณะนี้.

Notepad++

Notepad ++ เป็นตัวแก้ไขโค้ดโอเพนซอร์สฟรีและมีปลั๊กอินที่มีประโยชน์มากมายเพื่อขยายการทำงานของมัน มันถูกใช้อย่างกว้างขวางโดยนักออกแบบ / นักพัฒนาเว็บไซต์จำนวนมากโดยเฉพาะผู้ที่ทำงานกับระบบปฏิบัติการ Windows ดังนั้นฉันตัดสินใจรวมเคล็ดลับเพื่อเพิ่มการเน้นข้อความให้น้อยลง.

ติดตั้ง LESS-highlight ใน Notepad++

การเปิดใช้งานการเน้นสีน้อยลงใน Notepad ++ นั้นค่อนข้างง่าย.

ก่อนอื่นดาวน์โหลดแพ็คเกจ LESS สำหรับ Notepad ++ จากลิงค์นี้ (userDefineLang_LESS.xml) จากนั้นไปที่ ดู> บทสนทนาที่ผู้ใช้กำหนด.

ช่องป๊อปอัพด้านล่างจะปรากฏขึ้น คลิก นำเข้า ... ปุ่มและค้นหาตำแหน่งที่คุณดาวน์โหลด .XML ไฟล์. จากนั้นเริ่ม Notepad ใหม่++.

เปิดไฟล์ .less ของคุณแล้วไปที่เมนูภาษา ตอนนี้คุณควรเห็น LESS รวมอยู่ด้วย เลือกเพื่อใช้การเน้นสีในไวยากรณ์ LESS ของคุณ.

ทรัพยากรเพิ่มเติม

มีบรรณาธิการอื่น ๆ อีกมากมายในตลาด ดังนั้นที่นี่เรามีลิงค์ที่มีประโยชน์สำหรับคุณหากคุณไม่ได้ใช้บรรณาธิการด้านบน.

Adobe DreamWeaver

ไม่ต้องสงสัย Dreamweaver มีฐานผู้ใช้จำนวนมาก สามารถใช้ได้ทั้ง Mac และ Windows ดังนั้นหากคุณใช้โปรแกรมแก้ไขนี้นี่คือแหล่งข้อมูลที่ดีในการติดตั้ง LESS Highlight ใน Adobe DreamWeaver.

Coda

หากคุณใช้ Mac คุณอาจรู้จัก Coda ตัวแก้ไขนี้เป็นหนึ่งในผู้ใช้ Mac ที่ได้รับความนิยมสูงสุด และนี่คือวิธีที่คุณสามารถติดตั้ง LESS ใน Coda.

Geany

มันเป็นหนึ่งในเครื่องมือแก้ไขโค้ดที่ได้รับความนิยมในหมู่ผู้ใช้ Linux คอมพิวเตอร์บางเครื่องในสำนักงานของฉันที่ทำงานบน Linux ใช้ Geany ด้วย ดังนั้นหากคุณใช้งานเช่นกันคุณสามารถรวมไฮไลต์ LESS โดยทำตามคำแนะนำนี้ที่ SuperUser.com

2. LESS Compiler

ซึ่งแตกต่างจาก ChrunchApp ที่มีคอมไพเลอร์ LESS ในตัวโปรแกรมแก้ไขอื่นจะไม่มีตามค่าเริ่มต้น แม้ว่าจะมีวิธีรวมอยู่บ้าง แต่ก็ค่อนข้างเป็นเรื่องเทคนิคสำหรับผู้ใช้ทั่วไป ดังนั้นทางออกที่ดีที่สุดที่ฉันมีคือการรวบรวมโดยใช้เครื่องมือต่อไปนี้: winless หรือ LESS.app. WinLESS เป็นคอมไพเลอร์ที่ออกแบบมาสำหรับ Windows ในขณะที่ LESS.app สร้างขึ้นสำหรับ OSX.

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

ก่อนอื่นฉันต้องการดาวน์โหลด WinLESS และติดตั้ง.

คลิกปุ่มเพิ่มโฟลเดอร์และค้นหาไดเรกทอรีที่คุณใส่ .น้อยกว่า ไฟล์ (ฉันคิดว่าคุณได้สร้างไว้อย่างน้อยหนึ่ง) เมื่อคุณเพิ่มหนึ่ง; WinLESS จะสแกนและค้นหาทั้งหมด .น้อยกว่า ไฟล์และแสดงให้คุณในรายการ.

ไปที่เมนู ไฟล์> การตั้งค่า, และตรวจสอบให้แน่ใจว่าได้เลือกตัวเลือกเหล่านี้แล้ว

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

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

เปิดของคุณ .น้อยกว่า ไฟล์จากไดเรกทอรีเพิ่มทำการเปลี่ยนแปลงเล็กน้อยและบันทึก.

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

หากคุณใช้ Mac คุณสามารถใช้ LESS.app ที่มีฟังก์ชันการทำงานเช่นเดียวกับ WinLESS.

มิกซ์อินล่วงหน้า

ในแนวทางการออกแบบเว็บไซต์ที่ทันสมัยในปัจจุบันเราจะใช้คุณสมบัติ CSS3 เช่น Gradient, Shadow หรือ Border Radius ที่มีลักษณะดังนี้:

-webkit-border-radius: 3px; -moz-border-radius: 3px; รัศมี - ชายแดน: 3px;

หรือ

พื้นหลัง: -moz-linear-gradient (บนสุด, # f0f9ff 0%, # a1dbff 100%); พื้นหลัง: -webkit-linear-gradient (บนสุด, # f0f9ff 0%, # a1dbff 100%); พื้นหลัง: -o-linear-gradient (บนสุด, # f0f9ff 0%, # a1dbff 100%); พื้นหลัง: -ms-linear-gradient (บนสุด, # f0f9ff 0%, # a1dbff 100%); พื้นหลัง: การไล่ระดับสีเชิงเส้น (บนสุด, # f0f9ff 0%, # a1dbff 100%);

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

และหนึ่งในสิ่งที่ฉันโปรดปรานก็คือ Less Elements ซึ่งมีกฎการตั้งค่า CSS3 ที่มีประโยชน์มากมาย ดังนั้นตอนนี้เราเขียนบรรทัดของรหัสน้อยลงจากคำนำหน้าผู้ขายที่น่าเบื่อ.

เอาล่ะทีนี้มาดูกันว่าเคล็ดลับเหล่านี้จะช่วยได้อย่างไร.

ทำให้พวกเขาทั้งหมดเข้าด้วยกัน

ในตัวอย่างนี้ฉันจะสร้างปุ่มลิงค์แบบง่าย ก่อนอื่นฉันต้องการสร้างเอกสาร HTML ใหม่และวางเครื่องหมายต่อไปนี้:

     คลิกฉัน 

สร้าง styles.less เป็นสไตล์ชีท LESS หลักของเราบันทึกในโฟลเดอร์เดียวกันด้วยเอกสาร HTML ของเราและเพิ่มโฟลเดอร์ใน WinLESS.

นำเข้า elements.less เราได้ดาวน์โหลดมาก่อนใช้ไวยากรณ์นี้:

@import "elements.less";

ตอนนี้เราสามารถใช้ Mixins ใด ๆ ที่ให้มาจาก elements.less like .ลาด, .โค้งมน, และ .เป้. ฉันแน่ใจว่าชื่อ Mixins ค่อนข้างอธิบายตนเอง.

จากนั้นวางกฎน้อยลงในสไตล์ชีทของคุณ และบันทึกอีกครั้ง

 a display: inline-block; การขยาย: 10px 20px; สี: # 555; การตกแต่งข้อความ: ไม่มี; .bw-gradient (#eee, 240, 255); .rounded; .bordered; &: โฮเวอร์ .bw-gradient (#eee, 255, 240);  

ตั้งแต่เรา .น้อยกว่า ไฟล์ถูกเพิ่มใน WinLESS ไฟล์จะถูกรวบรวมโดยอัตโนมัติ .CSS. ตอนนี้เรามาดูผลลัพธ์.

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

 a display: inline-block; การขยาย: 10px 20px; สี: # 555; การตกแต่งข้อความ: ไม่มี; พื้นหลัง: #eeeeee; พื้นหลัง: -webkit-gradient (เส้นตรง, ด้านล่างซ้าย, ด้านบนซ้าย, สีหยุด (0, # f0f0f0), สีหยุด (1, #ffffff)); พื้นหลัง: -ms-linear-gradient (ด้านล่าง, # f0f0f0 0%, # f0f0f0 100%); พื้นหลัง: -moz-linear-gradient (ด้านล่างตรงกลาง, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; รัศมี - ชายแดน: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; พื้นหลังคลิป: ช่องว่างภายใน; border-top: solid 1px #eeeeee; ขอบซ้าย: ทึบ 1px #eeeeee; ขอบขวา: แข็ง 1px #eeeeee; border-bottom: solid 1px #eeeeee;  a: hover background: #eeeeee; พื้นหลัง: -webkit-gradient (เส้นตรง, ด้านล่างซ้าย, ด้านบนซ้าย, สีหยุด (0, #ffffff), สีหยุด (1, # f0f0f0)); พื้นหลัง: -ms-linear-gradient (ด้านล่าง, #ffffff 0%, #ffffff 100%); พื้นหลัง: -moz-linear-gradient (ด้านล่างตรงกลาง, #ffffff 0%, # f0f0f0 100%); 

สรุป

นี่คือบทสรุปอย่างย่อของสิ่งที่เราได้กล่าวถึงในโพสต์นี้:

• การเปิดใช้งานการเน้นไวยากรณ์ในเครื่องมือแก้ไขปัจจุบันของเราทำให้เราไม่จำเป็นต้องติดตั้งเครื่องมือแก้ไขเพิ่มเติมสำหรับการเขียนไวยากรณ์ LESS เท่านั้น สิ่งนี้สามารถประหยัดพื้นที่ / หน่วยความจำบางส่วนในดิสก์ของคุณ.
• นอกจากนี้เราไม่จำเป็นต้องดาวน์โหลดและเชื่อมโยง LESS.js Library เข้ากับส่วนหัว HTML ของเราเหมือนที่เราทำในบทช่วยสอนล่าสุด ด้วยวิธีนี้เอกสาร HTML ของเรายังคงสะอาดและเรียบร้อย.
• การใช้เครื่องมือคอมไพเลอร์เช่น WinLESS และ LESS.app สามารถสร้างเอาต์พุต CSS แบบสแตติกได้ทันที ดังนั้นหากมีสิ่งผิดปกติกับไวยากรณ์เราสามารถตรวจสอบได้ทันที.
• Mixins ที่ตั้งไว้ล่วงหน้าเช่น LESS Elements เป็นเพื่อนที่ดีที่สุดของเรา มันสามารถประหยัดเวลาของเราได้เมื่อรวบรวมคุณสมบัติ CSS3 ที่น่าเบื่อ.

.