LESS CSS Hướng dẫn Thiết kế Thanh điều hướng Menu Slick

Bài viết này là một phần của chúng tôi "Loạt bài hướng dẫn HTML5 / CSS3" - dành riêng để giúp bạn trở thành một nhà thiết kế và / hoặc nhà phát triển tốt hơn. Bấm vào đây để xem thêm các bài viết từ cùng một bộ.

Thiết kế và phát triển web thế giới đang thực sự phát triển nhanh chóng. Chúng ta có thể thấy điều này trong số lượng lớn các công cụ mới được ra mắt trong cộng đồng (gần như) hàng ngày, có thể là Ứng dụng hoặc Khung mới giúp công việc hàng ngày của chúng tôi là nhà thiết kế web hoặc nhà phát triển hiệu quả và hiệu quả hơn.

Một điều thu hút sự chú ý của tôi từ sự phát triển thiết kế web ngày nay là LESS, một ngôn ngữ biểu định kiểu có thể lập trình mở rộng cách chúng ta viết cú pháp CSS bằng cách kết hợp một số khái niệm lập trình như Biến, Mixins, Hàm và Hoạt động.

Nó mở ra các khả năng mới trong việc viết cú pháp CSS. Chẳng hạn, bằng cách áp dụng Mixins trong CSS giống như cách chúng ta làm trong một chương trình, giờ đây chúng ta có thể lưu trữ các kiểu và giá trị mặc định có thể được áp dụng trong toàn bộ tệp bất cứ khi nào có thể. Với điều này, chúng ta sẽ không cần phải viết đi viết lại nhiều lần.

Chà, hãy làm một số bài tập với LESS để hiểu rõ hơn về những gì nó cung cấp.

Thiết kế với BÀI HỌC

Trong hướng dẫn này, chúng tôi sẽ cố gắng thiết kế một thanh điều hướng menu trơn bóng được lấy cảm hứng từ một trong Apple.com. Vì nó chỉ được 'lấy cảm hứng' từ sản phẩm gốc, hãy lưu ý rằng sản phẩm hướng dẫn cuối cùng của chúng tôi sẽ không chính xác như bản gốc.

Để bắt đầu, trước tiên bạn có thể muốn đọc các tài nguyên hữu ích sau đây. Họ giải thích một số triển khai cơ bản của ngôn ngữ LESS, sẽ hữu ích cho bạn trước khi bạn tìm hiểu sâu hơn về hướng dẫn này.

• LESS Is More: Làm cho mã hóa CSS của bạn dễ dàng hơn với LESS
• Viết CSS tốt hơn với ít hơn
• Giới thiệu về BÀI HỌC, và so sánh với Sass

Chuẩn bị

Trước hết, có một số thứ thiết yếu chúng ta cần cho dự án nhỏ này, đó là:

1. Trình soạn thảo văn bản LESS

Chúng tôi sẽ cần một trình soạn thảo văn bản để mã trình đơn điều hướng. Tuy nhiên, hầu hết các trình soạn thảo văn bản có sẵn trên thị trường hiện nay (như Dreamweaver, Notepad ++, InType, Sublime Text 2) vẫn chưa hỗ trợ .ít hơn phần mở rộng tệp theo mặc định, vì vậy cú pháp có thể không được làm nổi bật tốt.

Vì vậy, với mục đích của hướng dẫn này, chúng tôi sẽ sử dụng trình soạn thảo văn bản đặc biệt cho LESS có tên ChrunchApp. Chúng tôi có thể mở và chỉnh sửa .ít hơn các tệp mở rộng và biên dịch nó thành CSS tĩnh bằng ứng dụng này. Vì là ứng dụng Adobe Air, nên nó có thể được cài đặt trong mọi HĐH máy tính để bàn chính (Win, OSX và Linux).

Đối với trình chỉnh sửa HTML, bạn có thể sử dụng bất kỳ trình chỉnh sửa nào mà bạn đã sử dụng ngay bây giờ. Cá nhân tôi thích văn bản cao siêu 2.

2. Ít.js

Tiếp theo, tải xuống Thư viện JavaScript LESS từ trang web chính thức của họ, phiên bản hiện tại là 1.2.1. Đặt nó trong thư mục thực hành của bạn cho việc này.

Sau đó liên kết tệp với tài liệu HTML.

3. Không có tiền tố

Chúng tôi cũng sẽ sử dụng một vài tính năng CSS3 để thực hiện một số hiệu ứng trong menu điều hướng sẽ bao gồm các tiền tố của nhà cung cấp (-moz-, -o-, -webkit-) để nó hiển thị chính xác trên các trình duyệt khác nhau. Tuy nhiên, cá nhân tôi không thích sử dụng tiền tố vì nó sẽ làm phình tệp CSS.

Vì lý do này, tôi đã quyết định sử dụng không có tiền tố, một thư viện JavaScript được tạo bởi Lea Verou sẽ tự động xử lý các tiền tố của nhà cung cấp trong nền. Vì vậy, chúng tôi sẽ chỉ cần viết cú pháp chính thức từ W3C.

Tải xuống tệp và liên kết nó với tệp HTML.

Được rồi, tất cả chúng ta đều được thiết lập; bây giờ hãy bắt đầu cấu trúc đánh dấu HTML.

Đánh dấu HTML

Việc điều hướng khá đơn giản. Nó sẽ có năm menu được bọc bên trong một thẻ danh sách không có thứ tự. Mở trình soạn thảo HTML yêu thích của bạn và đặt đánh dấu sau:

LESS Styles

Trong phần này, chúng tôi sẽ bắt đầu tạo kiểu điều hướng với ngôn ngữ LESS. Đối với những người mới sử dụng ngôn ngữ giống như lập trình, viết cú pháp CSS bằng LESS sẽ cảm thấy hơi kỳ lạ và khó xử. Nhưng đừng lo lắng, một khi bạn có một số thực hành, nó chắc chắn sẽ thú vị hơn so với cách chúng ta viết CSS thuần túy (đó là kinh nghiệm của tôi, nó cũng gây nghiện một chút).

Hãy xem xét phong cách điều hướng từ nguồn cảm hứng của chúng tôi.

Như chúng ta có thể thấy trong ảnh chụp màn hình ở trên, điều hướng Apple.com có ​​6 kiểu phổ biến chính sau:

• bóng
• biên giới
• dải phân cách
• độ dốc
• hiệu ứng di chuột
• bản văn

Chúng tôi sẽ lưu trữ những phong cách này và lưu chúng bên trong cấu hình như kiểu mặc định Cấu hình; một số nhà thiết kế cũng có thể đặt tên cho nó lib.css đó là viết tắt của Thư viện. Liên kết tệp này với tài liệu của chúng tôi.

Hãy chắc chắn rằng bạn đặt nó trước thư viện LESS JavaScript.

Xác định cơ sở màu với các biến

Trong bước này, chúng tôi sẽ xác định cơ sở màu điều hướng bằng cách sử dụng Biến. Biến trong LESS được khai báo bằng @ ký hiệu.

@theme: # 555;

Điều này @theme biến là màu tiêu chuẩn của chúng tôi; chúng tôi sẽ sử dụng nó theo mọi cách có thể để điều chỉnh phối màu hoàn hảo và do đó bố cục màu sẽ được dự kiến ​​sẽ trở nên nhất quán hơn.

Xác định kiểu bóng mặc định với Mixins

Một trong những tính năng tôi yêu thích từ LESS là Mixins. Đây là một khái niệm lập trình lưu trữ một số kiểu được xác định trước mà trong LESS có thể được kế thừa trong các lớp hoặc id sau này trong biểu định kiểu.

.bóng hộp-bóng: 0 1px 2px 0 @theme; 

Trong đoạn mã trên tôi không bao gồm phiên bản tiền tố của bóng hộp thuộc tính, vì thư viện không có tiền tố sẽ tự động xử lý chúng. Ngoài ra, màu bóng được kế thừa từ màu biến chủ đề.

Xác định kiểu viền với Mixins tham số

Thanh điều hướng sẽ cần một màu viền khác biệt với một góc hơi tròn. Chúng ta có thể biên dịch kiểu đường viền bằng cách sử dụng Parametric Mixins. Nó thực sự có chức năng tương tự như Mixins, chỉ khác là nó cũng có các tham số có thể thay đổi để các giá trị được điều chỉnh nhiều hơn.

.viền (@radius: 3px) Border-radius: @radius; viền: 1px solid @theme - # 050505; 

Trong đoạn mã trên, chúng tôi thiết lập đường viền mặc định @radius cho 3px và như chúng tôi đã đề cập trước đó, giá trị này có thể được thay đổi sau đó.

Xác định Gradient, Dải phân cách và Kiểu di chuột với Thao tác

Hoạt động đơn giản là một ngôn ngữ lập trình trong đó chúng ta có thể áp dụng công thức toán học như Phép cộng, phép chia, phép trừ và phép nhân để có được kết quả mong muốn. Hãy xem đoạn mã sau:

.dải phân cách đường viền: rắn; đường viền rộng: 0 1px 0 1px; viền màu: trong suốt @theme - # 111 trong suốt @theme + # 333; 

Trong đoạn mã trên, chúng tôi trừ @theme biến bởi # 111, bằng cách này, đầu ra màu viền trái sẽ tối hơn một chút. Trong khi màu đường viền bên phải có nguồn gốc từ việc thêm @theme biến với màu hex # 333, đầu ra sẽ nhẹ hơn.

Cấp độ phối màu

Chà, đối với một số bạn có thể bị nhầm lẫn với các công thức, hãy kiểm tra sơ đồ màu dưới đây để hiểu rõ hơn:

Tông màu tối đa là # 000 (màu đen), trong khi tông màu tối đa là #fff (màu trắng) và cơ sở màu hiện tại của chúng tôi là # 555. Vì vậy, nếu chúng ta muốn cơ sở màu sắc được 3 mức độ tối hơn so với hiện tại, chúng ta có thể chỉ cần trừ nó bằng cách # 333. Cách tương tự cũng có thể được áp dụng để làm sáng màu.

Tiếp theo, chúng tôi sẽ vận hành màu gradient.

.gradient nền: tuyến tính-gradient (trên cùng, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect nền: gradient tuyến tính (trên cùng, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Xác định kiểu văn bản với Guard Mixins

Chúng tôi dự định có 2 màu trên thanh điều hướng, màu tối và một màu sáng. Chúng tôi áp dụng hai tuyên bố có điều kiện cho văn bản bằng Guard Mixins.

Đầu tiên, khi văn bản được cung cấp một màu có độ sáng bằng hoặc lớn hơn 50%, bóng văn bản Nên chuyển sang màu tối, trong trường hợp này là màu # 000000.

.textcolor (@txtcolor) khi (độ sáng (@txtcolor)> = 50%) color: @txtcolor; bóng văn bản: 1px 1px 0px # 000000; 

Sau đó, khi văn bản được cung cấp một màu mà độ sáng nhỏ hơn 50% bóng văn bản sẽ chuyển sang màu trắng.

.textcolor (@txtcolor) khi (độ sáng (@txtcolor) 
Nhập BÀI
 
Bây giờ hãy tạo một cái khác .ít hơn tập tin có tên phong cách và nhập khẩu cấu hình vào nó:
 
@import "config.less";
 
Thêm họ phông chữ
 
Để thanh điều hướng trông hấp dẫn hơn, chúng tôi sẽ bao gồm một họ phông chữ mới bằng cách sử dụng @mặt chữ quy tắc. Thật ngạc nhiên, @mặt chữ quy tắc thực sự đã được hỗ trợ kể từ IE6!
 
Lần này chúng tôi sẽ sử dụng phông chữ Asap. Tải xuống từ bộ sưu tập khuôn mặt phông chữ của Font Squirrel. Sau đó chèn các kiểu sau vào tệp được tạo gần đây của chúng tôi phong cách tập tin.
 
@ font-face font-family: 'AsapRegular'; src: url ('phông chữ / Asap-Thường-webfont.eot'); src: url ('phông chữ / Asap-Thường-webfont.eot? #iefix') định dạng ('embed-opentype'), url ('phông chữ / Asap-Thường-webfont.woff') (url Định dạng ('phông chữ / Asap-Thường-webfont.ttf') ('truetype'), url ('phông chữ / Asap-Thường-webfont.svg # AsapRegular') định dạng ('svg'); font-weight: bình thường; kiểu chữ: bình thường;  
 
Tạo kiểu cho cơ thể với các chức năng Màu
 
Bây giờ, chúng tôi sẽ cung cấp một màu nền cho thân hình (nên nhẹ hơn cơ sở màu sắc) cũng như chỉ định họ phông chữ và kích thước phông chữ. Chúng ta có thể tiếp cận hiệu ứng bằng các hàm Color:
 
Đoạn mã sau sẽ làm sáng nền ở mức 30%.
 
cơ thể nền: làm sáng (@theme, 30%); họ phông chữ: AsapRegular, sans-serif; cỡ chữ: 11pt; 
 
 
 
Tạo kiểu điều hướng với Quy tắc lồng nhau
 
Trong LESS, chúng ta có thể lồng các kiểu trực tiếp dưới cha mẹ của nó. Hãy xem đoạn mã dưới đây.
 
Các hải quân thẻ chứa tất cả các yếu tố cần thiết cho điều hướng sẽ được cung cấp các kiểu sau.
 
điều hướng lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; .biên giới; .bóng; 
 
Lưu ý rằng, thay vì đưa ra một loạt các quy tắc CSS một lần nữa, tôi chỉ chèn .biên giới để cho phong cách biên giới và .bóng để thêm bóng. Trong trường hợp thực tế, các lớp này cũng có thể được sử dụng lại trong một phần tử khác, bất cứ nơi nào cần thiết.
 
 
 
Tiếp theo, chúng tôi đưa ra các kiểu cho ul bên trong hải quân để có phần đệm và lề bằng không. Không lâu trước đây, chúng ta sẽ tiếp cận phong cách bằng cách viết một cái gì đó như thế này:
 
nav Khác nav ul niềm
 
Không có gì sai với cách tiếp cận này, trên thực tế, tôi đã từng làm điều đó mỗi lần và khá thoải mái với nó. Tuy nhiên, phương pháp này, nhiều nhà thiết kế CSS đã nói, được xác minh bằng lời nói và trong một số trường hợp, không dễ quản lý.
 
Bây giờ, chúng ta có thể làm một cái gì đó như thế này:
 
điều hướng lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; .biên giới; .bóng; ul đệm: 0; lề: 0; 
 
 
 
Và sau đó menu sẽ được hiển thị liên tiếp bằng cách sử dụng Hiển thị nội dòng bất động sản.
 
điều hướng lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; .biên giới; .bóng; ul đệm: 0; lề: 0; li hiển thị: nội tuyến; 
 
 
 
Trong cú pháp dưới đây, chúng tôi chỉ định kiểu thẻ neo của menu và thêm các kiểu được xác định trước, đó là: .văn bản màu, .dải phân cách, .dốc.
 
điều hướng lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; .biên giới; .bóng; ul đệm: 0; lề: 0; li hiển thị: nội tuyến; một văn bản trang trí: không có; hiển thị: khối nội tuyến; phao: trái; chiều rộng: 156px; chiều cao: 45px; văn bản-align: trung tâm; chiều cao dòng: 300%; .textcolor (# f2f2f2); // Bạn có thể thay đổi dòng này. .dốc; 
 
Trong đoạn mã trên, chúng tôi áp dụng màu hex # f2f2f2 trong đó độ sáng được xem là trên 50%, vì vậy chúng ta sẽ thấy bóng tối trở nên tối (tự động). Phần còn lại của mã tôi chắc chắn là khá tự giải thích.
 
 
 
Tuy nhiên, nếu chúng ta nhìn vào kết quả hiện tại ở trên, mỗi menu đều có các bộ chia do đó dẫn đến phần cuối cùng tràn xuống phía dưới. Vì vậy, chúng ta cần bỏ qua kiểu viền cho con đầu tiên và cuối cùng của thanh điều hướng.
 
điều hướng lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; .biên giới; .bóng; ul đệm: 0; lề: 0; li hiển thị: nội tuyến; một văn bản trang trí: không có; hiển thị: khối nội tuyến; phao: trái; chiều rộng: 156px; chiều cao: 45px; văn bản-align: trung tâm; chiều cao dòng: 300%; .textcolor (# f2f2f2); // Bạn có thể thay đổi dòng này. .dốc;  li: con đầu tiên a Border-left: none;  li: con cuối cùng a Border-right: none; 
 
 
 
Trạng thái di chuột
 
Đối với bước cuối cùng, chúng tôi sẽ thêm hiệu ứng di chuột. Trong LESS chúng ta có thể thêm yếu tố giả nhu la :bay lượn sử dụng & ký hiệu.
 
điều hướng lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; .biên giới; .bóng; ul đệm: 0; lề: 0; li hiển thị: nội tuyến; một văn bản trang trí: không có; hiển thị: khối nội tuyến; phao: trái; chiều rộng: 156px; chiều cao: 45px; văn bản-align: trung tâm; chiều cao dòng: 300%; .textcolor (# f2f2f2); // Bạn có thể thay đổi dòng này. .dốc; &: di chuột .hovereffect;  li: con đầu lòng a Border-left: none;  li: con cuối cùng a Border-right: none; 
 
 
 
Thay đổi chủ đề màu sắc
 
Đây là phần thú vị của LESS. Nếu chúng ta muốn thay đổi chủ đề màu tổng thể, chúng ta có thể thực hiện nó với ít thay đổi dòng hơn so với những gì chúng ta cần trong CSS thuần.
 
Trong trường hợp này, tôi sẽ thay đổi màu điều hướng để nhẹ hơn một chút. Chỉ cần thay đổi hai dòng sau.
 
@theme: #ccc; //Thay đổi cai nay đi
 
.màu văn bản (# 555); //Và điều này
 
và đây là kết quả.
 
 
 
Biên dịch LESS thành CSS
 
Khi chúng tôi vẫn đang sử dụng JavaScript LESS, nó sẽ lấy .ít hơn tập tin và dịch nó thành CSS tĩnh để trình duyệt chuẩn có thể diễn giải nó. Đây là một công việc kép ở phía khách hàng, chưa kể dư thừa và lãng phí băng thông. Điểm chính của LESS là trong quy trình làm việc để đơn giản hóa việc thực hành của chúng tôi trong việc biên dịch CSS tĩnh để năng động hơn và có thể lập trình.
 
Vì vậy, khi chúng ta chuẩn bị đặt thanh điều hướng trực tiếp trên một trang web, điều quan trọng là phải biên dịch tệp LESS thành CSS tĩnh.
 
Nhấn vào Crunch nó! nút lớn.
 
 
 
Lưu .less trong tệp bài tập của chúng tôi, liên kết nó với tài liệu HTML và hủy liên kết .ít hơn & less.js tập tin từ tài liệu.
 
 .bóng hộp-bóng: 0 1px 2px 0 # 555555;  .divider Border-style: solid; đường viền rộng: 0 1px 0 1px; viền màu: trong suốt # 444444 trong suốt # 888888;  .gradient nền: gradient tuyến tính (trên cùng, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect nền: gradient tuyến tính (trên cùng, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('phông chữ / Asap-Thường-webfont.eot'); src: url ('phông chữ / Asap-Thường-webfont.eot? #iefix') định dạng ('embed-opentype'), url ('phông chữ / Asap-Thường-webfont.woff') (url ('phông chữ / Asap-Thường-webfont.ttf') định dạng ('truetype'), url ('phông chữ / Asap-Thường-webfont.svg # AsapRegular') ('svg'); font-weight: bình thường; kiểu chữ: bình thường;  cơ thể nền: # a2a2a2; họ phông chữ: AsapRegular, sans-serif; cỡ chữ: 11pt;  nav lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; bán kính đường viền: 3px; viền: 1px solid # 505050; hộp bóng: 0 1px 2px 0 # 555555;  nav ul đệm: 0; lề: 0;  nav ul li display: nội tuyến;  nav ul li a text-trang trí: none; hiển thị: khối nội tuyến; phao: trái; chiều rộng: 156px; chiều cao: 45px; văn bản-align: trung tâm; chiều cao dòng: 300%; màu: # f2f2f2; bóng văn bản: 1px 1px 0px # 000000; kiểu viền: chắc chắn; đường viền rộng: 0 1px 0 1px; viền màu: trong suốt # 444444 trong suốt # 888888; nền: gradient tuyến tính (trên cùng, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover nền: tuyến tính gradient (trên cùng, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: con đầu lòng a Border-left: none;  nav ul li: last-child a Border-right: none;  
 
Hãy xem kết quả một lần nữa.
 
 
 
Và chúng tôi đã hoàn thành, xin vui lòng thử nghiệm với nó.
 
Phần kết luận
 
Chúng tôi đã học được nhiều điều về ngôn ngữ LESS ngày nay, chẳng hạn như:
 

• Biến.
• Hỗn hợp
• Mixins tham số
• Hoạt động
• Mixins được bảo vệ
• Và quy tắc lồng nhau

Mặc dù có nhiều điều có thể được đề cập sâu hơn và nhiều khả năng sẽ được trình bày và giải thích, chúng tôi hy vọng bạn thích hướng dẫn cơ bản này.

• Bản giới thiệu
• Tải về nguồn