Less CSS Là Gì? Hướng Dẫn Less CSS Chi Tiết 2023

Bất kỳ ai muốn lập trình hoặc thiết kế các trang web hiện đại sẽ không thể tránh khỏi CSS . Ngôn ngữ biểu định kiểu giống như HTML – một trong những ngôn ngữ cốt lõi của World Wide Web và cho phép nội dung trang web được phân biệt rõ ràng với bản trình bày đồ họa của nó .

Điều này cho phép các biến như bố cục, màu sắc hoặc kiểu chữ có thể được điều chỉnh bất cứ lúc nào mà không cần phải đại tu hoàn toàn mã nguồn. Thông tin liên quan đến thiết kế này được lưu trữ trong các bảng định kiểu dựa trên CSS.

Tuy nhiên, một dự án web càng lớn thì các bảng định kiểu càng trở nên phức tạp và khó hiểu – và do đó, việc làm việc với ngôn ngữ web càng trở nên khó khăn hơn. Bộ tiền xử lý CSS Less cung cấp cứu trợ chào mừng ở đây.

1.Less CSS Là gì

à một phần mở rộng ngôn ngữ tương thích ngược hoặc bộ xử lý tiền xử lý cho ngôn ngữ CSS của biểu định kiểu. Điều này có nghĩa là bất kỳ mã CSS nào cũng tự động là mã Ít hợp lệ (nhưng điều này không đúng theo hướng khác).

Mục đích của Less là làm cho việc viết mã CSS hiệu quả hơn . Do đó, ngôn ngữ chịu ảnh hưởng của SASS cung cấp một loạt các bổ sung cho các hướng dẫn CSS tiêu chuẩn, bao gồm các biến và hàm.

Khi Alexis Sellier phát hành bộ tiền xử lý CSS vào năm 2009, trình biên dịch để chuyển đổi Less thành CSS vẫn được viết bằng ngôn ngữ lập trình dựa trên đối tượng Ruby.

Tuy nhiên, giờ đây, công cụ JavaScript Less.js hình thành nền tảng của ngôn ngữ biểu định kiểu và quy trình biên dịch – với ưu điểm là Less không chỉ được biên dịch ở phía máy chủ mà còn ở phía máy khách (trong trình duyệt web).

2.Less CSS với CSS

Cả CSS và Less đều được coi là ngôn ngữ biểu định kiểu. Do đó, chúng là các ngôn ngữ chính thức xác định sự xuất hiện của giao diện người dùng và tài liệu. Các tệp biểu định kiểu có chứa các hướng dẫn thiết kế mong muốn chỉ cần được gán cho các phần tử HTML của một trang web; trình duyệt sẽ giải thích.

Sự khác biệt chính giữa Less và CSS là CSS là ngôn ngữ tĩnh , trong khi Less được xếp hạng trong số các ngôn ngữ động và do đó cũng cung cấp các tính năng động như biến, toán tử, hàm, mixin và lồng nhau không có sẵn trong CSS.

Mặc dù các hướng dẫn trong CSS phải tuân theo một lược đồ cố định, nhưng Less mở ra khả năng linh hoạt hơn đáng kể cho các nhà phát triển: Ví dụ: các quy tắc riêng lẻ có thể được xác định cho bất kỳ lớp phần tử nào trong toàn bộ biểu định kiểu – khiến cho việc lặp lại mã tẻ nhạt là không cần thiết.

Do đó, cú pháp của hai ngôn ngữ cũng khác nhau. Ít cú pháp hơn nói chung có thể được phân loại như một metasyntax của CSS , vì mã CSS hợp lệ cũng luôn hợp lệ Mã ít hơn có cùng ngữ nghĩa.

3.Cách sử dụng Less Css trên máy khách và máy chủ

Nếu bạn muốn sử dụng Less cho dự án của mình, bạn có hai tùy chọn: Bạn có thể sử dụng trình duyệt web mà bạn chọn để biên dịch các bảng định kiểu Less của bạn ở phía máy khách thông qua Less.js hoặc bạn có thể cài đặt ứng dụng JavaScript trên máy tính phát triển và chuyển đổi mã của bạn ở đó bằng cách sử dụng Less.js và môi trường thời gian chạy JavaScript Node.js thông qua dòng lệnh.

Less CSS: Sử dụng trên máy khách

Sử dụng Ít hơn trong ứng dụng khách là cách dễ nhất và nhanh nhất để làm việc với ngôn ngữ biểu định kiểu . Nhưng phương pháp này không được khuyến nghị cho môi trường trực tiếp tiếp theo, vì việc biên dịch bổ sung từ Less thành CSS sẽ dẫn đến những thất bại rõ ràng về hiệu suất khi truy cập người dùng. Hơn nữa, các trình duyệt có JavaScript bị vô hiệu hóa sẽ hoàn toàn bỏ qua các hướng dẫn thiết kế.

Để biên dịch Less trong trình duyệt, trước tiên hãy chỉ định trong tài liệu tương ứng mà bạn muốn sử dụng Less stylesheets (tức là stylesheets có đuôi tệp là .less ). Chỉ cần tích hợp chúng bằng cách sử dụng thuộc tính rel “stylesheet / less”:

<link rel="stylesheet/less" type="text/css" href="styles.less">

Tiếp theo, tải xuống phiên bản hiện tại của Less.js – chẳng hạn có sẵn trong kho lưu trữ GitHub chính thức cho bộ xử lý trước CSS. Sau đó, bạn có thể tích hợp công cụ JavaScript trong phần <head> của dự án của mình:

<script src="less.js" type="text/javascript"></script>

4.Sử dụng Less CSS trên máy chủ

Ít hơn cũng nhanh chóng để cài đặt và dễ dàng thực thi trên các máy tính phát triển. Tại đây, bạn có quyền lựa chọn miễn phí về hệ điều hành: Bộ tiền xử lý CSS chạy trên Windows, macOS và UNIX / Linux. Tuy nhiên, môi trường thời gian chạy JavaScript nói trên Node.js phải được cài đặt.

Bắt đầu bằng cách tải xuống phiên bản hiện tại cho hệ thống của bạn từ trang web Node.js và cài đặt nó. Sử dụng npm – trình quản lý gói cho môi trường thời gian chạy JavaScript – sau đó bạn nên cài đặt ngôn ngữ biểu định kiểu thông qua dòng lệnh:

npm install -g less

Giờ đây, bạn có thể biên dịch các bảng định kiểu Less đã chuẩn bị sẵn bất kỳ lúc nào – tương tự như vậy thông qua dòng lệnh. Ví dụ: có thể chuyển đổi tệp ví dụ example.less thành tệp CSS bằng lệnh sau:

lessc example.less example.css

5.Hướng dẫn Less CSS với các tính năng

Đối với bất kỳ ai thường xuyên làm việc với CSS, việc hiểu rõ hơn về Less là rất xứng đáng. Sử dụng Ít hơn không chỉ mang lại lợi thế là có thể đưa hành vi động vào mã biểu định kiểu mà còn có khả năng tiết kiệm thời gian và công sức.

Tuy nhiên, ở đây, điều quan trọng là phải làm quen với cách hoạt động của tiện ích mở rộng CSS. Rốt cuộc, để viết các biểu định kiểu trong Ít hơn, bạn cũng cần biết các quy tắc cú pháp cần thiết . Sử dụng các ví dụ thực tế về Ít CSS, hướng dẫn ngắn gọn về Ít hơn của chúng tôi giới thiệu cho bạn các tính năng quan trọng nhất, bao gồm cả ký hiệu tương ứng.

Biến

Một trong những điểm mạnh lớn nhất của Less là tùy chọn – cũng như các ngôn ngữ lập trình khác – để tạo các biến. Các biến này có thể lưu trữ bất kỳ loại giá trị nào và đặc biệt có liên quan đến các giá trị mà bạn sử dụng rất thường xuyên trong biểu định kiểu của mình:

Ví dụ: các biến thường được sử dụng để xác định tập trung màu sắc , phông chữ , kích thước (kích thước, chiều cao và chiều rộng), bộ chọn hoặc URL dưới dạng cũng như các biến thể của chúng (chẳng hạn như sáng hơn / tối hơn). Sau đó, các giá trị đã xác định có thể được sử dụng ở bất kỳ đâu trong biểu định kiểu, cho phép thực hiện các thay đổi toàn cục chỉ với một dòng mã.

Đoạn trích mã sau xác định hai biến làm ví dụ – một cho màu nền ( @ background-color ) và một cho màu văn bản ( @ text-color ). Cả hai đều chứa mã thập lục phân:

// Less
@background-color: #ffffff;
@text-color: #000000;
p{
background-color: @background-color;
color: @text-color;
padding: 15px;
}
ul{
background-color: @background-color;
}
li{
color: @text-color;
}

Màu nền – trong trường hợp này là màu trắng – được gán cho cả khối văn bản chung (p) cũng như danh sách không có thứ tự (ul).

Màu đen được đặt làm màu văn bản và áp dụng cho văn bản trong khối văn bản cũng như cho các phần tử danh sách (li) trong danh sách.

Để thực hiện các thay đổi đối với các màu đã xác định này và chỉ định, ví dụ: văn bản màu trắng trên nền đen cho danh sách và đoạn văn bản, tất cả những gì bạn cần làm là trao đổi các giá trị của hai biến .

Trong một trang tính CSS chuẩn, các giá trị sẽ phải được thay thế riêng lẻ cho tất cả các phần tử. Sau khi biên dịch thành CSS, mã sẽ xuất hiện như sau:

/* CSS */
p{
background-color: #ffffff;
color: #000000;
padding: 15px;
}
ul{
background-color: #ffffff;
}
li{
color: #1A237E;
}

Mixin

Mixin tương tự như các biến. Nhưng trong trường hợp này, nó không phải là các giá trị riêng lẻ mà là toàn bộ các lớp cũng như các giá trị được chỉ định trong đó được xác định tập trung để sau đó được chuyển vào bất kỳ lúc nào cho các lớp khác trong biểu định kiểu Less .

Mixin cũng có thể hoạt động giống như các hàm và chấp nhận các tham số (bao gồm cả các giá trị mặc định).

Ví dụ sau là một mixin cho các góc tròn ( .rounded-angle ) được gán cho cả đầu trang ( #header ) và chân trang ( #footer ). Mặc dù giá trị đã chỉ định được chấp nhận cho tiêu đề, nhưng #footer cung cấp cho mixin giá trị riêng của nó (10px):

// Less
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
CSS đã biên dịch cho mã Ít hơn này trông giống như sau:
/* 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;

Nesting

Để tạo các thuộc tính kế thừa trong CSS, bạn cần viết các bộ chọn dài và phức tạp. Trong Ít hơn, bạn có thể lồng bao nhiêu bộ chọn vào nhau tùy thích .

Điều này làm giảm bớt công việc và cũng tạo ra một cấu trúc rõ ràng hơn, dễ hiểu hơn trong biểu định kiểu. Tính năng này của bộ tiền xử lý CSS cũng có thể được minh họa bằng một ví dụ:

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

Các bộ chọn p , a và : hover ở đây được đóng gói trong biểu định kiểu Ít hơn , giúp đơn giản hóa đáng kể việc phân bổ trong biểu định kiểu CSS. Điều này rõ ràng khi xem CSS được tạo cho ví dụ mã này:

/* 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;
}

Vận hành

Các toán tử số học cộng (+), trừ (-), nhân (*) và chia (/) cũng có thể được sử dụng trong bảng định kiểu Less bằng cách áp dụng toán tử tương ứng cho bất kỳ giá trị số hoặc màu nào.

Điều này có nghĩa là bạn có thể dễ dàng tạo ra sự phụ thuộc lẫn nhau phức tạp giữa các giá trị của các phần tử khác nhau mà vẫn tồn tại ngay cả khi bạn thay đổi các giá trị cơ sở.

Nếu toán tử không thể hiển thị chuyển đổi hoặc không phù hợp, chuyển đổi sẽ tự động bị bỏ qua – ví dụ: nếu giá trị centimet được thêm vào giá trị pixel. Ví dụ sau cho bạn thấy cách sử dụng các toán tử trong Ít hơn:

// Less
@the-border: 1px;
@base-color: #111;
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
}

Các định nghĩa cơ bản cho đường viền (1px) và màu cơ bản (# 111), tương ứng với màu đen, cũng được áp dụng cho đầu trang và chân trang , theo đó ba toán tử ảnh hưởng đến các giá trị cơ sở:

Màu cơ bản được nhân với ba trong tiêu đề. Điều này dẫn đến giá trị # 333, tương đương với màu xám đậm.

Đường viền bên phải trong tiêu đề được cung cấp toán tử nhân * 2 và do đó rộng gấp đôi đường viền chuẩn (2px).

Màu cơ bản của footer cũng được thao tác bởi một nhà điều hành. Ở đây, giá trị hex # 003300 được thêm vào giá trị cơ sở # 111, tạo cho chân trang có màu xanh lục đậm (# 114411).

Kết quả ấn tượng cũng có thể được nhìn thấy trong mã CSS đã biên dịch:

/* CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
}

Chức năng

Ít hơn cũng thêm các chức năng vào CSS cung cấp nhiều tùy chọn: Ví dụ: bạn có thể thêm các mối quan hệ logic phức tạp với hàm if hoặc Boolean trong biểu định kiểu Less. Hoặc bạn có thể sử dụng các hàm không kém phần phức tạp cho các phép tính toán học như cosin, sin và tiếp tuyến.

Mặt khác, các chức năng cơ bản để xác định nhanh màu sắc (rgb, rgba, hsv, v.v.) hoặc các chức năng cho toán tử màu như độ tương phản, bão hòa / khử bão hòa hoặc làm sáng / tối cũng có thể thực hiện được.

Ví dụ: để tăng hoặc giảm độ bão hòa của một phần tử, bạn chỉ cần một giá trị màu và hàm bão hòa. Bằng cách chỉ định một tỷ lệ phần trăm (0–100%), bạn cũng có thể xác định mức độ bão hòa sẽ được thay đổi.

// Less
@red: #842210;
#header {
color: saturate(@red, 20%); ->#931801
}
#footer {
color: desaturate(@red, 10%); ->##7d2717
}

Trong ví dụ này, màu đỏ đậm được xác định với mã thập lục phân # 842210 trong biểu định kiểu Ít hơn và được nhập làm màu cho đầu trang và chân trang.

Nhưng mức tăng 20 phần trăm sẽ được áp dụng cho phần đầu trang, trong khi mã Ít hơn sẽ giảm độ bão hòa ở phần chân trang đi 10 phần trăm . Trong biểu định kiểu CSS, các hàm và biến màu (@red) được chuyển đổi và do đó chỉ có thể nhìn thấy các mã hex với mức độ bão hòa tương ứng:

/* CSS */
#header {
color: #931801
}
#footer {
color: #7d2717
}

6.Kết

Hướng dẫn ít hơn ngắn gọn này chỉ đề cập đến một phần nhỏ các tùy chọn làm cho bộ tiền xử lý CSS trở nên hữu ích. Khi bạn đã xác định các biến, mixin và các hàm khác, bạn có thể áp dụng chúng cho các phần tử mới trong biểu định kiểu của mình bất kỳ lúc nào – mà không cần bắt đầu lại từ đầu như thường xảy ra với mã CSS.

Nếu các giá trị như màu cơ bản thay đổi, bạn có thể dễ dàng điều chỉnh chúng mà không tốn nhiều công sức trong tài liệu Ít hoạt động – điều này cũng làm cho bộ tiền xử lý CSS trở thành một trợ giúp có giá trị cho việc trình bày lâu dài của một dự án web .

Nguồn tham khảo: https://www.ionos.com/digitalguide/websites/web-development/less-css-tutorial/

Nếu bạn copy bài viết này, vậy đừng quên ghi nguồn https://thietkewebcantho89.com/css-la-gi/ của https://thietkewebcantho89.com nhé