Less CSS for .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. Ở bài trước tôi đã giới thiệu đến các bạn về cách sử dụng Less để viết CSS một cách khoa học. Ở bài này chúng ta sẽ tìm hiểu thêm một dll có tên dotLess, nó được phát triển riêng dành cho Asp.Net và khắc phục được một số nhược điểm mà Less gặp phải

Khi sử dụng Less thông thường bạn sẽ phải thêm một file javascript less.js

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

File Javascript thêm vào có một số nhược điểm như sau

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

Vì vậy sử dụng dotLess để thay thế là một giải pháp khá hiệu quả, bạn không cần lo lắng những vấn đề trên nữa. Việc biên dịch lại CSS, nén và cache được dotLess làm giúp cho bạn.

Cách sử dụng

Tải file dll dotLess tại đây, sau khi tải về, các bạn giải nén tập tin và Add Reference file dll dotless.Core.dll vào thư mục Bin trong project của bạn.

Tiếp theo, bạn cần thêm một số dòng sau vào file Web.Config của bạn.

Ở trong thẻ configSections

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

Ở trong thẻ httpHandlers thêm dòng sau

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

Ở trong thẻ handlers thêm dòng sau.

<add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />

dotLess hỗ trợ bạn nén và cache file CSS sau khi biên dịch, bạn thêm dòng sau vào dưới thẻ cònigSections

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

Sau khi thêm, file webconfig của bạn sẽ có các thành phần như sau

<configuration>

  <configSections>
    <section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler,dotless.Core" />
  </configSections>
  <dotless minifyCss="true" cache="true" handleWebCompression="false" />
  
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <httpHandlers>
      <add type="dotless.Core.LessCssHttpHandler,dotless.Core" validate="false" path="*.LESS" verb="*" />
    </httpHandlers>
  </system.web>
  
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <handlers>
      <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
    </handlers>
  </system.webServer>

</configuration>

Chú ý: Ở đây project demo này tôi làm trên .Net 4.0 nên file config rất gọn gàng, nếu project của bạn phát triển trên .Net 3.5 thì file config có thể sẽ nhiều hơn, tuy nhiên bạn chỉ cần thêm những dòng trên vào vị trí như đã chỉ ở trên là được.

Qua các bước trên là đã hoàn thành xong việc tích hợp dotLess vào project của bạn, chúng ta hay tiến hành làm một ví dụ nhỏ để xem dotLess đã hoạt động chưa. Tạo 1 file StyleSheet.less trong thư mục CSS của các bạn. thêm đoạn mã sau vào file Less vừa tạo.

//Less
@fontPage: Arial;
@colorText: #333;
@colorTitle: #0092D8;
@sizeTitle:18px;
@sizeText:14px;
//CSS
body {
    font-family:@fontPage;
    font-size:@sizeText;
}
h1{
    color:@colorTitle;
    font-size:@sizeTitle * 2;
}
.wrArticle {
    width: 100%;
    display: block;
    float: left;

    h3 {
        a{
            text-decoration:none;
            font-size:@sizeTitle;
            color:@colorTitle;
        }
        a:hover{
            text-decoration:underline;
        }
    }
    span{
        color:@colorText;
        font-size:@sizeText;
    }
}

Tiếp theo, tạo một file Default.aspx, kéo stylesheet.less vào và tiến hành thêm mã HTML như sau:

<h1>Demo dotLess in Asp.Net</h1>
        <div class="wrArticle">
            <h3>
                <a href="http://thuyvk.com/new/157/su-dung-less-de-viet-css.aspx" target="_blank">Sử dụng LESS để viết CSS</a>
            </h3>
            <span>
                Nếu là một web developer, chắc hẳn bạn đã quá quen thuộc với CSS, ngôn ngữ để định dạng hiển thị của trang web. CSS rất đơn giản, dễ học, nhất là với người mới bắt đầu. Tuy nhiên nó cũng có nhược điểm là khá “tĩnh”, điều này dẫn đến việc trong CSS rất khó để dùng lại các thuộc tính, khai báo của thành phần này vào thành phần khác. Đồng thời rất khó quản lý khi các đoạn mã CSS trở nên quá nhiều.
            </span>
        </div>
        <div class="wrArticle">
            <h3>
                <a href="http://thuyvk.com/new/156/tong-hop-20-mau-giao-dien-nguoi-dung-theo-xu-huong-thiet-ke-phang-flat-design.aspx" target="_blank">Tổng hợp 20 mẫu giao diện người dùng theo xu hướng thiết kế phẳng - Flat design</a>
            </h3>
            <span>
                Ở bài này tôi xin chia sẻ một số mẫu giao diện người dùng theo xu hướng thiết kế phẳng - Flat desin. Toàn bộ được chia sẻ miễn phí và ở định dạng PSD, bạn có thể dễ dàng lấy về để áp dụng ngay vào website của mình một cách rất nhanh chóng và chuyên nghiệp
            </span>
        </div>

Vậy là xong, các bạn hãy chạy thử để xem thành quả. Đối với file less khi chạy sẽ được tự động biên dịch thành CSS thông thường và được nén và cache. Khi bạn viewsource để xem, css lúc nãy ta viết ở trên sẽ được biên dịch như sau:

body{font-family:Arial;font-size:14px}h1{color:#0092d8;font-size:36px}.wrArticle{width:100%;display:block;float:left}.wrArticle h3 a{text-decoration:none;font-size:18px;color:#0092d8}.wrArticle h3 a:hover{text-decoration:underline}.wrArticle span{color:#333;font-size:14px}

Để dễ tham khảo, các bạn có thể download mã nguồn ở file đính kèm dưới bài viết này. Hoặc tìm hiểu kỹ hơn về dotLess tại đây.

Download Source

Related Post


Detect Mobile Browsers
Monday, September 16, 2013
Với xu hướng phát triển mạnh mẽ của các thiết bị di động cầm tay như smartphone & tablet ở giai đoạn hiện, việc phát triển web dành riêng cho mobile đã trở thành một nhu cầu khá phổ biến. Với các website phát triển sau này, các nhà phát triển thường chọn xu hướng thiết kế responsive. Tuy nhiên với những website đã có từ trước hoặc dữ liệu lớn, các nhà phát triển sẽ chọn phương án xây dựng một  module độc lập dành riêng cho thiết bị mobile....
Hướng dẫn tích hợp ckEditor, ckFinder và plugin Syntaxhighlight vào website Asp.Net
Thursday, September 12, 2013
Hiện nay có rất nhiều Editor hỗ trợ tốt cho việc soạn thảo trên website, trong bài viết này chúng ta sẽ tìm hiểu cách tích hợp ckEditor và các plugin kèm theo để hỗ trợ cho việc soạn thảo tin bài trên web viết bằng Asp.Net
Search

Đăng ký nhận bài mới


Category

Blog Archive