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

Đăng ký tài khoản kiếm tiền với tiếp thị liên kết tại ACCESSTRADE, MasOffer, Lazada Việt Nam

Nếu công việc của bạn đang làm là lập trình viên, và cụ thể hơn là thiết kế website thì việc xây dựng giao diện (template. Theme) website là việc bạn thường xuyên phải làm. Do đó viết mã để xây dựng giao diện từ bản thiết kế thì CSS là thành phần cơ bản không thể thiếu sau mã HTML.CSS là gì ? CSS là chữ viết tắt của Cascading Style Sheet là ngôn ngữ định nghĩa cách thể hiển các thẻ HTML (HyperText Markup Language) trên Theme website bạn thực hiện.

Đối với công việc thiết kế website thì:
Đẹp, logic, thân thiện với người dùng: phải phụ thuộc vào bản thiết kế website đó !
Và để thể hiện được những nét đẹp đó thành hiện thực thì một phần đòi hỏi phải có CSS để định dạng.

Và CSS là ngôn ngữ đơn giản, không quá nhiều syntax, luật lệ phức tạp, đặc biệt dễ học dù bạn chỉ mới bắt đầu. Cũng vì lý do đó nên CSS không hỗ trợ các tính năng phức tạp về hàm và biến… đó cũng khiến CSS trở nên không linh hoạt trong quá trình viết mã tối ưu, khả năng dùng lại rất hạn chế.

Các điểm yếu của CSS vừa nêu đã trở thành lý do các nhà phát triển website cho ra đời LESS, các thư viện JavaScript hỗ trợ viết CSS như một ngôn ngữ lập trình thực sự (không phải hoàn toàn nhé ^^).

Trong đó thư viện less.js một CSS preprocessor được nghiên cứu, phát triển bởi bởi Alexis Sellier (một lập trình viên người Đức), thường được biết đến với tên là cloudhead theo mình bạn có thể nghiên cứu (vì mình cũng hay dùng thư viện này, có thể nói đây cũng là một trong các CSS preprocessor phổ biến hiện nay).
Website: http://lesscss.org

LESS là gì ?

sử dụng LESS

sử dụng LESS

LESS là một trong các CSS preprocessor, hỗ trợ bạn viết mã CSS thể hiện định dạng giao diện website theo hướng:
– Đơn giản hơn.
– Ngắn gọn hơn.
– Hiệu quả hơn.
– Dễ quản lý hơn qua việc sử dụng các thành phần hỗ trợ từ LESS như biến, mixins, toán tử và hàm.

Sử dụng LESS thế nào?
Đầu tiên bạn tải file less.js về. Hoặc tải tại http://lesscss.org. Bạn cũng có thể tìm hiểu chi tiết về LESS tại website, website hiện cung cấp đầy đủ nhất các thông tin về LESS.

Đầu tiên bạn tạo một file mới với phần mở rộng là .less, ví dụ styles.less
1. Mở tài liệu HTML và thêm đoạn code sau:

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

2. Tập tin styles.less PHẢI được thêm vào trước thư viện LESS less.js. Đây là tập tin chứa mã CSS (sử dụng LESS)của bạn. Dưới đây là danh sách cú pháp của LESS hỗ trợ việc định dạng giao diện website.

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, cũng như trong các ngôn ngữ lập trình, bạn có thể gọi và truy xuất giá trị của nó ở bất cứ đâu trong style của bạn.
Ví dụ: biến lưu trữ màu sắc font các thành phần trên website, nếu sử dụng biến thì việc thay đổi giá trị của chúng trở nên rất nhanh và dễ dàng.

// LESS
@color: #4D926F;

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

Mã CSS sau khi được biên dịch hiển thị như sau:

/* 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. Bạn có thể hiểu như việc bạn gọi 1 class đã định nghĩa trước đó trong 1 class bất kỳ nào đang định nghĩa để sử dụng lại các giá trị của chúng.

Mixins cũng có thể được sử dụng như hàm một 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);
}

Mã CSS sau khi được biên dịch hiển thị như sau:

/* 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ì như trước đây, bạn phải xem xét các mối quan hệ giữa các thẻ để viết selector kế thừa trong CSS thì với LESS bạn có thể làm điều đó dễ dàng hơn bằng cách lồng các selector vào nhau (như cấu trúc class trong ngôn ngữ lập trình vậy). Việc này làm cho quan hệ thừa kế trở nên rõ ràng hơn và viết mã CSS cũng ngắn gọn hơn (ý mình là mã lệnh khi viết LESS nhé ! còn dĩ nhiên sau khi biên dịch thì LESS sẽ chuyển nó về mã CSS thông thường).

// LESS
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Mã CSS sau khi được biên dịch hiển thị như sau:

#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, dài, rộng, làm cho giá trị của các thuộc tính có liên quan tới nhau (ví dụ: xây dựng website đòi hỏi responsive thì hàm và toán tử sẽ thể hiện được tính mềm dẻo của mình).

// 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%);
}

Mã CSS sau khi được biên dịch hiển thị như sau:

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

Ngoài ra, trong LESS còn có những tính năng khác như sử dụng hàm, namespace, javascript evaluation… Bạn NÊN tham khảo trực tiếp tại http://lesscss.org để có thể hiểu rõ hơn về thư viện này cũng như sức mạnh, độ tiện lợi, tính mềm dẻo mà nó mang lại cho công việc xây dựng website của bạn.

Sử dụng LESS để viết CSS 3.68/5 (73.68%) 19 votes
Nếu bạn mong muốn tìm hiểu rõ hơn về chia sẻ này và những chia sẻ khác, bạn có thể kết nối với mình qua các thông tin sau:
Facebook cá nhân: https://www.facebook.com/PExpress
Blog chia sẻ cá nhân: PolygonExpress.com
Group chia sẻ ứng dụng affiliate marketing & services: MMO tools
Web dịch vụ freelance: FMMSPolygon.com
Email liên hệ mình: fmmspolygon@gmail.com
Điện thoại: 0937.798.420 - 0868.929.024 (Kim Ngọc)

Related

Leave a Reply

Your email address will not be published. Required fields are marked *