Hướng dẫn chi tiết cách dùng các hàm trong Less CSS

Các hàm đơn giản hóa đáng kể trải nghiệm lập trình, nhất là khi viết code CSS. Sau đây là cách dùng các hàm trong Less CSS.

Less CSS là một công cụ tiền xử lý CSS năng động và mạnh mẽ, được sử dụng phổ biến trong những năm gần đây. Là một preprocessor, nó hoạt động như một phần mở rộng của “Vanilla CSS” bằng cách cung cấp một loạt các tính năng và chức năng bổ sung giúp nâng cao trải nghiệm tạo kiểu tổng thể.

Nếu đã thành thạo viết CSS tiêu chuẩn, bạn có thể chuyển đổi liền mạch sang sử dụng Less CSS mà không cần phải học nhiều. Điều này giúp bạn dễ dàng duy trì kiến thức CSS hiện có trong khi tận dụng các tính năng nâng cao của Less.

Hàm là gì và tại sao chúng quan trọng?

Trong lập trình, hàm là một khối mã thực thi nhiệm vụ cụ thể. Bạn cũng có thể sử dụng lại nó ở một nơi khác trong chương trình. Các hàm thường lấy dữ liệu, xử lý nó và trả về kết quả.

Chúng giúp dễ dàng giảm code trùng lặp trong một chương trình. Giả sử bạn có một chương trình tính toán chiết khấu dựa trên giá mà người dùng nhập vào. Trong một ngôn ngữ như JavaScript, bạn có thể triển khai nó như sau:

function checkDiscount(price, threshold){
    if (price >= threshold){
        let discount = 5/100 * price;
        return `Your discount is $${discount}`;
    } else {
        return `Sorry, this item does not qualify for a discount. `
    }
}

Sau đó, bạn có thể gọi hàm này và chuyển nó vào price và threshold.

let price = prompt("Enter the item price: ")
alert(checkDiscount(price, 500))

Bằng cách loại bỏ logic để kiểm tra giảm giá, chương trình không chỉ có thể đọc được mà giờ đây bạn còn có một khối code có thể tái sử dụng để xử lý giảm giá và trả về kết quả. Hàm có thể làm nhiều việc khác nữa, trên đây chỉ là những việc cơ bản.

Hàm trong Less CSS là gì?

CSS truyền thống có số lượng hàm rất hạn chế với lập trình viên. Một trong số hàm phổ biến nhất của CSS là hàm toán học calc() thực hiện đúng chức năng của nó – hàm này thực hiện các phép tính và sử dụng kết quả làm giá trị thuộc tính trong CSS.

p{
    background-color: red;
    width: calc(13px - 4px);
}

Less CSS có một số chức năng không chỉ thực hiện phép tính số học. Một hàm mà bạn có thể bắt gặp trong Less là hàm if. Hàm if nhận ba tham số: một điều kiện và hai giá trị. Khối mã dưới đây cho thấy cách bạn có thể sử dụng hàm này:

@width: 10px;
@height: 20px;
div{
    margin:if((@width > @height), 10px, 20px)
}

Trong khối code trên, trình biên dịch Less kiểm tra xem chiều rộng của biến (được xác định bởi ký hiệu @) có lớn hơn chiều cao của biến hay không. Nếu điều kiện là đúng, hàm trả về giá trị đầu tiên sau điều kiện (10px). Nếu không, hàm trả về giá trị thứ hai (20px).

Sau khi biên dịch, đầu ra CSS sẽ giống như thế này:

div {
    margin: 20px;
}

Cách dùng Boolean trong CSS

Boolean là một biến có thể có hai giá trị: true hoặc false. Với hàm boolean() trong Less, bạn có thể lưu trữ giá trị đúng hoặc sai của một biểu thức trong một biến để sử dụng sau này. Đây là cách nó hoạt động.

@text-color: red;

Trong khối code trên, trình biên dịch Less kiểm tra xem liệu text-color có phải màu đỏ. Sau đó, biến bg-color chứa giá trị này.

div{
    background-color: if(@bg-color,green,yellow);
}

Khối mã ở trên biên dịch thành kết quả như sau:

div {
  background-color: green;
}

Thay thế text trong một chuỗi bằng hàm replace()

Cú pháp hàm replace() trông như sau:

replace(string, pattern, replacement, flags)

string đại diện cho chuỗi mà bạn muốn tìm kiếm và thay thế. pattern là chuỗi cần tìm kiếm. pattern cũng có thể là một biểu thức chính quy, nhưng nó thường là một chuỗi. Sau khi khớp thành công, trình biên dịch Less CSS sẽ thay thế pattern bằng replacement.

Theo tùy chọn, hàm replacemen() cũng có thể chứa tham số flags cho cờ biểu thức chính quy.

@string: "Hello";
@pattern: "ello";
@replacement: "i";

div::before{
    content: replace(@string,@pattern,@replacement)
}

Kết quả:

div::before {
  content: "Hi";
}

Hàm List trong Less CSS

Trong Less CSS, bạn sử dụng dấu phẩy hoặc dấu cách để xác định danh sách giá trị. Ví dụ:

@groceries: "bread", "banana", "potato", "milk";

Bạn có thể sử dụng hàm length() để đánh giá số phần tử trong danh sách.

@result: length(@groceries);

Bạn cũng có thể sử dụng hàm extract() để trích xuất giá trị tại một vị trí cụ thể. Ví dụ bạn muốn lấy phần tử thứ 3 trong danh sách cửa hàng tạp hóa thì làm như sau:

@third-element: extract(@groceries, 3);

Không giống như các ngôn ngữ lập trình thông thường có chỉ mục danh sách bắt đầu từ 0, chỉ mục bắt đầu của danh sách trong Less CSS luôn là 1.

Xây dựng web đơn giản bằng các hàm Less CSS

Giờ là lúc kết hợp mọi thứ bạn đã học và tạo một dự án đơn giản bằng Less CSS. Tạo thư mục và thêm file index.htm và style.less.

Mở file index.htm và thêm code HTML sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet/less" type="text/css" href="style.less" />
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h1>
        </h1>
    </div>
<script src="https://cdn.jsdelivr.net/npm/less" ></script>
</body>
</html>

Khối code trên có một div “container” cha với phần tử h1 trống. Thuộc tính src trên thẻ script trỏ đến đường dẫn đến Less CSS Compiler.

Nếu không có thẻ script này, trình duyệt sẽ không thể hiểu code của bạn. Ngoài ra, bạn có thể cài đặt Less CSS trên máy tính của mình thông qua Trình quản lý gói nút (NPM), bằng cách chạy lệnh sau trong thiết bị đầu cuối:

npm install -g less

Bất cứ khi nào bạn sẵn sàng biên dịch tệp .less, chỉ cần chạy lệnh bên dưới, đảm bảo bạn chỉ định tệp mà trình biên dịch sẽ ghi đầu ra.

lessc style.less style.css

Trong file style.less, hãy tạo hai biến là: container-width và container-bg-color để biểu thị chiều rộng và màu nền của div “container” tương ứng.

@container-width: 50rem;
@container-bg-color: yellow;

Tiếp theo, tạo ba biến cụ thể là: string, pattern, và replacement. Sau đó, thêm các kiểu cho div “container” và phần tử h1.

@string: "Hello from the children of planet Earth!";
@pattern: "children of planet Earth!";
@replacement: "inhabitants of Pluto!";

.container{
    width: @container-width;
    background-color: @container-bg-color;
    padding: if(@container-width > 30rem, range(20px, 80px, 20),"");
    border: solid;
}

h1:first-child::after{
    content: replace(@string,@pattern,@replacement);
}

Trong khối code ở trên, hàm range() đặt thuộc tính đệm trên div “container“. Trình biên dịch Less sẽ biên dịch file style.less thành như sau:

.container {
  width: 50rem;
  background-color: yellow;
  padding: 20px 40px 60px 80px;
  border: solid;
}
h1:first-child::after {
  content: "Hello from the inhabitants of Pluto!";
}

Khi bạn mở file index.htm trong trình duyệt, kết quả như sau:

Trên đây là cách dùng các hàm trong Less CSS. Hi vọng bài viết hữu ích với các bạn.