Trong thế giới phát triển web ngày nay, việc quản lý mã CSS ngày càng trở nên phức tạp hơn, đặc biệt khi dự án của bạn lớn lên. Để giúp giảm thiểu sự rắc rối và tăng tính linh hoạt, Less CSS đã trở thành một công cụ mạnh mẽ cho các nhà phát triển web. Trong bài viết này, Stringee sẽ cung cấp thông tin giúp bạn tìm hiểu về Less CSS và cách bắt đầu sử dụng nó để cải thiện quy trình thiết kế web của mình.

1. Less CSS là gì?

Less CSS là một ngôn ngữ trình bày mở rộng của CSS, cho phép bạn sử dụng các tính năng như biến, nesting, mixins và hàm tính toán để tạo ra mã CSS dễ đọc và dễ bảo trì hơn. LESS được phát triển bởi Alexis Sellier, một lập trình viên người Đức. Dưới đây là một số điểm quan trọng về Less CSS:

  • Biến: Định nghĩa và sử dụng biến để tái sử dụng giá trị trong mã CSS.
  • Nesting: Lồng các quy tắc CSS trong nhau để tạo ra cấu trúc cây cấu trúc dễ đọc.
  • Mixins: Tái sử dụng các đoạn mã CSS bằng cách gọi chúng như là hàm.
  • Toán tử và hàm: Sử dụng các hàm tính toán để thực hiện các phép tính trong quy tắc CSS.

>>> Xem thêm các bài viết khác tại đây

CSS là gì? Vai trò và ưu điểm của CSS trên website

Hướng dẫn sử dụng CSS SelectorHướng dẫn sử dụng CSS Selector

CSS Selector trong jQuery

2. Cách sử dụng của Less CSS

2.1 Client-Side

  • Tải về file “less.js” phiên bản mới nhất từ trang web chính thức của LESS.
  • Tạo file mới có phần mở rộng là ‘.less’ chứa mã LESS CSS của bạn và thêm vào mã HTML:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
  • Để Client-Side tự động cập nhật khi style có thay đổi, bạn có thể thêm tính năng “Watch mode” bằng cách thêm ‘#!watch’ vào cuối URL hoặc thêm lệnh JavaScript less.watch() vào mã code của trang.

2.2 Server-Side

  • Cài đặt LESS trên server bằng npm:
$ npm install less
  • Gọi thông qua trình biên dịch của npm:
var less = require('less');
less.render('.class { width: 5 + 5 }', function (e, css) {
    console.log(css);
});

2.3 Cấu hình

  • Thêm các tùy chọn cho trình trình biên dịch
var parser = new (less.Parser)({
     paths: ['.', './lib'], // Chỉ định đường dẫn cho @import
     filename: 'style.less' // Chỉ định tên tệp .less
});

parser.parse('.class { width: 1 + 1 }', function (e, tree) {
    tree.toCSS({ compress: true }); // Thu nhỏ (nén) nội dung CSS
});
  • Gọi trình biên dịch từ command-line:
$ lessc styles.less

 

  • Ghi ra file tùy chọn sau khi biên dịch:
$ lessc styles.less > styles.css

3. Cú pháp của LESS

Không giống như CSS thông thường, LESS hoạt động như một ngôn ngữ lập trình, nó cũng có khai báo biến, toán tử…

3.1 Khai báo biến:

Biến trong Less CSS cho phép bạn định nghĩa giá trị một lần và sử dụng lại nó ở nhiều nơi khác nhau trong mã CSS của bạn. Điều này giúp giảm thiểu mã lặp lại và dễ dàng thay đổi các giá trị trên toàn bộ dự án.

Ví dụ:

Trước khi biên dịch:

@primary-color: #3498db;

.button {
  color: @primary-color;
  background-color: lighten(@primary-color, 20%);
}

 

Sau khi biên dịch:

.button {
  color: #3498db;
  background-color: #7fb3d9;
}

3.2 Nesting

Nesting trong Less CSS cho phép bạn lồng các quy tắc CSS bên trong nhau, tạo ra cấu trúc cây cấu trúc dễ đọc và dễ hiểu hơn.

Ví dụ:

Trước khi biên dịch:

.nav {
  ul {
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        text-decoration: none;
      }
    }
  }
}

Sau khi biên dịch:

.nav ul {
  padding: 0;
  list-style: none;
}

.nav ul li {
  display: inline-block;
  margin-right: 10px;
}

.nav ul li a {
  text-decoration: none;
}

3.3 Mixins

Mixins trong Less CSS cho phép bạn tái sử dụng các đoạn mã CSS bằng cách gọi chúng như là hàm. Điều này giúp giảm mã lặp lại và tăng tính tái sử dụng của mã CSS.

Ví dụ:

Trước khi biên dịch:

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.button {
  .border-radius;
}

Sau khi biên dịch:

.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

3.4 Toán tử và hàm

Hàm tính toán trong Less CSS cho phép bạn thực hiện các phép tính trong quy tắc CSS, giúp bạn tạo ra các kiểu động và linh hoạt.

Ví dụ:

Trước khi biên dịch:

@base-font-size: 14px;

body {
  font-size: @base-font-size;
}

.large-text {
  font-size: @base-font-size * 1.2;
}

Sau khi biên dịch:

body {
  font-size: 14px;
}

.large-text {
  font-size: 16.8px;
}

3.5 Scope 

Scope trong Less CSS cho phép bạn xác định phạm vi của các biến và mixins, giúp tránh xung đột và hiểu quả trong quản lý mã nguồn.

Ví dụ:

Trước khi biên dịch:

@var: red;

# page {
  @var: white;

# header {
    color: @var;
  }
}

# footer {
  color: @var;
}

Sau khi biên dịch:

# header {
    color: white;
}

# footer {
  color: red;
}

3.6 Biến @arguments

Biến @arguments trong Less CSS cho phép bạn truy cập các tham số được truyền vào một mixin, giúp tạo ra các mixins linh hoạt có thể nhận các số lượng tham số khác nhau.

Ví dụ:

Trước khi biên dịch:

.border(@width, @style: solid, @color: #000) {
  border: @arguments;
}

.button {
  .border(1px, dotted, #f00);
}

Sau khi biên dịch:

.button {
   border: 1px, dotted, #f00;
}

3.7 Map

Map trong Less CSS cho phép bạn tạo ra các cặp key-value, giúp quản lý và tái sử dụng các bộ giá trị liên quan với nhau một cách hiệu quả.

Ví dụ:

Trước khi biên dịch:

@colors: {
  primary: #3498db;
  secondary: #2ecc71;
};

.button {
  color: @colors[primary];
  background-color: @colors[secondary];
}

Sau khi biên dịch:

.button {
  color: #3498db;
  background-color: #2ecc71;
}

3.8 Importing

Importing trong Less CSS cho phép bạn nhúng các tệp Less khác vào trong một tệp Less hiện tại, giúp tổ chức mã nguồn một cách dễ dàng và linh hoạt.

Ví dụ:

@import "variables.less";
@import "mixins.less";

.button {
  color: @primary-color;
  .rounded-corners;
}

4. Lợi ích của việc sử dụng Less CSS

Việc sử dụng Less CSS mang lại nhiều lợi ích quan trọng cho quá trình phát triển web. Dưới đây là một số lợi ích chính:

  • Giảm mã lặp lại: Sử dụng biến, nesting và mixins giúp giảm thiểu sự lặp lại mã CSS, giúp mã trở nên gọn gàng hơn và dễ bảo trì hơn.
  • Tăng tính tái sử dụng: Mixins cho phép bạn tái sử dụng các đoạn mã CSS, giúp tạo ra một thư viện các kiểu có thể sử dụng lại trong toàn bộ dự án hoặc giữa các dự án khác nhau.
  • Quản lý biến dễ dàng: Less CSS cho phép bạn định nghĩa các biến để lưu trữ các giá trị như màu sắc, kích thước, hoặc font, giúp việc điều chỉnh các thuộc tính trở nên dễ dàng và linh hoạt.
  • Tạo kiểu linh hoạt: Hàm tính toán và map trong Less CSS cho phép bạn tạo ra các kiểu động và linh hoạt dựa trên các giá trị được tính toán hoặc lưu trữ.
  • Phạm vi biến rõ ràng: Scope trong Less CSS giúp xác định phạm vi của các biến và mixins, tránh xung đột và hiểu quả trong quản lý mã nguồn.
  • Tích hợp dễ dàng: Less CSS có khả năng nhập các tệp Less khác vào trong một tệp Less hiện tại, giúp tổ chức mã nguồn một cách dễ dàng và linh hoạt.

Tổng kết

Less CSS là một công cụ mạnh mẽ để tăng cường linh hoạt và hiệu suất trong thiết kế web của bạn. Bằng cách sử dụng các tính năng như biến, nesting, mixins và toán tử, v.v. bạn có thể tạo ra mã CSS dễ đọc, dễ bảo trì và linh hoạt hơn bao giờ hết. Hãy bắt đầu với Less CSS ngay hôm nay để nâng cao kỹ năng phát triển web của bạn!

>>> Xem thêm các bài viết khác:

Tất tần tật về Container trong Bootstrap 5

Sử dụng Pagination trong Bootstrap 5

Sử dụng Grid System trong Bootstrap

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: