Tôi có nên sử dụng LESS CSS không?

Ít hơn (viết tắt của Leaner Style Sheets) là một phần mở rộng ngôn ngữ tương thích ngược cho CSS. Đây là tài liệu chính thức cho Less, ngôn ngữ và Less. js, công cụ JavaScript chuyển đổi kiểu Ít của bạn thành kiểu CSS

Bởi vì Less trông giống như CSS nên việc học nó thật dễ dàng. Ít hơn chỉ tạo ra một vài bổ sung thuận tiện cho ngôn ngữ CSS, đó là một trong những lý do khiến nó có thể học rất nhanh

• Để biết tài liệu chi tiết về các tính năng Ít ngôn ngữ hơn, hãy xem Tính năng
• Để biết danh sách các hàm Ít tích hợp hơn, hãy xem Hàm
• Để biết hướng dẫn sử dụng chi tiết, xem Sử dụng ít hơn. js
• Đối với các công cụ của bên thứ ba dành cho Ít hơn, hãy xem Công cụ

Ít thêm gì vào CSS?

Đây là khá tự giải thích

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

đầu ra

#header {
  width: 10px;
  height: 20px;
}

Tìm hiểu thêm về các biến

Mixin là một cách bao gồm ("trộn lẫn") một loạt các thuộc tính từ một bộ quy tắc này vào một bộ quy tắc khác. Vì vậy, nói rằng chúng ta có lớp sau

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Và chúng tôi muốn sử dụng các thuộc tính này bên trong các bộ quy tắc khác. Chà, chúng ta chỉ cần nhập tên của lớp mà chúng ta muốn các thuộc tính, như vậy

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

Các thuộc tính của lớp

#header {
  width: 10px;
  height: 20px;
}

5 sẽ xuất hiện trong cả

#header {
  width: 10px;
  height: 20px;
}

6 và

#header {
  width: 10px;
  height: 20px;
}

7. (Lưu ý rằng bạn cũng có thể sử dụng

#header {
  width: 10px;
  height: 20px;
}

8 làm mixin. )

Tìm hiểu thêm về Mixin

Ít hơn cung cấp cho bạn khả năng sử dụng lồng nhau thay vì hoặc kết hợp với xếp tầng. Giả sử chúng ta có CSS ​​sau

________số 8

Trong Ít hơn, chúng ta cũng có thể viết nó theo cách này

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Mã kết quả ngắn gọn hơn và bắt chước cấu trúc HTML của bạn

Bạn cũng có thể kết hợp bộ chọn giả với mixin của mình bằng phương pháp này. Đây là bản hack Clearfix cổ điển, được viết lại dưới dạng mixin (

#header {
  width: 10px;
  height: 20px;
}

9 đại diện cho bộ chọn gốc hiện tại)

#header {
  width: 10px;
  height: 20px;
}

1

Tìm hiểu thêm về bộ chọn gốc

Quy tắc lồng nhau và bong bóng

At-rules chẳng hạn như

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

0 hoặc

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

1 có thể được lồng vào nhau theo cách giống như bộ chọn. At-rule được đặt trên cùng và thứ tự tương đối so với các phần tử khác trong cùng một bộ quy tắc không thay đổi. Điều này được gọi là sủi bọt

#header {
  width: 10px;
  height: 20px;
}

4

đầu ra

#header {
  width: 10px;
  height: 20px;
}

5

Các phép toán số học

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

2,

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

3,

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

4,

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

5 có thể hoạt động trên bất kỳ số, màu sắc hoặc biến nào. Nếu có thể, các phép toán sẽ tính đến các đơn vị và chuyển đổi các số trước khi cộng, trừ hoặc so sánh chúng. Kết quả có loại đơn vị được nêu rõ ràng bên trái. Nếu việc chuyển đổi là không thể hoặc không có ý nghĩa, các đơn vị sẽ bị bỏ qua. Ví dụ về chuyển đổi không thể. px sang cm hoặc rad sang %

Phép nhân và phép chia không chuyển đổi số. Nó sẽ không có ý nghĩa trong hầu hết các trường hợp - chiều dài nhân với chiều dài sẽ cho diện tích và css không hỗ trợ chỉ định diện tích. Ít hơn sẽ hoạt động trên các số như hiện tại và gán loại đơn vị được nêu rõ ràng cho kết quả

Bạn cũng có thể làm số học trên màu sắc

Tuy nhiên, bạn có thể thấy Chức năng màu của Ít hữu ích hơn

từ 4. 0, Không phép chia nào được thực hiện ngoài dấu ngoặc khi sử dụng toán tử

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

5

Bạn có thể thay đổi cài đặt Math nếu bạn muốn cài đặt này luôn hoạt động, nhưng không nên dùng

calc() ngoại lệ

Đã phát hành v3. 0. 0

Để tương thích với CSS,

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

7 không đánh giá các biểu thức toán học, nhưng sẽ đánh giá các biến và toán học trong các hàm lồng nhau

Thoát cho phép bạn sử dụng bất kỳ chuỗi tùy ý nào làm thuộc tính hoặc giá trị biến. Mọi thứ bên trong

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

8 hoặc

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

9 đều được sử dụng nguyên trạng mà không có thay đổi nào ngoại trừ phép nội suy

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

4

kết quả trong

#header {
  width: 10px;
  height: 20px;
}

0

Lưu ý, kể từ Ít hơn 3. 5, bạn chỉ cần viết

#header {
  width: 10px;
  height: 20px;
}

1

Trong 3. 5+, nhiều trường hợp trước đây yêu cầu "thoát trích dẫn" là không cần thiết

Ít hơn cung cấp nhiều chức năng biến đổi màu sắc, thao tác chuỗi và làm toán. Chúng được ghi lại đầy đủ trong tài liệu tham khảo chức năng

Sử dụng chúng khá đơn giản. Ví dụ sau sử dụng tỷ lệ phần trăm để chuyển đổi 0. 5 đến 50%, tăng độ bão hòa của màu cơ bản lên 5% và sau đó đặt màu nền thành màu sáng hơn 25% và xoay 8 độ

Nhìn thấy. Chức năng tham khảo

(Đừng nhầm lẫn với CSS

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

0 hoặc bộ chọn không gian tên)

Đôi khi, bạn có thể muốn nhóm các mixin của mình, vì mục đích tổ chức hoặc chỉ để cung cấp một số đóng gói. Bạn có thể làm điều này khá trực quan trong Ít hơn. Giả sử bạn muốn nhóm một số mixin và biến trong

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

1, để sử dụng lại hoặc phân phối sau này

#header {
  width: 10px;
  height: 20px;
}

2

Bây giờ nếu chúng ta muốn trộn lớp

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

2 trong lớp

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

3 của mình, chúng ta có thể thực hiện

Ghi chú. nối thêm

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

4 vào không gian tên của bạn (e. g.

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

5) nếu bạn không muốn nó xuất hiện trong đầu ra CSS của mình i. e.

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

6

Kể từ Ít hơn 3. 5, bạn cũng có thể sử dụng mixin và bộ quy tắc làm bản đồ giá trị

#header {
  width: 10px;
  height: 20px;
}

3

Kết quả đầu ra này, như mong đợi

#header {
  width: 10px;
  height: 20px;
}

4

Xem thêm. bản đồ

Phạm vi trong Ít hơn rất giống với phạm vi của CSS. Các biến và mixin trước tiên được tìm kiếm cục bộ và nếu chúng không được tìm thấy, nó sẽ được kế thừa từ phạm vi "cha mẹ"

Giống như các thuộc tính tùy chỉnh CSS, các định nghĩa mixin và biến không cần phải đặt trước một dòng nơi chúng được tham chiếu. Vì vậy, mã Ít hơn sau giống hệt với ví dụ trước

Xem thêm. tải chậm

Có thể sử dụng cả nhận xét kiểu khối và nội tuyến

Nhập khẩu hoạt động khá nhiều như mong đợi. Bạn có thể nhập tệp

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

7 và tất cả các biến trong đó sẽ khả dụng. Phần mở rộng được chỉ định tùy chọn cho các tệp

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

7

Tại sao chúng tôi sử dụng LESS CSS?

Tôi nên sử dụng LESS hay SASS?

Tôi có thể sử dụng CSS trong LESS không?

Tại sao nên sử dụng LESS và SASS thay vì CSS?