Sử dụng LESS để viết CSS

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.
Để khắc phục các nhược điểm của CSS, các CSS preprocessor ra đời. Bài viết này chúng ta sẽ cùng tìm hiểu về LESS, một trong những CSS preprocessor phổ biến nhất hiện nay.
 

LESS là gì?

LESS là một CSS preprocessor, giúp ta viết các đoạn mã CSS đơn giản, ngắn gọn và hiệu quả hơn, đồng thời cũng dễ quản lý hơn bằng cách thêm vào CSS các thành phần động như biến, mixins, toán tử và hàm. LESS được phát triển bởi Alexis Sellier, một lập trình viên người Đức.

Sử dụng LESS thế nào?

  • Đầu tiên bạn tải file less.js về máy của mình.
  • Tạo một file mới với phần mở rộng là .less, ví dụ styles.less
  • Mở tài liệu HTML và thêm đoạn code sau:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Phải chắc chắn rằng styles.less được thêm vào trước less.js

File styles.less sẽ chứa đoạn mã LESS của bạn. Hãy cùng tìm hiểu cú pháp của LESS trước khi bắt đầu viết code nhé.

Cú pháp của LESS

Biến
 
Việc sử dụng biến cho phép khai báo giá trị được sử dụng nhiều lần tại một chỗ, và sử dụng nó trong toàn bộ style của bạn. Vì thế khi muốn thay đổi giá trị này, bạn chỉ cần thay đổi tại một chỗ.
// LESS
@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Kết quả:

/* Biên dịch ra CSS */
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixins

Mixins cho phép gắn toàn bộ thuộc tính của một class trong CSS vào trong class khác bằng một cách khá đơn giản là thêm tên class này như một thuộc tính của class kia. Nó gần giống với biến, nhưng thay giá trị bằng toàn bộ các thuộc tính của class. Mixins cũng có thể được sử dụng như hàm, bằng cách truyền tham số, như ví dụ dưới đây:

// LESS
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}
/* Biên dịch ra CSS */
#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
Nested Rules
 
Thay vì viết các tên selector dài để chỉ ra các quan hệ thừa kế trong CSS, với Less bạn có thể lồng các selector và nhau. Việc này làm cho quan hệ thừa kế trở nên rõ ràng hơn và code stylesheet cũng ngắn gọn hơn.
// LESS
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}
/* Biên dịch ra CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}
Hàm & toán tử
 
Toán tử cho phép cộng, trừ, nhân, chia giá trị của các thuộc tính, màu sắc, làm cho giá trị của các thuộc tính có liên quan tới nhau. Hàm ánh xạ 1-1 với code JavaScript, cho phép thao tác với các giá trị theo bất cứ cách nào bạn muốn.
// LESS
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}
/* Biên dịch ra CSS */
#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

Ngoài ra, trong LESS cũng có thể sử dụng hàm, namespace, javascript evaluation... bạn có thể tham khảo thêm tại đây

PS

Đối với website Asp.Net chạy trên IIS sẽ có một số trường hợp xẩy ra lỗi 404 không tìm thấy file stylesheet less của bạn, để khắc phục lỗi này các bạn thêm đoạn mã này vào webconfig

<!--Config using less css-->
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".less" mimeType="text/css" />
    </staticContent >
  </system.webServer>

 

Related Post


Giới thiệu và hướng dẫn cách sử dụng Bootstrap
Tuesday, September 24, 2013
Có bao giờ bạn phải viết HTML/CSS rùi ngồi suy nghỉ “Tại sao mình phải viết đi viết lại nhưng class giống nhau như thế này ?” hay “Mình sẽ làm 1 css framework để về sau sử dụng lại .Rồi chợt nhận ra là mọi chuyện không đơn giản như vậy class bạn viết ra ở web này rồi lại hì hục sửa ở web khác  nhiều lúc ngồi sửa còn lâu hơn là viết mới.
CSS Border : Những điều không nên bỏ qua
Friday, September 13, 2013
Chúng ta đã quá quen thuộc với thuộc tính border có trong CSS, tuy nhiên còn có những điều thú vị khác về nó sẽ khiến bạn thật sự ngạc nhiên. Nào chúng ta cùng tìm hiểu nhé
Search

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


Category

Blog Archive