Less CSS là gì và cách dùng Less CSS

Chí Vỹ

Less CSS có thể khiến ngôn ngữ lập trình của bạn dễ dùng hơn, với những shortcut cú pháp và tính năng mạnh mẽ. Dưới đây là những điều Less CSS có thể làm cho bạn.

Less trong CSS

Nếu là một lập trình viên CSS giàu kinh nghiệm, bạn sẽ hiểu rõ những hạn chế của ngôn ngữ này. Nó vẫn thiếu hỗ trợ mở rộng cho các tính năng được yêu cầu từ lâu như lồng ghép và trộn.

Less (Leaner Style Sheets) là một extension CSS với nhiều tính năng mạnh mẽ. Nếu bạn biết CSS, học Less sẽ dễ hơn vì cú pháp của cả hai rất giống nhau.

Cách cài đặt Less

Bạn có thể cài đặt Less với trình quản lý gói JavaScript, NPM bằng cách chạy:

npm install less -g

Sau khi cài đặt, bạn có thể biên dịch file .less sang .css bằng lệnh lessc. Ví dụ, lệnh sau biên dịch style.less và xuất kết quả trong file style.css.

lessc style.less style.css

Các biến trong Less

Khác CSS thông thường, dùng toán tử “--” để định nghĩa biến. Less xác định các biến bằng biểu tượng “@”. Ví dụ:

@width: 40px;
@height: 80px;

Khối code này đơn giản tạo 2 biến, chiều rộng và cao chứa hai giá trị tương đương: 40px và 80px. Nó thường lấy các giá trị thông dụng trong CSS và lưu chúng trong một biến. Điều này giúp khối code dễ chỉnh sửa những giá trị trên hơn vì chỉ có một nguồn kiểm soát.

Đây là cách bạn có thể dùng biến trong Less. Tạo file index.htm và thêm code soạn sẵn sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Using Less CSS</title>
</head>
<body>
    <div>
        Hello from the children of planet Earth!
    </div>
</body>

Tiếp theo, tạo file style.less và thêm:

@width: 400px;
@height: 400px;
@vertical-center: center;
@txt-white: white;
@bg-red: rgb(220, 11, 11);
@font-40: 40px;

div {
    width: @width;
    height: @height;
    display: flex;
    color: @txt-white;
    background-color: @bg-red;
    font-size: @font-40;
}

Giờ, bạn có thể biên dịch file .less sang .css bằng lệnh lessc:

lessc style.less style.css

CSS được biên dịch trông sẽ như thế này:

div {
  width: 400px;
  height: 400px;
  display: flex;
  color: white;
  background-color: #dc0b0b;
  font-size: 40px;
}

Khi mở trình duyệt, đây là hình ảnh bạn sẽ thấy:

Kết quả trong CSS

Bạn có thể làm nhiều thứ hơn với các biến trong Less, ví dụ như phép nội suy cho phép bạn sử dụng các biến làm tên bộ chọn, URL, v.v. Đây là một ví dụ về cách thực hiện nội suy biến:

@custom-selector: container;

.@{custom-selector} {
    padding: 10px;
    margin: 10px;
    border: solid 10px;
}

Khối code trên dùng mệnh đề @{...} để dùng một biến làm bộ chọn. Khi được biên dịch, code này sẽ cho kết quả sau:

.container{
    padding: 10px;
    margin: 10px;
    border: solid 10px;
}

Phép toán số học trong Less

Less cũng cung cấp hỗ trợ cho các phép toán số học như cộng, trừ, nhân chia. Những phép toán này hoạt động với hằng số, giá trị và biến.

@variable-1: 5px;

// Phép nhân giữa biến và hằng số
@variable-2: @variable-1 * 2

// Phép cộng giữa giá trị và biến
@variable-3: 10px + @variable-2

Cách dùng Mixins

Mixins cho phép bạn tái sử dụng các kiểu (style) hoặc code CSS qua stylesheet. Khác những extension CSS như Sass cũng cung cấp Mixins. Để minh họa cách mixins hoạt động trong Less, tạo index.htm và thêm code sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Using Less CSS</title>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
        architecto repudiandae ipsum animi velit id iste dolore reprehenderit
        dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
        facilis unde sequi.
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
        architecto repudiandae ipsum animi velit id iste dolore reprehenderit
        dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
        facilis unde sequi.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
        architecto repudiandae ipsum animi velit id iste dolore reprehenderit
        dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
        facilis unde sequi.
    </p>
</body>
</html>

Tiếp theo, tạo file style.less và thêm những dòng sau:

.sample-text() {
    background-color: yellow;
}

.first-letter() {
    background-color: red;
    color: white;
    font-size: 30px;
}

p {
    .sample-text();
}

p::first-letter {
    .first-letter();
}

Trong khối code trên, có hai class mixin: .sample-text và .first-letter. Khi bạn muốn dùng một mixin trong phần khác của style sheet, chỉ cần tham chiếu nó theo tên với dấu ngoặc đơn ở cuối: .mixin(). Trong trình duyệt này, bạn sẽ thấy:

Hàm mixin. trong Less

Tạo kiểu Nesting trong Less

Giả sử bạn có một div cha với hai thành phần làm con: một phần tử p và div khác. Thông thường, nếu bạn muốn tạo kiểu thành phần p với màu đỏ và div với màu xanh lá, bạn có thể dùng phương pháp sau:

div p {
    color: red;
}

div {
    color: green
}

Less cung cấp chức năng tương tự qua cách dùng nesting. Trong trường hợp này, Less tương đương khối code trên là:

div {
    color: green;

    p {
        color: red;
    }
}

Điều này không chỉ giúp bạn dễ hiểu mà còn bảo trì code thuận tiện hơn. Tham chiếu các bộ chọn gốc với less dễ hơn toán tử &. Ví dụ:

button {
    background-color: blue;
    border: none;

    &:hover {
        background-color: grey;
        transform: scale(1.2);
    }
}

Khối code trên sẽ dẫn tới code CSS sau khi được biên dịch:

button {
    background-color: blue;
    border: none;
}

button:hover {
    background-color: grey;
    transform: scale(1.2);
}

Phạm vi và các hàm trong Less

Giống như những ngôn ngữ lập trình thông thường khác, biến có phạm vi của khối mà bạn xác định chúng. Để minh họa điều này, tạo file index.htm mới, thêm code HTML soạn sẵn đầu tiên được cung cấp ban đầu. Sau đó, thêm khối sau vào thẻ body:

<div class="outer-div">
    Outer Div should be red.
    <br />
    <span class="inner-div">
       Inner div should be green.
    </span>
</div>

Trong file style.less, thêm những dòng sau:

@bg-color: red;

body {
    font-size: 40px;
    color: white;
    margin: 20px;
}

.inner-div {
    @bg-color: green;
    background-color: @bg-color;
}

.outer-div {
    background-color: @bg-color;
}

Khối inner-div xác định lại biến bg-color, chỉ nằm trong khối đó. Vì thế, màu xanh lá chỉ áp dụng cho class đó và không ảnh hưởng tới biến bg-color toàn cầu. Khi bạn biên dịch và mở kết quả trong trình duyệt, bạn sẽ thấy:

Thuộc tính màu nền

Less cũng cung cấp các hàm tiện dụng có thể hữu ích trong một số trường hợp. Ví dụ, nếu muốn chỉ đặt một kiểu khi điều kiện cụ thể được đáp ứng, bạn có thể làm việc đó bằng hàm if. Hàm này có cú pháp như sau:

if((condition), value1, value2)

Code này trả về value1 nếu điều kiện đáp ứng, nếu không, nó trả về value2. Ví dụ:

@var1: 20px;
@var2: 20px;

div {
    padding: if((@var1 = @var2), 10px, 20px);
}

Khối code trên sẽ cho kết quả trong CSS sau khi được biên dịch:

div {
    padding: 10px;
}

Những tính năng như hàm, mixin và biến chỉ là một phần nhỏ mà Less cung cấp. Less phù hợp với cả các dự án nhỏ và lớn. Hãy thử và tự cảm nhận những điều tuyệt vời mà Less mang tới cho CSS nhé.

Thứ Hai, 19/06/2023 09:51

5 ★ 1 👨 651

#CSS