dotLess – Viết LESS với ASP.NET

dotLess – Viết LESS với ASP.NET

LESS là một CSS framework rất hay, nó giúp các nhà phát triển web tiết kiệm thời gian, đồng thời cũng làm cho các đoạn mã CSS dễ dàng quản lý và sử dụng lại hơn (nếu bạn chưa tiếp cận với LESS, có thể tham khảo bài biết của tôi tại đây: Sử dụng LESS để viết CSS Sử dụng LESS để viết CSS.

Tuy nhiên khi sử dụng LESS bạn phải thêm vào đoạn mã HTML như thế này:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Việc phải thêm vào file less.js sẽ có một số nhược điểm:

  • Quá trình tải trang chậm hơn (mặc dù là không đáng kể)
  • Mất thêm thời gian cho javascript dịch file .less sang CSS
  • Nếu trình duyệt tắt javascript, toàn bộ stylesheet của bạn sẽ không hoạt động

Đối với ứng dụng ASP.NET, bạn có thể sử dụng dotLess để thay thế. Lúc này, khi trình duyệt request đến file .less, dotLess sẽ làm nhiệm vụ dịch ra mã CSS và trả về. Bạn sẽ không phải lo lắng về những vấn đề như trên nữa.

Cách sử dụng

Bước 1: Tải file dotless.Core.dll
Bước 2: Add file dotless.Core.dll vào thư mục Bin trong website của bạn.
Bước 3: Thêm các đoạn mã sau vào file web.config
Phần <configSections>:

<section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler,dotless.Core" />

Phần <httpHandlers>:

<add type="dotless.Core.LessCssHttpHandler,dotless.Core" validate="false" path="*.less" verb="*" />

Bạn cũng có thể cấu hình minify và cache mã CSS trả về:

<dotless minifyCss="false" cache="true" />

Bước 4: Thêm file .less vào như file CSS bình thường:

<link href="styles.less" rel="stylesheet" type="text/css" />

Chú ý: Nếu sử dụng IIS 6, bạn phải cấu hình để các request đến file .less được xử lý bởi HTTP Handler .LESS vừa mới thêm vào. Để làm được điều này, trong IIS, chuột phải vào website của bạn, chọn Properties. Chuyển sang tab Home Directory và chọn Configuration. Thêm một Application Extensions như sau:

  • Executable: <ổ đĩa cài đặt windows>\windows\microsoft.net\framework\v4.0.30319\aspnet_isapi.dll
  • Extension: .less
  • Limit to: GET

http handler LESS

Chọn OK, thế là xong. Chúc các bạn thành công :)

Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!