Ít css trực tuyến hơn

TaborCtrl+EPand Viết tắt
Ctrl+DBalance Tag ra ngoài
Shift+Ctrl+Thẻ DBalance hướng vào trong
Shift+Ctrl+AWrap với chữ viết tắt
Ctrl+Alt+?Điểm Chỉnh sửa Tiếp theo
Ctrl+Alt+?Điểm Chỉnh sửa Trước đó
Ctrl+LChọn dòng
Ctrl+Shift+M Hợp nhất dòng
Ctrl+/Chuyển đổi Nhận xét
Ctrl+JSplit/Nối thẻ Ctrl+KXóa thẻ
Ctrl+Đánh giá Biểu thức Toán học
Ctrl+?Tăng số lên 1 Ctrl+?Giảm số đi 1
Alt+?Tăng số bằng 0. 1 Alt+?Số giảm đi 0. 1
Ctrl+Alt+?Tăng số lên 10 Ctrl+Alt+?Giảm số đi 10
Ctrl+. Chọn mục tiếp theo
Ctrl+,Chọn Mục Trước
Ctrl + BPhản ánh giá trị CSS

LESS là ngôn ngữ biểu định kiểu tiền xử lý động giúp chuyển đổi mã LESS thành CSS. Để biết thêm về LESS LESS Wikipedia Page

Bạn có thể làm gì với LESS Compiler?

• Công cụ này giúp bạn biên dịch mã LESS của mình thành biểu định kiểu xếp tầng một cách dễ dàng
• LESS Compiler hoạt động tốt trên Windows, MAC, Linux, Chrome, Firefox, Edge và Safari

Ví dụ về mã Trình biên dịch LESS

LESS Ngôn ngữ Thử đi

.combo {
	border: 1px solid red;
	color: #333333;
	.marked {
		font-weight: bold;
	}
}

CSS đã chuyển đổi

.combo {
  border: 1px solid red;
  color: #333333;
}
.combo .marked {
  font-weight: bold;
}

Dành cho người dùng nâng cao

ÍT URL bên ngoài

Tải LESS URL bên ngoài trong URL trình duyệt như thế này https. // làm đẹp mã. org/less-compiler?url=external-url

Í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;
}

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 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

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

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)

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

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

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

đầu ra

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

Các phép tính 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 Ít hữu ích hơn

từ 4. 0, Không có 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 nếu muốn cài đặt 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ừ

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

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 độ

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 )

Đô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 gộp 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 vào 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

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

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 ý cho các tệp

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

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

7

Làm cách nào để chuyển đổi CSS sang LESS trực tuyến?

Làm cách nào để tạo CSS từ LESS?

LESS CSS có phải là nguồn mở không?

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