LESS CSS - Hướng dẫn cho người mới bắt đầu
Bộ xử lý trước CSS hiện đã trở thành một yếu tố chính trong phát triển web. Nó vận chuyển CSS đơn giản với các đặc điểm lập trình như Biến, Hàm hoặc Mixin và Hoạt động cho phép các nhà phát triển web xây dựng các kiểu CSS mô đun, có thể mở rộng và dễ quản lý hơn.
Trong bài đăng này, chúng ta sẽ xem xét LESS, một trong những bộ xử lý CSS phổ biến nhất xung quanh và cũng đã được triển khai rộng rãi trong nhiều khung công tác mặt trước như Bootstrap. Chúng tôi cũng sẽ đi qua các tiện ích, công cụ và thiết lập cơ bản để giúp bạn khởi động và chạy với LESS.
Trình biên dịch
Để bắt đầu, chúng ta sẽ cần thiết lập một trình biên dịch. Cú pháp LESS là không chuẩn, theo thông số kỹ thuật của W3C. Trình duyệt sẽ không thể xử lý và kết xuất đầu ra, mặc dù thừa hưởng các đặc điểm tương tự như CSS.
Đây là một cái nhìn thoáng qua về mã LESS:
@ màu-cơ sở: # 2d5e8b; .group1 màu nền: @ color-base; . class2 màu nền: #fff; màu: @ màu-cơ sở;
Trình biên dịch sẽ xử lý mã và biến cú pháp LESS thành định dạng CSS tuân thủ trình duyệt:
.class1 màu nền: # 2d5e8b; . class1. class2 màu nền: #fff; màu: # 2d5e8b;
Có một số công cụ để biên dịch CSS:
Sử dụng JavaScript
LESS đi kèm với một less.js tập tin thực sự dễ dàng để triển khai trong trang web của bạn. Tạo biểu định kiểu với .ít hơn mở rộng và liên kết nó trong tài liệu của bạn bằng cách sử dụng rel = "bản định kiểu / ít hơn" thuộc tính.
Bạn có thể lấy tệp JS tại đây, tải xuống thông qua trình quản lý gói Bower, liên kết trực tiếp với CDN, như vậy:
Bạn đã thiết lập xong và có thể soạn các kiểu trong .ít hơn. Cú pháp LESS sẽ được biên dịch khi đang tải trang. Hãy ghi nhớ rằng sử dụng JavaScript không được khuyến khích ở giai đoạn sản xuất vì nó sẽ ảnh hưởng xấu đến hiệu suất trang web.
Bạn phải luôn luôn biên dịch cú pháp LESS trước và chỉ phục vụ CSS thường xuyên thay thế. Bạn có thể dùng Thiết bị đầu cuối, một người chạy nhiệm vụ như Tiếng càu nhàu hoặc là Nuốt, hoặc một ứng dụng đồ họa để làm như vậy.
Sử dụng CLI
LESS cung cấp giao diện dòng lệnh gốc (CLI), ít hơn, xử lý một số tác vụ ngoài việc biên dịch cú pháp LESS. Sử dụng CLI, chúng ta có thể tạo mã, nén các tệp và tạo bản đồ nguồn. Lệnh này dựa trên Node.js cho phép lệnh hoạt động hiệu quả trên Windows, OS X và Linux.
Đảm bảo rằng Node.js đã được cài đặt (nếu không hãy cài đặt trình cài đặt ở đây), sau đó cài đặt LESS CLI thông qua NPM (Trình quản lý gói Node) bằng dòng lệnh sau.
npm cài đặt -g ít hơn
Bây giờ bạn có ít hơn lệnh theo ý của bạn để biên dịch LESS thành CSS:
lessc style.less style.css
Sử dụng tác vụ chạy
Trình chạy tác vụ là một công cụ tự động hóa các nhiệm vụ và quy trình phát triển. Thay vì chạy ít hơn ra lệnh mỗi khi chúng ta muốn biên dịch mã, chúng ta có thể thiết lập cài đặt một trình chạy tác vụ và đặt nó để xem các thay đổi trong các tệp LESS của chúng ta và ngay lập tức biên dịch LESS thành CSS.
Hai công cụ phổ biến trong danh mục này ngày nay là Grunt và Gulp. Chúng tôi có một loạt bài đăng bao gồm các công cụ này. Kiểm tra các bài đăng để tìm hiểu cách triển khai các công cụ này trong quy trình làm việc của bạn.
- Cách sử dụng Grunt để tự động hóa quy trình làm việc của bạn
- Bắt đầu với Gulp.js
- Trận chiến xây dựng kịch bản: Gulp Vs Grunt
Sử dụng ứng dụng đồ họa
Đối với những người có thể không quen sử dụng Terminal và dòng lệnh, họ có thể chọn giao diện đồ họa thay thế. Có rất nhiều ứng dụng để biên dịch LESS ngày nay cho tất cả các nền tảng - một số miễn phí, một số trả phí
Dưới đây là danh sách đầy đủ:
| Ứng dụng | Nền tảng | Giá cả |
| Hỗn hợp | Hệ điều hành X / Windows | Miễn phí |
| Koala | Hệ điều hành X / Windows / Linux | Miễn phí |
| Chuẩn bị | Hệ điều hành X / Windows | Freemium (USD29) |
| Thắng | các cửa sổ | Miễn phí |
| CodeKit | Hệ điều hành X | USD32 |
Nói thật, trình biên dịch nào bạn chọn (ngoài JavaScript) không thực sự quan trọng, miễn là công cụ này hoạt động và bổ sung cho quy trình làm việc của bạn, hãy thực hiện nó.
Trình chỉnh sửa mã
Bạn có thể sử dụng bất kỳ trình soạn thảo mã. Chỉ cần cài đặt một plugin hoặc tiện ích mở rộng để làm nổi bật cú pháp LESS với màu sắc phù hợp, một tính năng hiện có sẵn cho hầu hết tất cả các trình soạn thảo mã và IDE bao gồm SublimeText, Notepad ++, VisualStudio, TextMate và Eclipse để đặt tên cho một số.
Bây giờ chúng ta đã có trình biên dịch và trình soạn thảo mã, chúng ta có thể bắt đầu viết các kiểu CSS với cú pháp LESS.
BÀI HỌC Cú pháp
Không giống như CSS thông thường như chúng ta biết, LESS hoạt động giống như một ngôn ngữ lập trình. Đó là động, vì vậy mong đợi để tìm thấy một số thuật ngữ như Biến, Hoạt động và Phạm vi dọc đường.
Biến
Trước hết, hãy xem Biến.
Nếu bạn đã làm việc khá lâu với CSS, có lẽ bạn đã viết một cái gì đó như thế này, nơi chúng tôi có các giá trị lặp lại được gán trong các khối khai báo trong toàn bộ biểu định kiểu.
.class1 màu nền: # 2d5e8b; . class2 màu nền: #fff; màu: # 2d5e8b; . class3 Border: 1px solid # 2d5e8b;
Cách làm này thực sự tốt - cho đến khi chúng tôi thấy mình phải sàng lọc nhiều hơn một nghìn hoặc nhiều đoạn tương tự trong suốt bản định kiểu. Điều này có thể xảy ra khi xây dựng một trang web quy mô lớn. Công việc sẽ trở nên tẻ nhạt.
Nếu chúng ta đang sử dụng một tiền xử lý CSS như LESS, thì ví dụ trên sẽ không thành vấn đề - chúng ta có thể sử dụng Biến. Các biến sẽ cho phép chúng tôi lưu trữ một hằng số giá trị mà sau này có thể được sử dụng lại trong toàn bộ biểu định kiểu.
@ màu-cơ sở: # 2d5e8b; .group1 màu nền: @ color-base; . class2 màu nền: #fff; màu: @ màu-cơ sở; . class3 Border: 1px solid @ color-base;
Trong ví dụ trên, chúng tôi lưu trữ màu sắc # 2d5e8b bên trong @ màu cơ sở biến. Khi bạn muốn thay đổi màu sắc, chúng ta chỉ cần thay đổi giá trị trong biến này.
Ngoài màu sắc, bạn cũng có thể đặt các giá trị khác vào các biến như ví dụ:
@ font-family: Georgia @ dot-Border: rải rác @transition: linear @opacity: 0,5
Hỗn hợp
Trong LESS, chúng ta có thể sử dụng Hỗn hợp để sử dụng lại toàn bộ khai báo trong bộ quy tắc CSS trong bộ quy tắc khác. Đây là một ví dụ:
.độ dốc nền: #eaeaea; nền: gradient tuyến tính (trên cùng, #eaeaea, #cccccc); nền: -o-linear-gradient (trên cùng, #eaeaea, #cccccc); nền: -ms-linear-gradient (top, #eaeaea, #cccccc); nền: -moz-linear-gradient (top, #eaeaea, #cccccc); nền: -webkit-linear-gradient (top, #eaeaea, #cccccc);
Trong đoạn trích trên, chúng tôi đã đặt trước một mặc định dốc màu bên trong .độ dốc lớp học. Bất cứ khi nào chúng tôi muốn thêm độ dốc, chúng tôi chỉ cần chèn .độ dốc cách này:
div .gradents; viền: 1px solid # 555; bán kính đường viền: 3px;
Các .cái hộp sẽ kế thừa tất cả các khối khai báo bên trong .độ dốc. Vì vậy, quy tắc CSS ở trên bằng với CSS đơn giản sau:
div nền: #eaeaea; nền: gradient tuyến tính (trên cùng, #eaeaea, #cccccc); nền: -o-linear-gradient (trên cùng, #eaeaea, #cccccc); nền: -ms-linear-gradient (top, #eaeaea, #cccccc); nền: -moz-linear-gradient (top, #eaeaea, #cccccc); nền: -webkit-linear-gradient (top, #eaeaea, #cccccc); viền: 1px solid # 555; bán kính đường viền: 3px;
Hơn nữa, nếu bạn đang sử dụng CSS3 rất nhiều trong trang web của mình, bạn có thể sử dụng LESS Elements để giúp công việc của bạn dễ dàng hơn nhiều. Yếu tố LESS là một bộ sưu tập phổ biến Hỗn hợp CSS3 mà chúng ta có thể sử dụng thường xuyên trong các bảng định kiểu, chẳng hạn như bán kính biên giới, độ dốc, bóng đổ và v.v..
Để sử dụng LESS Elements, chỉ cần thêm @ nhập khẩu quy tắc trong biểu định kiểu LESS của bạn, nhưng đừng quên tải xuống trước và thêm nó vào thư mục làm việc của bạn.
@import "yếu tố.less";
Bây giờ chúng ta có thể sử dụng lại tất cả các lớp học được cung cấp từ yếu tố, ví dụ, để thêm 3px bán kính đường viền đến một div, chúng tôi có thể viết:
div .rounded (3px);
Để sử dụng thêm, vui lòng tham khảo tài liệu chính thức.
Quy tắc lồng nhau
Khi bạn viết kiểu trong CSS đơn giản, bạn cũng có thể đã đi qua các cấu trúc mã điển hình này.
điều hướng chiều cao: 40px; chiều rộng: 100%; nền: # 455868; viền dưới: 2px solid # 283744; nav li width: 600px; chiều cao: 40px; điều hướng li a màu: #fff; chiều cao dòng: 40px; bóng văn bản: 1px 1px 0px # 283744;
Trong CSS đơn giản, chúng tôi chọn các phần tử con bằng cách nhắm mục tiêu đầu tiên vào cha mẹ trong mọi bộ quy tắc, điều này là dư thừa đáng kể nếu chúng tôi tuân theo “thực hành tốt nhất” nguyên tắc.
Trong LESS CSS, chúng ta có thể đơn giản hóa các bộ quy tắc bằng cách lồng các yếu tố con bên trong cha mẹ, như sau;
điều hướng chiều cao: 40px; chiều rộng: 100%; nền: # 455868; viền dưới: 2px solid # 283744; li chiều rộng: 600px; chiều cao: 40px; một màu: #fff; chiều cao dòng: 40px; bóng văn bản: 1px 1px 0px # 283744;
Bạn cũng có thể chỉ định lớp giả, như :bay lượn, vào bộ chọn bằng ký hiệu dấu và (&).
Hãy nói rằng chúng tôi muốn thêm :bay lượn đến thẻ neo ở trên, chúng ta có thể viết nó theo cách này:
một màu: #fff; chiều cao dòng: 40px; bóng văn bản: 1px 1px 0px # 283744; &: hover màu nền: # 000; màu: #fff;
Hoạt động
Chúng tôi cũng có thể thực hiện các hoạt động trong LESS, chẳng hạn như cộng, trừ, nhân và chia đến số, màu sắc và biến trong biểu định kiểu.
Giả sử chúng ta muốn phần tử B cao gấp hai lần phần tử A. Trong trường hợp đó, chúng ta có thể viết nó theo cách này:
@height: 100px .element-A height: @height; .element-B height: @height * 2;
Như bạn có thể thấy ở trên, trước tiên chúng tôi lưu trữ giá trị trong @Chiều cao biến, sau đó gán giá trị cho phần tử A.
Trong phần tử B, thay vì tự tính chiều cao, chúng ta có thể nhân chiều cao với 2 sử dụng toán tử dấu hoa thị (*). Bây giờ, bất cứ khi nào chúng ta thay đổi giá trị trong @Chiều cao biến, yếu tố B sẽ luôn có chiều cao gấp đôi.
Kiểm tra các ví dụ hoạt động nâng cao hơn trong hướng dẫn trước của chúng tôi: Thiết kế thanh điều hướng menu trơn.
Phạm vi
LESS áp dụng Phạm vi khái niệm, nơi các biến sẽ được kế thừa đầu tiên từ phạm vi cục bộ và khi không có sẵn cục bộ, nó sẽ tìm kiếm trong phạm vi rộng hơn.
tiêu đề @color: đen; màu nền: @color; điều hướng @color: màu xanh; màu nền: @color; một màu: @ màu;
Trong ví dụ trên, tiêu đề có một đen màu nền, nhưng hải quânmàu nền sẽ là màu xanh da trời vì nó có biến @color trong phạm vi cục bộ của nó, trong khi một cũng sẽ có màu xanh được thừa hưởng từ cha mẹ gần của nó, hải quân.
Suy nghĩ cuối cùng
Cuối cùng, chúng tôi hy vọng bài đăng này có thể cung cấp cho bạn sự hiểu biết cơ bản về cách chúng tôi có thể viết CSS theo cách tốt hơn bằng cách sử dụng LESS. Ban đầu bạn có thể cảm thấy hơi khó xử, nhưng khi bạn thử nó thường xuyên hơn, nó chắc chắn sẽ trở nên dễ dàng hơn rất nhiều.
Dưới đây là một số hướng dẫn mà tôi khuyến khích bạn tìm hiểu thêm về các mẹo và thực hành, có thể giúp đẩy kỹ năng LESS của bạn lên cấp độ tiếp theo.
- Hướng dẫn LESS CSS: Thiết kế thanh điều hướng menu trơn
- Hiểu chức năng màu LESS
- 3 tính năng CSS LESS mới bạn nên biết
