LESS CSS - คู่มือสำหรับผู้เริ่มต้น

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

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

คอมไพเลอร์

ในการเริ่มต้นเราจะต้องตั้งค่าคอมไพเลอร์ ไวยากรณ์ของ LESS นั้นไม่ได้มาตรฐานตามข้อกำหนดของ W3C เบราว์เซอร์จะไม่สามารถประมวลผลและแสดงผลได้แม้ว่าจะสืบทอดคุณลักษณะที่คล้ายกับ CSS.

นี่คือเหลือบที่รหัสน้อย:

 @ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; สี: @ color-base;  

คอมไพเลอร์จะประมวลผลรหัสและเปลี่ยน LESS เป็นรูปแบบ CSS ที่สอดคล้องกับเบราว์เซอร์:

 .class1 background-color: # 2d5e8b;  .class1 .class2 background-color: #fff; สี: # 2d5e8b;  

มีเครื่องมือจำนวนมากสำหรับการรวบรวม CSS:

ใช้จาวาสคริปต์

น้อยมาพร้อมกับ less.js ไฟล์ที่ปรับใช้ง่ายในเว็บไซต์ของคุณ สร้างสไตล์ชีทด้วย .น้อยกว่า ส่วนขยายและลิงก์ในเอกสารของคุณโดยใช้ rel = "สไตล์ชีต / น้อย" คุณลักษณะ.

คุณสามารถรับไฟล์ JS ได้ที่นี่ดาวน์โหลดผ่านตัวจัดการแพคเกจ Bower มิฉะนั้นลิงก์โดยตรงไปยัง CDN เช่น:

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

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

กำลังใช้ CLI

LESS จัดเตรียมอินเตอร์เฟสบรรทัดคำสั่งพื้นฐาน (CLI), lessc, ซึ่งจัดการงานหลายอย่างนอกเหนือจากการรวบรวมไวยากรณ์น้อย การใช้ CLI เราสามารถใช้รหัสบีบอัดไฟล์และสร้างแผนที่แหล่งที่มา คำสั่งขึ้นอยู่กับ Node.js ที่อนุญาตให้คำสั่งทำงานได้อย่างมีประสิทธิภาพใน Windows, OS X และ Linux.

ตรวจสอบให้แน่ใจว่ามีการติดตั้ง Node.js (หรือติดตั้งตัวติดตั้งที่นี่) จากนั้นติดตั้ง LESS CLI ผ่าน NPM (Node Package Manager) โดยใช้บรรทัดคำสั่งต่อไปนี้.

 npm ติดตั้ง -g น้อยกว่า 

ตอนนี้คุณมี lessc คำสั่งในการกำจัดของคุณเพื่อรวบรวมน้อยลงใน CSS:

 สไตล์น้อย 

ใช้ Task Runner

ตัวเลือก Task Runner เป็นเครื่องมือที่ทำให้งานการพัฒนาและเวิร์กโฟลว์เป็นไปโดยอัตโนมัติ แทนที่จะวิ่ง lessc สั่งทุกครั้งที่เราต้องการรวบรวมรหัสของเราเราสามารถตั้งค่าติดตั้ง task runner และตั้งค่าให้ดูการเปลี่ยนแปลงภายในไฟล์ LESS ของเราและรวบรวม LESS ลงใน CSS ได้ทันที.

เครื่องมือยอดนิยมสองประเภทในวันนี้คือ Grunt และ Gulp เรามีชุดโพสต์ที่ครอบคลุมเครื่องมือเหล่านี้ ตรวจสอบโพสต์เพื่อเรียนรู้วิธีปรับใช้เครื่องมือเหล่านี้ในเวิร์กโฟลว์ของคุณ.

• วิธีใช้ Grunt เพื่อทำให้เวิร์กโฟลว์ของคุณเป็นแบบอัตโนมัติ
• เริ่มต้นด้วย Gulp.js
• การต่อสู้ของสคริปต์สร้าง: อึก Vs Grunt

การใช้งานกราฟิก

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

นี่คือรายการที่สมบูรณ์:

App	เวที	ราคา
สารผสม	OS X / Windows	ฟรี
สัตว์มีถุงหน้าท้องคล้ายหมี	OS X / Windows / Linux	ฟรี
Prepros	OS X / Windows	ฟรีแมน (USD29)
winless	ของ windows	ฟรี
CodeKit	OS X	USD32

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

เครื่องมือแก้ไขรหัส

คุณสามารถใช้โปรแกรมแก้ไขรหัสใด ๆ เพียงติดตั้งปลั๊กอินหรือส่วนขยายเพื่อเน้นไวยากรณ์น้อยกว่าด้วยสีที่ถูกต้องคุณลักษณะที่มีให้ใช้งานในขณะนี้สำหรับเครื่องมือแก้ไขโค้ดและ IDE เกือบทั้งหมดรวมถึง SublimeText, Notepad ++, VisualStudio, TextMate และ Eclipse.

ตอนนี้เรามีคอมไพเลอร์และตัวแก้ไขโค้ดครบชุดแล้วเราสามารถเริ่มเขียนสไตล์ CSS ด้วยไวยากรณ์ LESS.

น้อยกว่าไวยากรณ์

ไม่เหมือนกับ CSS ทั่วไปที่เรารู้จัก LESS นั้นทำงานได้มากกว่าภาษาโปรแกรม เป็นแบบไดนามิกดังนั้นคาดว่าจะพบคำศัพท์บางอย่างเช่น ตัวแปร, การทำงาน และ ขอบเขต ระหว่างทาง.

ตัวแปร

ก่อนอื่นเรามาดูที่ ตัวแปร.

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

 .class1 background-color: # 2d5e8b;  .class2 background-color: #fff; สี: # 2d5e8b;  .class3 border: 1px solid # 2d5e8b;  

การปฏิบัตินี้ดีจริง - จนกว่าเราจะพบว่าตัวเองต้องผ่านการกลั่นกรองมากกว่า ตัวอย่างหนึ่งพันหรือมากกว่านั้น ตลอดสไตล์ชีท สิ่งนี้อาจเกิดขึ้นได้เมื่อสร้างเว็บไซต์ขนาดใหญ่ งานจะน่าเบื่อ.

หากเราใช้ CSS pre-procesor เช่น LESS ตัวอย่างข้างต้นจะไม่เป็นปัญหาเราสามารถใช้งานได้ ตัวแปร. ตัวแปรจะช่วยให้เราสามารถจัดเก็บ คงที่ ค่าที่สามารถนำมาใช้ใหม่ในภายหลังในสไตล์ชีททั้งหมด.

 @ color-base: # 2d5e8b; .class1 background-color: @ color-base;  .class2 background-color: #fff; สี: @ color-base;  .class3 border: 1px solid @ color-base;  

ในตัวอย่างด้านบนเราเก็บสี # 2d5e8b ใน @ สีฐาน ตัวแปร. เมื่อคุณต้องการเปลี่ยนสีเราจะต้องเปลี่ยนค่าในตัวแปรนี้เท่านั้น.

นอกเหนือจากสีคุณยังสามารถใส่ค่าอื่น ๆ ในตัวแปรเช่น:

 @ font-family: Georgia @ dot-border: ประ @transition: linear @opacity: 0.5 

mixins

ในน้อยเราสามารถใช้ mixins เพื่อนำการประกาศทั้งหมดกลับมาใช้ใหม่ในชุด CSS ของกฎในชุดของกฎอื่น นี่คือตัวอย่าง:

 .การไล่ระดับสี พื้นหลัง: #eaeaea; พื้นหลัง: linear-gradient (บนสุด, #eaeaea, #cccccc); พื้นหลัง: -o-linear-gradient (ด้านบน, #eaeaea, #cccccc); พื้นหลัง: -ms-linear-gradient (บนสุด, #eaeaea, #cccccc); พื้นหลัง: -moz-linear-gradient (ด้านบน, #eaeaea, #cccccc); พื้นหลัง: -webkit-linear-gradient (ด้านบน, #eaeaea, #cccccc);  

ในตัวอย่างด้านบนเราได้ตั้งค่าเริ่มต้นไว้แล้ว ลาด สีภายใน .การไล่ระดับสี ชั้น เมื่อใดก็ตามที่เราต้องการเพิ่มการไล่ระดับสีเราก็ใส่ .การไล่ระดับสี ทางนี้:

 div .gradients; เส้นขอบ: 1px solid # 555; รัศมี - ชายแดน: 3px;  

.กล่อง จะสืบทอดบล็อกการประกาศทั้งหมดภายใน .การไล่ระดับสี. ดังนั้นกฎ CSS ด้านบนเท่ากับ CSS ธรรมดาต่อไปนี้:

 div background: #eaeaea; พื้นหลัง: linear-gradient (บนสุด, #eaeaea, #cccccc); พื้นหลัง: -o-linear-gradient (ด้านบน, #eaeaea, #cccccc); พื้นหลัง: -ms-linear-gradient (บนสุด, #eaeaea, #cccccc); พื้นหลัง: -moz-linear-gradient (ด้านบน, #eaeaea, #cccccc); พื้นหลัง: -webkit-linear-gradient (ด้านบน, #eaeaea, #cccccc); เส้นขอบ: 1px solid # 555; รัศมี - ชายแดน: 3px;  

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

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

 @import "elements.less"; 

ตอนนี้เราสามารถนำกลับมาใช้ใหม่ทั้งหมดได้แล้ว ชั้นเรียน ให้จาก elements.less, ตัวอย่างเช่นเพื่อเพิ่ม 3PX รัศมีชายแดนถึง div, เราสามารถเขียน:

 div .rounded (3px);  

สำหรับการใช้งานเพิ่มเติมโปรดดูเอกสารประกอบอย่างเป็นทางการ.

กฎที่ซ้อนกัน

เมื่อคุณเขียนสไตล์ใน CSS ธรรมดาคุณอาจพบโครงสร้างรหัสทั่วไปเหล่านี้ด้วย.

 nav height: 40px; ความกว้าง: 100%; พื้นหลัง: # 455868; border-bottom: 2px solid # 283744;  nav li width: 600px; ความสูง: 40px;  nav li a color: #fff; line-height: 40px; ข้อความเงา: 1px 1px 0px # 283744;  

ใน CSS ธรรมดาเราเลือกองค์ประกอบลูกโดยกำหนดเป้าหมายผู้ปกครองในชุดกฎทุกชุดซึ่งซ้ำซ้อนมากหากเราปฏิบัติตาม “ปฏิบัติที่ดีที่สุด” หลัก.

ใน LESS CSS เราสามารถทำให้กฎกำหนดได้ง่ายขึ้น ทำรังองค์ประกอบของเด็กภายในผู้ปกครอง, ดังนี้

 nav height: 40px; ความกว้าง: 100%; พื้นหลัง: # 455868; border-bottom: 2px solid # 283744; li width: 600px; ความสูง: 40px; a color: #fff; line-height: 40px; ข้อความเงา: 1px 1px 0px # 283744;  

คุณยังสามารถมอบหมาย หลอกชั้นเรียน, ชอบ : เลื่อน, ถึงตัวเลือกโดยใช้สัญลักษณ์เครื่องหมาย & (&).

สมมติว่าเราต้องการเพิ่ม : เลื่อน ไปที่แท็กจุดยึดด้านบนเราสามารถเขียนได้ด้วยวิธีนี้:

 a color: #fff; line-height: 40px; ข้อความเงา: 1px 1px 0px # 283744; &: โฮเวอร์ background-color: # 000; สี: #fff;  

การทำงาน

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

สมมติว่าเราต้องการให้องค์ประกอบ B สูงกว่าองค์ประกอบ A สองเท่าในกรณีนี้เราสามารถเขียนได้ดังนี้

 @height: 100px .element-A height: @height;  .element-B height: @height * 2;  

ดังที่คุณเห็นด้านบนเราจะเก็บค่าไว้ใน @height ตัวแปรจากนั้นกำหนดค่าให้กับองค์ประกอบ A.

ในองค์ประกอบ B แทนที่จะคำนวณความสูงด้วยตนเอง, เราสามารถคูณความสูงได้ 2 ใช้เครื่องหมายดอกจัน (*) ตอนนี้เมื่อใดก็ตามที่เราเปลี่ยนค่าใน @height ตัวแปร, องค์ประกอบ B จะมีความสูงสองเท่าเสมอ.

ดูตัวอย่างการใช้งานขั้นสูงเพิ่มเติมในบทช่วยสอนก่อนหน้าของเรา: การออกแบบแถบนำทางเมนูลื่น.

ขอบเขต

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

 ส่วนหัว @color: สีดำ; พื้นหลังสี: @color; nav @color: สีน้ำเงิน; พื้นหลังสี: @color; a color: @color;  

ในตัวอย่างด้านบน ส่วนหัว มี สีดำ สีพื้นหลัง แต่ navสีพื้นหลังจะเป็น สีน้ำเงิน เนื่องจากมันมีตัวแปร @color ในขอบเขตท้องถิ่นของมันในขณะที่ จะมีสีน้ำเงินที่สืบทอดมาจากแม่ที่ใกล้เคียง, nav.

ความคิดสุดท้าย

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

ต่อไปนี้เป็นแบบฝึกหัดสองสามข้อที่ฉันแนะนำให้คุณลองดูเคล็ดลับและวิธีปฏิบัติเพิ่มเติมซึ่งสามารถช่วยผลักดันทักษะการเรียนรู้ของคุณให้น้อยลงไปอีกระดับ.

• บทเรียน CSS น้อยลง: การออกแบบแถบนำทางเมนูเนียน
• ทำความเข้าใจกับฟังก์ชั่นสีน้อยลง
• 3 คุณสมบัติ LESS CSS ใหม่ที่คุณควรรู้