Làm việc hiệu quả với các mẹo và công cụ LESS

Trong hướng dẫn trước đây của chúng tôi, chúng tôi đã học cách sử dụng LESS theo cách thực tế bằng cách sử dụng các ứng dụng như ChrunchApp để biên dịch mã. Lần này chúng tôi sẽ giới thiệu một số mẹo hữu ích để có thể tăng hiệu suất và năng suất của chúng tôi khi biên dịch cú pháp LESS. Chúng tôi sẽ thiết lập môi trường làm việc / máy tính để bàn bằng cách bật tính năng tô sáng cú pháp cho trình soạn thảo hiện tại của chúng tôi, sử dụng các công cụ biên dịch tự động và sử dụng Mixins cài sẵn, sau đó đồng bộ hóa tất cả chúng lại với nhau.

Chà, nếu bạn đã sẵn sàng, hãy bắt đầu.

Tuyên bố miễn trừ trách nhiệm: Các mẹo được giải thích dưới đây bắt nguồn từ kinh nghiệm hàng ngày của tôi với tư cách là một nhà thiết kế web. Vì vậy, trước khi chúng ta đi qua nó, tôi muốn phác thảo rằng các mẹo có thể phù hợp với một số nhà thiết kế chứ không phải những người khác; giống như bất kỳ mẹo nào khác bạn tìm thấy trên Web. Tuy nhiên, tôi hy vọng bạn có thể gặt hái được điều gì đó hữu ích từ các mẹo sau.

1. Mã tô sáng

Như chúng tôi đã đề cập trước đây, chúng tôi đã giới thiệu cho bạn về ChrunchApp. Tuy nhiên, ứng dụng này có thể không phải là sở thích của mọi nhà thiết kế web; bởi vì mỗi nhà thiết kế có môi trường làm việc riêng của họ, bao gồm cả trình soạn thảo mã theo lựa chọn của họ.

Thay vì cài đặt một trình soạn thảo mã khác, bạn thực sự vẫn có thể sử dụng trình soạn thảo hiện tại của mình và kích hoạt cú pháp tô sáng trong đó. Vì vậy, trong bài đăng này, tôi sẽ chia sẻ một số mẹo để thêm mã LESS làm nổi bật vào 2 trình soạn thảo văn bản nổi tiếng: Văn bản cao siêu 2 và Sổ tay++.

Văn bản cao siêu 2

Trình chỉnh sửa này hiện là lựa chọn ưa thích của tôi để giúp tôi soạn mã. Ứng dụng này có sẵn cho Windows, Linux và OSX, vì vậy dù hệ điều hành của bạn là gì, bạn vẫn có thể làm theo mẹo này.

Bây giờ, hãy tải xuống từ trang web chính thức của nó và thử trình chỉnh sửa này. Sau đó, đọc các hướng dẫn sau để bật đánh dấu màu LESS trong đó.

Chú thích: Vui lòng đảm bảo rằng bạn đã đọc giấy phép trước khi tải xuống, vì phiên bản miễn phí chỉ dành cho đánh giá.

Cài đặt bảng điều khiển gói

Đầu tiên, mở Sublime Text 2 của bạn và hiển thị Bảng điều khiển từ menu này Xem> Hiển thị bảng điều khiển

Sau đó, sao chép và dán dòng lệnh sau vào Bảng điều khiển, sau đó nhấn Enter để cài đặt điều khiển gói từ wBond.net:

nhập khẩu urllib2, os; pf = "Gói Control.sublime-gói"; ipp = sublime.installed_packages_path (); os.makenirs (ipp) nếu không os.path.exists (ipp) khác Không có; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); mở (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (",'% 20 ')). đọc ()); in 'Vui lòng khởi động lại văn bản tuyệt vời để hoàn tất cài đặt'

Điều này Bảng điều khiển gói sẽ giúp chúng tôi cài đặt gói highlight-.

Cài đặt gói làm nổi bật LESS

Khởi động lại Sublime Text 2 và hiển thị Bảng màu lệnh từ menu này Công cụ> Bảng lệnh. Chờ cho đến khi danh sách gói đã được tải tất cả. Sau đó, gõ Cài đặt gói để tìm kiếm và tải các gói.

Sau đó, tìm kiếm gói LESS từ danh sách kho lưu trữ và nhấn Enter.

Đợi một phút để Sublime Text 2 tải xuống và cài đặt gói cho đến khi thông báo sau xuất hiện trên thanh trạng thái.

Vào menu Xem> Cú pháp, bạn sẽ thấy LESS trong danh sách. Điều đó có nghĩa là Văn bản cao siêu 2 đang hỗ trợ .ít hơn và cú pháp LESS của bạn cũng nên có tô sáng màu phù hợp ngay bây giờ.

Sổ tay++

Notepad ++ là trình soạn thảo mã nguồn mở, miễn phí và có nhiều plugin hữu ích để mở rộng chức năng của nó. Nó cũng được sử dụng rộng rãi bởi nhiều nhà thiết kế / phát triển web, đặc biệt là những người làm việc với hệ điều hành Windows. Vì vậy, tôi quyết định cũng bao gồm mẹo để thêm tô sáng văn bản LESS cho nó.

Cài đặt LESS-highlight trong Notepad++

Việc bật màu LESS trong Notepad ++ khá dễ dàng.

Lần đầu tiên tải xuống gói LESS cho Notepad ++ từ liên kết này (userDefineLang_LESS.xml). Sau đó đi đến Xem> Đối thoại do người dùng xác định.

Hộp bật lên dưới đây sẽ xuất hiện. Nhấn vào Nhập khẩu nút và xác định vị trí bạn đã tải xuống .xml tập tin. Sau đó, khởi động lại Notepad++.

Mở tệp .less của bạn và vào menu Ngôn ngữ. Bây giờ bạn sẽ thấy LESS bao gồm. Chọn nó để áp dụng tô sáng màu trên cú pháp LESS của bạn.

Nhiêu tai nguyên hơn

Có rất nhiều biên tập viên khác trên thị trường. Vì vậy, ở đây chúng tôi bao gồm một số liên kết hữu ích cho bạn nếu bạn không sử dụng bất kỳ trình chỉnh sửa nào ở trên.

Adobe Dreamweaver

Không còn nghi ngờ gì nữa, Dreamweaver có lượng người dùng khổng lồ. Nó có sẵn cho cả Mac và Windows. Vì vậy, nếu bạn sử dụng trình chỉnh sửa này, đây là một trong những nguồn tốt để cài đặt LESS highlight trong Adobe DreamWeaver.

Coda

Nếu bạn đang sử dụng Mac, bạn có thể biết Coda, trình chỉnh sửa này là một trong những phổ biến nhất đối với người dùng Mac. Và, đây là cách bạn có thể cài đặt LESS trong Coda.

Geany

Đây là một trong những trình soạn thảo mã phổ biến hơn trong số những người dùng Linux. Một số máy tính trong văn phòng của tôi chạy trên Linux cũng sử dụng Geany. Vì vậy, nếu bạn cũng sử dụng nó, bạn có thể bao gồm phần tô sáng LESS bằng cách làm theo hướng dẫn này tại SuperUser.com

2. Trình biên dịch LESS

Không giống như ChrunchApp có trình biên dịch LESS tích hợp, các trình soạn thảo khác sẽ không có nó theo mặc định. Mặc dù có một số cách để bao gồm nó, nhưng nó khá kỹ thuật cho người dùng phổ thông. Vì vậy, giải pháp tốt nhất tôi có là biên dịch bằng các công cụ sau: Thắng hoặc là BÀI HỌC. WinLESS là trình biên dịch được thiết kế cho Windows, trong khi LESS.app được xây dựng cho OSX.

Các công cụ này có thể tự động chuyển mã LESS của chúng tôi thành CSS tĩnh khi chúng tôi lưu tệp và báo cáo trực tiếp nếu có lỗi trong mã. Vâng, hãy để tôi chỉ cho bạn thấy công cụ này hữu ích như thế nào:

Đầu tiên, tôi muốn tải xuống WinLESS và cài đặt nó.

Nhấp vào nút Thêm thư mục và định vị thư mục nơi bạn đặt .ít hơn tập tin (tôi giả sử bạn đã tạo ít nhất một). Một khi bạn thêm một; WinLESS sẽ quét và tìm tất cả .ít hơn tập tin và cho bạn thấy trong danh sách.

Vào menu Tập tin> Cài đặt, và đảm bảo các tùy chọn này được kiểm tra;

Tự động biên dịch tệp khi lưu
Hiển thị thông báo trên biên dịch thành công

Chúng tôi cũng có thể đặt thư mục đầu ra, trong trường hợp chúng tôi muốn lưu nó ở nơi khác. Nhưng, trong ví dụ này, chúng ta sẽ để tùy chọn này như hiện tại; có nghĩa là tệp đầu ra sẽ được lưu trong cùng thư mục với .ít hơn tập tin.

Mở của bạn .ít hơn tập tin từ thư mục đã thêm, thực hiện một vài thay đổi và lưu nó.

WinLESS sẽ thông báo cho bạn khi tệp được biên dịch thành công .css hoặc nếu có lỗi trong mã. Bằng cách này, bạn có thể kiểm tra trực tiếp đầu ra .css, thay vì phải chờ mã hoàn thành để biên dịch nó.

Nếu bạn đang sử dụng Mac, bạn có thể sử dụng LESS.app có cùng chức năng với WinLESS.

Mixins cài sẵn

Trong các thực tiễn thiết kế web hiện đại hiện nay, chúng tôi sẽ sử dụng các thuộc tính CSS3 như Gradient, Shadow hoặc Border Radius trông như thế này:

-webkit-Border-radius: 3px; -moz-viền-bán kính: 3px; bán kính đường viền: 3px;

hoặc là

nền: -moz-linear-gradient (trên cùng, # f0f9ff 0%, # a1dbff 100%); nền: -webkit-linear-gradient (trên cùng, # f0f9ff 0%, # a1dbff 100%); nền: -o-linear-gradient (trên cùng, # f0f9ff 0%, # a1dbff 100%); nền: -ms-linear-gradient (trên cùng, # f0f9ff 0%, # a1dbff 100%); nền: độ dốc tuyến tính (trên cùng, # f0f9ff 0%, # a1dbff 100%);

Trong hướng dẫn trước đây của chúng tôi, chúng tôi đã thực hiện một số Mixins để đơn giản hóa cú pháp này. May mắn thay, một số người trong cộng đồng thiết kế web thực sự đủ hào phóng để dành thời gian của họ để biên dịch các Mixins hữu ích này, do đó chúng tôi không cần phải tự biên dịch nó từ đầu.

Và, một trong những mục yêu thích của tôi là Ít yếu tố chứa nhiều quy tắc đặt sẵn CSS3 hữu ích. Vì vậy, bây giờ chúng tôi viết ít dòng mã hơn từ các tiền tố nhà cung cấp tẻ nhạt.

Được rồi, bây giờ, hãy xem làm thế nào tất cả những lời khuyên trên có thể thực sự có ích.

Đặt tất cả chúng lại với nhau

Trong ví dụ này tôi sẽ tạo một nút liên kết đơn giản. Đầu tiên tôi muốn tạo một tài liệu HTML mới và đánh dấu sau:

 ÍT HƠN    Nhấp vào đây

Tạo một phong cách làm biểu định kiểu LESS chính của chúng tôi, lưu nó trong cùng thư mục với tài liệu HTML của chúng tôi và thêm thư mục vào WinLESS.

Nhập khẩu yếu tố chúng tôi đã tải xuống trước khi sử dụng cú pháp này:

@import "yếu tố.less";

Bây giờ, chúng ta có thể sử dụng bất kỳ Mixins nào được cung cấp từ các yếu tố. .dốc, .tròn, và .giáp. Tôi chắc chắn rằng tên Mixins khá tự giải thích.

Tiếp theo, đặt các quy tắc LESS bên dưới, trong biểu định kiểu của bạn. Và, lưu nó một lần nữa

 một display: inline-block; phần đệm: 10px 20px; màu: # 555; trang trí văn bản: không có; .bw-gradient (#eee, 240, 255); .rounded; .được sắp xếp; &: di chuột .bw-gradient (#eee, 255, 240);

Kể từ khi chúng tôi .ít hơn tập tin đã được thêm vào WinLESS, nó sẽ tự động được biên dịch thành .css. Bây giờ hãy xem kết quả.

Chà, nó không tệ lắm phải không, vì xét rằng nút này được tạo ra với ít dòng hơn những gì cần thiết. Và, đây là CSS tĩnh được tạo thực tế:

 một display: inline-block; phần đệm: 10px 20px; màu: # 555; trang trí văn bản: không có; nền: #eeeeee; nền: -webkit-gradient (tuyến tính, dưới cùng bên trái, trên cùng bên trái, dừng màu (0, # f0f0f0), dừng màu (1, #ffffff)); nền: -ms-linear-gradient (dưới cùng, # f0f0f0 0%, # f0f0f0 100%); nền: -moz-linear-gradient (đáy trung tâm, # f0f0f0 0%, #ffffff 100%); -webkit-Border-radius: 2px; -moz-Border-radius: 2px; bán kính đường viền: 2px; -moz-nền-clip: đệm; -webkit-nền-clip: padding-box; clip nền: đệm-hộp; viền trên: solid 1px #eeeeee; viền trái: solid 1px #eeeeee; viền phải: solid 1px #eeeeee; viền dưới: solid 1px #eeeeee;  a: di chuột nền: #eeeeee; nền: -webkit-gradient (tuyến tính, dưới cùng bên trái, trên cùng bên trái, dừng màu (0, #ffffff), dừng màu (1, # f0f0f0)); nền: -ms-linear-gradient (dưới cùng, #ffffff 0%, #ffffff 100%); nền: -moz-linear-gradient (đáy trung tâm, #ffffff 0%, # f0f0f0 100%);

Tóm tắt

Dưới đây là một bản tóm tắt nhanh chóng về những gì chúng ta đã thảo luận trong bài viết này:

Bằng cách bật tính năng tô sáng cú pháp trong trình chỉnh sửa hiện tại của chúng tôi, chúng tôi không cần phải cài đặt trình chỉnh sửa bổ sung để soạn cú pháp LESS; điều này có thể giúp bạn tiết kiệm một số không gian / bộ nhớ trên đĩa của bạn.
Chúng tôi cũng không còn cần phải tải xuống và liên kết Thư viện LESS.js vào phần đầu HTML như chúng tôi đã làm trong hướng dẫn trước. Bằng cách này, tài liệu HTML của chúng tôi vẫn sạch sẽ và gọn gàng.
Sử dụng các công cụ biên dịch như WinLESS và LESS.app có thể tạo đầu ra CSS tĩnh ngay lập tức. Vì vậy, nếu có lỗi với cú pháp, chúng ta có thể kiểm tra nó ngay lập tức.
Mixins cài sẵn như LESS Elements là người bạn tốt nhất của chúng tôi. Nó thực sự có thể tiết kiệm thời gian của chúng tôi khi biên dịch thuộc tính CSS3 tẻ nhạt.