บทเรียนน้อย CSS การออกแบบแถบนำทางเมนูเนียน

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

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

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

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

เรามาทำแบบฝึกหัดกับ LESS เพื่อทำความเข้าใจกับสิ่งที่มันมีให้.

ออกแบบด้วย LESS

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

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

• LESS Is More: ทำให้การเข้ารหัส CSS ของคุณง่ายขึ้นด้วย LESS
• เขียน CSS ที่ดีขึ้นด้วย Less
• บทนำสู่การน้อยกว่าและการเปรียบเทียบกับ Sass

การจัดเตรียม

ก่อนอื่นมีสิ่งสำคัญบางอย่างที่เราต้องการสำหรับโครงการขนาดเล็กนี้คือ:

1. โปรแกรมแก้ไขข้อความน้อยกว่า

เราจะต้องมีเครื่องมือแก้ไขข้อความเพื่อกำหนดรหัสเมนูนำทาง อย่างไรก็ตามโปรแกรมแก้ไขข้อความส่วนใหญ่ที่มีในตลาดทุกวันนี้ (เช่น Dreamweaver, Notepad ++, InType, Sublime Text 2) ยังไม่รองรับ .น้อยกว่า นามสกุลไฟล์ตามค่าเริ่มต้นดังนั้นไวยากรณ์อาจไม่ถูกเน้นด้วย.

ดังนั้นเพื่อจุดประสงค์ของบทช่วยสอนนี้เราจะใช้โปรแกรมแก้ไขข้อความพิเศษสำหรับ LESS ชื่อ ChrunchApp เราสามารถเปิดและแก้ไข .น้อยกว่า ไฟล์นามสกุลและรวบรวมเป็น CSS คงที่โดยใช้โปรแกรมนี้ เนื่องจากเป็นแอปพลิเคชัน Adobe Air จึงสามารถติดตั้งในระบบปฏิบัติการเดสก์ท็อปหลักทุกเครื่อง (Win, OSX และ Linux).

สำหรับเครื่องมือแก้ไข HTML คุณสามารถใช้โปรแกรมแก้ไขใดก็ได้ที่คุณคุ้นเคยแล้วตอนนี้ ฉันเองชอบ Sublime Text 2.

2. Less.js

จากนั้นดาวน์โหลดไลบรารี LESS JavaScript จากเว็บไซต์อย่างเป็นทางการของพวกเขาเวอร์ชันปัจจุบันคือ 1.2.1 วางไว้ในโฟลเดอร์ฝึกหัดสำหรับสิ่งนี้.

จากนั้นลิงก์ไฟล์กับเอกสาร HTML.

3. คำนำหน้าฟรี

นอกจากนี้เรายังจะใช้คุณสมบัติ CSS3 บางอย่างเพื่อให้ได้เอฟเฟกต์บางอย่างในเมนูการนำทางซึ่งจะรวมถึงคำนำหน้าผู้ขาย (-moz-, -โอ-, -WebKit-) เพื่อให้การแสดงผลถูกต้องในเบราว์เซอร์ที่แตกต่างกัน อย่างไรก็ตามฉันเองไม่ชอบการใช้คำนำหน้าเพราะมันจะขยายไฟล์ CSS.

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

ดาวน์โหลดไฟล์และเชื่อมโยงไปยังไฟล์ HTML.

เอาล่ะเราทุกคนพร้อมแล้ว ตอนนี้เรามาเริ่มสร้างโครงสร้างของ HTML.

HTML Markup

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

จัดแต่งทรงผมน้อย

ในส่วนนี้เราจะเริ่มการนำทางด้วย LESS language สำหรับผู้ที่ยังใหม่กับภาษาที่เหมือนการเขียนโปรแกรมการเขียนไวยากรณ์ CSS ด้วย LESS จะรู้สึกแปลก ๆ และแปลก ๆ เล็กน้อย แต่ไม่ต้องกังวลเมื่อคุณฝึกฝนมาแล้วมันจะสนุกกว่าวิธีที่เราเขียน CSS อย่างแท้จริง (มันเป็นประสบการณ์ของฉัน.

ลองตรวจสอบสไตล์การนำทางจากแหล่งที่มาของแรงบันดาลใจของเรา.

ดังที่เราเห็นในภาพหน้าจอด้านบนการนำทางของ Apple.com มีลักษณะทั่วไป 6 แบบดังต่อไปนี้:

• เงา
• ชายแดน
• divider
• การไล่ระดับสี
• โฮเวอร์เอฟเฟ็กต์
• ข้อความ

เราจะจัดเก็บสไตล์เหล่านี้และบันทึกไว้ภายใน config.less เป็นสไตล์เริ่มต้น การกำหนดค่า; นักออกแบบบางคนอาจตั้งชื่อมัน lib.css นั่นหมายถึง ห้องสมุด. เชื่อมโยงไฟล์นี้กับเอกสารของเรา.

ตรวจสอบให้แน่ใจว่าคุณวางไว้หน้าไลบรารี LESS JavaScript.

กำหนดฐานสีด้วยตัวแปร

ในขั้นตอนนี้เราจะกำหนดฐานสีการนำทางโดยใช้ตัวแปร ตัวแปรใน LESS ถูกประกาศโดยใช้ แอท สัญลักษณ์.

@theme: # 555;

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

กำหนดลักษณะเงาเริ่มต้นด้วย Mixins

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

.shadow box-shadow: 0 1px 2px 0 @theme; 

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

กำหนดสไตล์เส้นขอบด้วย Parametric Mixins

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

.เส้นขอบ (@radius: 3px) border-radius: @radius; border: 1px solid @theme - # 050505; 

ในรหัสข้างต้นเราตั้งค่าชายแดนเริ่มต้น @รัศมี สำหรับ 3PX และอย่างที่เรากล่าวถึงก่อนหน้านี้ค่านี้สามารถเปลี่ยนแปลงได้ในภายหลัง.

กำหนดรูปแบบการไล่ระดับสีตัวหารและแบบโฮเวอร์กับการใช้งาน

การดำเนินการเป็นเพียงภาษาโปรแกรมที่เราสามารถใช้สูตรทางคณิตศาสตร์เช่นการบวกหารการลบและการคูณเพื่อให้ได้ผลลัพธ์ที่ต้องการ ลองดูรหัสต่อไปนี้:

.ตัวแบ่ง ลักษณะเส้นขอบ: ทึบ; ความกว้างชายแดน: 0 1px 0 1px; เส้นขอบสี: โปร่งใส @theme - # 111 โปร่งใส @theme + # 333; 

ในรหัสข้างต้นเราลบ @theme ตัวแปรตาม # 111, วิธีนี้ผลลัพธ์สีขอบด้านซ้ายจะค่อนข้างเข้มขึ้น ในขณะที่สีเส้นขอบด้านขวามาจากการเพิ่ม @theme ตัวแปรที่มีสีฐานสิบหก # 333, ผลลัพธ์จะเบาลง.

ระดับชุดสี

สำหรับคุณบางคนที่อาจสับสนกับสูตรลองตรวจสอบแผนภาพโทนสีด้านล่างเพื่อทำความเข้าใจให้ดีขึ้น:

โทนสีเข้มที่สุดคือ # 000 (สีดำ) ในขณะที่โทนแสงสูงสุดคือ # fff (สีขาว) และฐานสีปัจจุบันของเราคือ # 555. ดังนั้นถ้าเราต้องการให้สีฐานเป็น 3 ระดับที่มืดกว่าจากปัจจุบันเราสามารถลบออกได้ง่ายๆ # 333. สามารถใช้วิธีเดียวกันนี้เพื่อทำให้สีอ่อนลง.

ต่อไปเราจะใช้สีไล่ระดับสี.

.การไล่ระดับสี พื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านบน, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect background: linear-gradient (บน, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

กำหนดรูปแบบข้อความด้วย Guard Mixins

เราวางแผนที่จะมี 2 สีบนแถบนำทางสีเข้มและแสงหนึ่งสี เราใช้สองข้อความสั่งแบบมีเงื่อนไขสำหรับข้อความโดยใช้ Guard Mixins.

ครั้งแรกเมื่อข้อความได้รับสีที่มีความสว่างเท่ากับหรือมากกว่า 50% ข้อความเงา ควรเปลี่ยนมืดในสีกรณีนี้ # 000000.

.textcolor (@txtcolor) เมื่อ (lightness (@txtcolor)> = 50%) color: @txtcolor; ข้อความเงา: 1px 1px 0px # 000000; 

จากนั้นเมื่อข้อความได้รับสีที่ความสว่างน้อยกว่า 50% ข้อความเงา จะเปลี่ยนเป็นสีขาว.

.textcolor (@txtcolor) เมื่อ (lightness (@txtcolor) 
การนำเข้าน้อยลง
 
มาสร้างกันใหม่กันเถอะ .น้อยกว่า ชื่อไฟล์ styles.less และนำเข้า config.less เป็นมัน:
 
@import "config.less";
 
เพิ่มตระกูลฟอนต์
 
เพื่อให้แถบการนำทางดูน่าสนใจยิ่งขึ้นเราจะรวมตระกูลแบบอักษรใหม่โดยใช้ @ font-face กฎ. อย่างแปลกใจ, @ font-face รองรับกฎจริงแล้วตั้งแต่ IE6!
 
คราวนี้เราจะใช้แบบอักษร Asap ดาวน์โหลดได้จากคอลเลกชันแบบอักษรของ Font Squirrel จากนั้นแทรกสไตล์ต่อไปนี้เพื่อสร้างล่าสุดของเรา styles.less ไฟล์.
 
@ font-face font-family: 'AsapRegular'; src:: url ( 'แบบอักษร / เร็ว-ปกติ webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') รูปแบบ ('embedded-opentype'), url ('แบบอักษร / Asap-Regular-webfont.woff') รูปแบบ ('woff'), url ('fonts / Asap-Regular-webfont.ttf') รูปแบบ ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') รูปแบบ ('svg'); น้ำหนักตัวอักษร: ปกติ; แบบอักษร: ปกติ;  
 
จัดแต่งทรงผมร่างกายด้วยฟังก์ชั่นสี
 
ตอนนี้เราจะให้สีพื้นหลังกับ ร่างกาย (ควรเบากว่าฐานสี) รวมถึงการระบุตระกูลแบบอักษรและขนาดแบบอักษร เราสามารถเข้าใกล้เอฟเฟกต์โดยใช้ฟังก์ชั่นสี:
 
รหัสต่อไปนี้จะทำให้พื้นหลังจางลง 30%.
 
body background: lighten (@theme, 30%); font-family: AsapRegular, sans-serif; ขนาดตัวอักษร: 11pt; 
 
 
 
จัดแต่งทรงผมนำทางด้วยกฎที่ซ้อนกัน
 
ในน้อยเราสามารถทำรังสไตล์โดยตรงภายใต้หลักของมัน ลองดูรหัสด้านล่าง.
 
 nav แท็กที่มีองค์ประกอบที่จำเป็นทั้งหมดสำหรับการนำทางจะได้รับสไตล์ดังต่อไปนี้.
 
nav margin: 50px auto 0; ความกว้าง: 788px; ความสูง: 45px; .ชายแดน; .เงา; 
 
โปรดสังเกตว่าแทนที่จะใส่กฎ CSS อีกครั้งฉันใส่ไว้เท่านั้น .ชายแดน เพื่อให้รูปแบบเส้นขอบและ .เงา เพื่อเพิ่มเงา ในกรณีจริงชุดเรียนเหล่านี้สามารถนำกลับมาใช้ในองค์ประกอบอื่นได้เช่นกันทุกที่ที่ต้องการ.
 
 
 
ต่อไปเราให้รูปแบบสำหรับ ยู ข้างใน nav มีศูนย์และระยะเว้นศูนย์ เมื่อไม่นานมานี้เราจะเข้าใกล้สไตล์โดยการเขียนสิ่งนี้:
 
nav … nav ul …
 
ไม่มีอะไรผิดปกติกับวิธีการนี้ในความเป็นจริงฉันเคยทำมันทุกครั้งและฉันค่อนข้างสบายใจกับมัน อย่างไรก็ตามวิธีการนี้นักออกแบบ CSS หลายคนได้กล่าวว่าเป็น verbosed และในบางกรณีไม่สามารถจัดการได้ง่าย.
 
ตอนนี้เราสามารถทำสิ่งนี้:
 
nav margin: 50px auto 0; ความกว้าง: 788px; ความสูง: 45px; .ชายแดน; .เงา; ul padding: 0; กำไรขั้นต้น: 0; 
 
 
 
จากนั้นเมนูจะแสดงเป็นแถวโดยใช้ จอแสดงผล: อินไลน์ คุณสมบัติ.
 
nav margin: 50px auto 0; ความกว้าง: 788px; ความสูง: 45px; .ชายแดน; .เงา; ul padding: 0; กำไรขั้นต้น: 0; li display: inline; 
 
 
 
ในไวยากรณ์ด้านล่างเราระบุสไตล์แท็กจุดยึดของเมนูและเพิ่มสไตล์ที่กำหนดไว้ล่วงหน้าของเรานั่นคือ: .Textcolor, .divider, .ลาด.
 
nav margin: 50px auto 0; ความกว้าง: 788px; ความสูง: 45px; .ชายแดน; .เงา; ul padding: 0; กำไรขั้นต้น: 0; li display: inline; a ตกแต่งข้อความ: ไม่มี; จอแสดงผล: บล็อกแบบอินไลน์; ลอย: ซ้าย; ความกว้าง: 156px; ความสูง: 45px; จัดข้อความ: ศูนย์; ความสูงของเส้น: 300%; .textcolor (# f2f2f2); // คุณสามารถเปลี่ยนบรรทัดนี้ .divider; .gradient; 
 
ในรหัสข้างต้นเราใช้สีฐานสิบหก # f2f2f2 ซึ่งความสว่างนั้นถูกพิจารณามากกว่า 50% ดังนั้นเราคาดว่าจะเห็นเงาให้มืด (โดยอัตโนมัติ) ส่วนที่เหลือของรหัสฉันค่อนข้างแน่ใจว่าอธิบายด้วยตนเอง.
 
 
 
อย่างไรก็ตามหากเราดูผลลัพธ์ปัจจุบันข้างต้นแต่ละเมนูจะมีตัวแบ่งดังนั้นจะส่งผลให้ส่วนสุดท้ายล้นไปด้านล่าง ดังนั้นเราจำเป็นต้องละเว้นลักษณะเส้นขอบสำหรับลูกคนแรกและลูกสุดท้ายของแถบนำทาง.
 
nav margin: 50px auto 0; ความกว้าง: 788px; ความสูง: 45px; .ชายแดน; .เงา; ul padding: 0; กำไรขั้นต้น: 0; li display: inline; a ตกแต่งข้อความ: ไม่มี; จอแสดงผล: บล็อกแบบอินไลน์; ลอย: ซ้าย; ความกว้าง: 156px; ความสูง: 45px; จัดข้อความ: ศูนย์; ความสูงของเส้น: 300%; .textcolor (# f2f2f2); // คุณสามารถเปลี่ยนบรรทัดนี้ .divider; .gradient;  li: ลูกคนแรกและ ชายแดนซ้าย: ไม่มี;  li: ลูกคนสุดท้าย ชายแดนขวา: ไม่มี; 
 
 
 
รัฐโฮเวอร์
 
สำหรับขั้นตอนสุดท้ายเราจะเพิ่มเอฟเฟกต์โฮเวอร์ ในน้อยเราสามารถเพิ่ม องค์ประกอบหลอก เช่น : เลื่อน การใช้ & สัญลักษณ์.
 
nav margin: 50px auto 0; ความกว้าง: 788px; ความสูง: 45px; .ชายแดน; .เงา; ul padding: 0; กำไรขั้นต้น: 0; li display: inline; a ตกแต่งข้อความ: ไม่มี; จอแสดงผล: บล็อกแบบอินไลน์; ลอย: ซ้าย; ความกว้าง: 156px; ความสูง: 45px; จัดข้อความ: ศูนย์; ความสูงของเส้น: 300%; .textcolor (# f2f2f2); // คุณสามารถเปลี่ยนบรรทัดนี้ .divider; .gradient; &: โฮเวอร์ .hovereffect;  li: ลูกคนแรก ชายแดนซ้าย: ไม่มี;  li: ลูกคนสุดท้าย ชายแดนขวา: ไม่มี; 
 
 
 
เปลี่ยนชุดรูปแบบสี
 
นี่คือส่วนที่ยอดเยี่ยมของ LESS หากเราต้องการเปลี่ยนชุดรูปแบบสีโดยรวมเราสามารถทำได้โดยการเปลี่ยนบรรทัดน้อยกว่าที่เราต้องการใน CSS บริสุทธิ์.
 
ในกรณีนี้ฉันจะเปลี่ยนสีการนำทางให้เบาขึ้นเล็กน้อย เพียงแค่เปลี่ยนสองบรรทัดต่อไปนี้.
 
@theme: #ccc; // เปลี่ยนสิ่งนี้
 
.Textcolor (# 555); //และนี่
 
และนี่คือผลลัพธ์.
 
 
 
รวบรวมน้อยลงใน CSS
 
เมื่อเรายังคงใช้ LESS JavaScript มันจะถูกจับ .น้อยกว่า ไฟล์และแปลเป็น CSS แบบคงที่เพื่อให้เบราว์เซอร์มาตรฐานสามารถตีความได้ นี่เป็นงานสองครั้งในฝั่งไคลเอ็นต์ไม่ต้องพูดถึงซ้ำซ้อนและเสียแบนด์วิดท์ ประเด็นหลักของ LESS อยู่ในขั้นตอนการทำงานเพื่อทำให้การปฏิบัติของเราง่ายขึ้นในการรวบรวม CSS แบบสแตติกให้มีความคล่องตัวและตั้งโปรแกรม.
 
ดังนั้นเมื่อเรากำลังจะทำให้แถบนำทางอยู่บนเว็บไซต์มันเป็นสิ่งสำคัญที่จะรวบรวมไฟล์น้อยลงใน CSS คงที่.
 
คลิก กระทืบมัน! ปุ่มใหญ่.
 
 
 
บันทึก .less ในไฟล์แบบฝึกหัดของเราเชื่อมโยงไปยังเอกสาร HTML และยกเลิกการเชื่อมโยง .น้อยกว่า & less.js ไฟล์จากเอกสาร.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; ความกว้างชายแดน: 0 1px 0 1px; เส้นขอบสี: โปร่งใส # 444444 โปร่งใส # 888888;  .gradient background: linear-gradient (บนสุด, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect background: linear-gradient (บนสุด, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') รูปแบบ ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.woff') รูปแบบ ('woff'), url ('fonts / Asap-Regular-webfont.ttf') รูปแบบ ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') รูปแบบ ('svg'); น้ำหนักตัวอักษร: ปกติ; แบบอักษร: ปกติ;  เนื้อหา พื้นหลัง: # a2a2a2; font-family: AsapRegular, sans-serif; ขนาดตัวอักษร: 11pt;  nav margin: 50px auto 0; ความกว้าง: 788px; ความสูง: 45px; รัศมี - ชายแดน: 3px; เส้นขอบ: 1px solid # 505050; กล่องเงา: 0 1px 2px 0 # 555555;  nav ul padding: 0; กำไรขั้นต้น: 0;  nav ul li display: inline;  nav ul li a ตกแต่งข้อความ: ไม่มี; จอแสดงผล: บล็อกแบบอินไลน์; ลอย: ซ้าย; ความกว้าง: 156px; ความสูง: 45px; จัดข้อความ: ศูนย์; ความสูงของเส้น: 300%; สี: # f2f2f2; ข้อความเงา: 1px 1px 0px # 000000; สไตล์เส้นขอบ: ทึบ; ความกว้างชายแดน: 0 1px 0 1px; เส้นขอบสี: โปร่งใส # 444444 โปร่งใส # 888888; พื้นหลัง: การไล่ระดับสีเชิงเส้น (บนสุด, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  นำทางไปยัง a: hover background: linear-gradient (ด้านบน, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: ลูกคนแรก ชายแดนซ้าย: ไม่มี;  nav ul li: ลูกคนสุดท้าย ชายแดนขวา: ไม่มี;  
 
ลองดูผลลัพธ์อีกครั้ง.
 
 
 
และเราเสร็จแล้วโปรดทดลองกับมัน.
 
ข้อสรุป
 
เราได้เรียนรู้หลายสิ่งหลายอย่างเกี่ยวกับภาษา LESS วันนี้เช่น:
 

• ตัวแปร.
• mixins
• Parametric Mixins
• การดำเนินงาน
• มิกซ์อินเตรียมพร้อม
• และกฎที่ซ้อนกัน

แม้ว่าจะมีหลายสิ่งที่สามารถอธิบายเพิ่มเติมและความเป็นไปได้มากมายที่จะแสดงและอธิบายเราหวังว่าคุณจะสนุกกับการสอนพื้นฐานนี้.

• การสาธิต
• แหล่งดาวน์โหลด