โฮมเพจ » การเข้ารหัส » บทเรียนน้อย CSS การออกแบบแถบนำทางเมนูเนียน

    บทเรียนน้อย 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
    • การดำเนินงาน
    • มิกซ์อินเตรียมพร้อม
    • และกฎที่ซ้อนกัน

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

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