LESS - Hướng dẫn nhanh

LESS là một trình xử lý trước CSS cho phép biểu định kiểu có thể tùy chỉnh, quản lý và có thể sử dụng lại cho trang web. LESS là một ngôn ngữ biểu định kiểu động giúp mở rộng khả năng của CSS. LESS cũng thân thiện với nhiều trình duyệt.

CSS Preprocessor là một ngôn ngữ kịch bản mở rộng CSS và được biên dịch thành cú pháp CSS thông thường để trình duyệt web của bạn có thể đọc được. Nó cung cấp các chức năng như biến , hàm , mixinhoạt động cho phép bạn xây dựng CSS động.

Tại sao lại ÍT?

Bây giờ chúng ta hãy hiểu tại sao chúng ta sử dụng LESS.

  • LESS hỗ trợ tạo CSS sạch hơn, thân thiện với nhiều trình duyệt nhanh hơn và dễ dàng hơn.

  • LESS được thiết kế bằng JavaScript và cũng được tạo ra để sử dụng trực tiếp , tính năng này biên dịch nhanh hơn các bộ xử lý trước CSS khác.

  • LESS giữ cho mã của bạn theo cách mô-đun thực sự quan trọng bằng cách làm cho nó có thể đọc được và dễ dàng thay đổi.

  • Có thể đạt được bảo trì nhanh hơn bằng cách sử dụng các biến LESS .

Lịch sử

LESS được thiết kế bởi Alexis Selliervào năm 2009. LESS là một mã nguồn mở. Phiên bản đầu tiên của LESS được viết bằng Ruby; trong các phiên bản sau, việc sử dụng Ruby đã được thay thế bằng JavaScript.

Đặc trưng

  • Mã sạch hơn và dễ đọc hơn có thể được viết theo cách có tổ chức.

  • Chúng ta có thể xác định kiểu và nó có thể được sử dụng lại trong toàn bộ mã.

  • LESS dựa trên JavaScript và là một tập hợp siêu CSS.

  • LESS là một công cụ nhanh nhẹn giúp giải quyết vấn đề dư thừa mã.

Ưu điểm

  • LESS dễ dàng tạo CSS hoạt động trên các trình duyệt.

  • LESS cho phép bạn viết mã tốt hơn và được tổ chức tốt bằng cách sử dụng lồng nhau .

  • Việc bảo trì có thể đạt được nhanh hơn bằng cách sử dụng các biến .

  • LESS cho phép bạn sử dụng lại toàn bộ các lớp một cách dễ dàng bằng cách tham chiếu chúng trong bộ quy tắc của bạn.

  • LESS cung cấp việc sử dụng các hoạt động giúp mã hóa nhanh hơn và tiết kiệm thời gian.

Nhược điểm

  • Cần có thời gian để tìm hiểu nếu bạn chưa quen với tiền xử lý CSS.

  • Do sự liên kết chặt chẽ giữa các mô-đun, cần phải nỗ lực nhiều hơn để sử dụng lại và / hoặc kiểm tra các mô-đun phụ thuộc.

  • LESS có ít khuôn khổ hơn so với bộ tiền xử lý cũ hơn như SASS, bao gồm các khuôn khổ Compass , GravitySusy .

Trong chương này, chúng ta sẽ hiểu từng bước cách cài đặt LESS.

Yêu cầu hệ thống cho LESS

  • Operating System - Đa nền tảng

  • Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

Cài đặt LESS

Bây giờ chúng ta hãy hiểu việc cài đặt LESS.

Step 1 - Chúng tôi cần NodeJsđể chạy ÍT các ví dụ. Để tải xuống NodeJs, hãy mở liên kếthttps://nodejs.org/en/, bạn sẽ thấy một màn hình như hình dưới đây -

Tải xuống phiên bản Tính năng mới nhất của tệp zip.

Step 2- Chạy thiết lập để cài đặt Node.js trên hệ thống của bạn.

Step 3- Tiếp theo, Cài đặt LESS trên máy chủ thông qua NPM (Node Package Manager). Chạy lệnh sau trong dấu nhắc lệnh.

npm install -g less

Step 4 - Sau khi cài đặt thành công LESS, bạn sẽ thấy các dòng sau trên dấu nhắc lệnh:

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

Thí dụ

Sau đây là một ví dụ đơn giản về LESS.

xin chào.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

Bây giờ chúng ta hãy tạo một tệp style.less khá giống với CSS, điểm khác biệt duy nhất là nó sẽ được lưu với phần mở rộng .less . Cả hai tệp, .html.less phải được tạo bên trong thư mụcnodejs.

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

Biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Khi bạn chạy lệnh trên, nó sẽ tự động tạo tệp style.css . Bất cứ khi nào bạn thay đổi tệp LESS, bạn cần chạy lệnh trên trongcmdvà sau đó tệp style.css sẽ được cập nhật.

Tệp style.css sẽ có mã sau khi bạn chạy lệnh trên:

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

Đầu ra

Bây giờ chúng ta hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -

  • Lưu mã html ở trên trong hello.htm tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Sự miêu tả

Nó là một nhóm các thuộc tính CSS cho phép sử dụng các thuộc tính của một lớp này vào một lớp khác và bao gồm tên lớp làm thuộc tính của nó. Trong LESS, bạn có thể khai báo mixin theo cách giống như kiểu CSS bằng cách sử dụng bộ chọn lớp hoặc id. Nó có thể lưu trữ nhiều giá trị và có thể được sử dụng lại trong mã bất cứ khi nào cần thiết.

Thí dụ

Ví dụ sau minh họa việc sử dụng các quy tắc lồng nhau trong tệp LESS -

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>First Heading</h1>
         <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
         <div class = "myclass">
            <h1>Second Heading</h1>
            <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
         </div>
      </div>
   </body>
</html>

Tiếp theo, tạo tệp style.less .

style.less

.container {
   h1 {
      font-size: 25px;
      color:#E45456;
   }
   p {
      font-size: 25px;
      color:#3C7949;
   }

   .myclass {
      h1 {
         font-size: 25px;
         color:#E45456;
      }
      p {
         font-size: 25px;
         color:#3C7949;
      }
   }
}

Bạn có thể biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

.container h1 {
   font-size: 25px;
   color: #E45456;
}

.container p {
   font-size: 25px;
   color: #3C7949;
}

.container .myclass h1 {
   font-size: 25px;
   color: #E45456;
}

.container .myclass p {
   font-size: 25px;
   color: #3C7949;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong nested_rules.html tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Sự miêu tả

Bạn có thể lồng các chỉ thị như mediakeyframe theo cùng một cách, như cách bạn lồng các bộ chọn. Bạn có thể đặt chỉ thị lên trên và các phần tử tương đối của nó sẽ không bị thay đổi bên trong tập quy tắc của nó. Đây được gọi là quá trình sủi bọt.

Thí dụ

Ví dụ sau minh họa việc sử dụng các chỉ thị lồng nhau và tạo bọt trong tệp LESS -

<html>
   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Tiếp theo, tạo tệp style.less .

style.less

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

Bạn có thể biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong nested_directives_bubbling.html tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Sự miêu tả

LESS cung cấp hỗ trợ cho một số phép toán số học như cộng (+), trừ (-), nhân (*) và chia (/) và chúng có thể hoạt động trên bất kỳ số, màu hoặc biến nào. Các phép toán tiết kiệm rất nhiều thời gian khi bạn đang sử dụng các biến và bạn cảm thấy như đang làm việc với toán học đơn giản.

Thí dụ

Ví dụ sau minh họa việc sử dụng các thao tác trong tệp LESS -

<html>
   <head>
      <title>Less Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Operations</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Tiếp theo, tạo tệp style.less .

style.less

@fontSize: 10px;
.myclass {
   font-size: @fontSize * 2;
   color:green;
}

Bạn có thể biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong operations.html tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Sự miêu tả

Nó xây dựng các bộ chọn động và sử dụng thuộc tính hoặc giá trị biến dưới dạng chuỗi tùy ý.

Thí dụ

Ví dụ sau minh họa việc sử dụng tính năng thoát trong tệp LESS -

<html>
   <head>
      <title>Less Escaping</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Escaping</h1>
      <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

Bây giờ tạo tệp style.less .

style.less

p {
   color: ~"green";
}

Bạn có thể biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Thực hiện lệnh trên, nó sẽ tự động tạo tệp style.css với đoạn mã sau:

style.css

p {
   color: green;
}

Mọi thứ được viết bên trong ~ "some_text" sẽ được hiển thị dưới dạng some_text sau khi biên dịch mã LESS thành mã CSS.

Đầu ra

Bây giờ chúng ta hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -

  • Lưu mã html ở trên trong escaping.html tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Sự miêu tả

LESS ánh xạ mã JavaScript với thao tác các giá trị và sử dụng các hàm được xác định trước để thao tác các khía cạnh của phần tử HTML trong biểu định kiểu. Nó cung cấp một số chức năng để thao tác màu sắc như chức năng tròn, chức năng sàn, chức năng ceil, chức năng phần trăm, v.v.

Thí dụ

Ví dụ sau minh họa việc sử dụng các hàm trong tệp LESS -

<html>
   <head>
      <title>Less Functions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Functions</h1>
      <p class = "mycolor">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Bây giờ tạo tệp style.less .

style.less

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

Bạn có thể biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Bây giờ thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong functions.html tập tin.

  • Mở tệp HTML này trong trình duyệt, hiển thị bạn sẽ nhận được kết quả sau.

Sự miêu tả

Không gian tên được sử dụng để nhóm các mixin dưới một tên chung. Sử dụng không gian tên, bạn có thể tránh xung đột về tên và đóng gói một nhóm hỗn hợp từ bên ngoài.

Thí dụ

Ví dụ sau minh họa việc sử dụng không gian tên và trình truy cập trong tệp LESS -

<html>
   <head>
      <title>Less Namespaces and Accessors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Namespaces and Accessors</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Bây giờ tạo tệp style.less .

style.less

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

Bạn có thể biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong namespaces_accessors.html tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Sự miêu tả

Phạm vi biến chỉ định vị trí của biến khả dụng. Các biến sẽ được tìm kiếm từ phạm vi cục bộ và nếu chúng không có sẵn, thì trình biên dịch sẽ tìm kiếm từ phạm vi mẹ.

Thí dụ

Ví dụ sau minh họa việc sử dụng không gian tên và trình truy cập trong tệp LESS -

<html>
   <head>
      <title>Less Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Bây giờ tạo tệp style.less .

style.less

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

Bạn có thể biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong scope.html tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Sự miêu tả

Nhận xét làm cho mã rõ ràng và dễ hiểu đối với người dùng. Bạn có thể sử dụng cả kiểu khối và chú thích nội tuyến trong mã, nhưng khi bạn biên dịch mã LESS, chú thích dòng đơn sẽ không xuất hiện trong tệp CSS.

Thí dụ

Ví dụ sau minh họa việc sử dụng chú thích trong tệp LESS -

<html>
   <head>
      <title>Less Comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Comments</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
   </body>
</html>

Bây giờ tạo tệp style.less .

style.less

/* It displays the
green color! */
.myclass {
   color: green;
}

// It displays the blue color
.myclass1 {
   color: red;
}

Bạn có thể biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Bây giờ thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

/* It displays the
green color! */
.myclass {
   color: green;
}

.myclass1 {
   color: red;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong comments.html tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Sự miêu tả

Nó được sử dụng để nhập nội dung của các tệp LESS hoặc CSS.

Thí dụ

Ví dụ sau minh họa việc sử dụng tính năng nhập trong tệp LESS -

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

Bây giờ tạo tệp myfile.less .

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

Bây giờ tạo tệp style.less .

style.less

@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

Tệp myfile.less sẽ được nhập vào style.less từ đường dẫnhttps://www.tutorialspoint.com/less/myfile.less

Bạn có thể biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong importing.html tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Trong chương này, chúng ta sẽ thảo luận về các biến ở mức ÍT. LESS cho phép các biến được xác định bằng ký hiệu @. Việc gán biến được thực hiện vớicolon(:).

Bảng sau đây trình bày chi tiết việc sử dụng các biến LESS .

Sr.No. Sử dụng và mô tả biến
1 Tổng quat

Có thể tránh lặp lại cùng một giá trị nhiều lần bằng cách sử dụng các biến .

2 Nội suy biến

Các biến cũng có thể được sử dụng ở những nơi khác như tên bộ chọn , tên thuộc tính , URL và câu lệnh @import .

3 Tên biến

Chúng ta có thể định nghĩa các biến với một tên biến bao gồm một giá trị.

4 Đang tải chậm

Trong tải chậm, các biến có thể được sử dụng ngay cả khi chúng không được sử dụng.

5 Các biến mặc định

Biến mặc định chỉ có khả năng đặt một biến khi nó chưa được đặt. Tính năng này không bắt buộc vì các biến có thể dễ dàng bị ghi đè bằng cách xác định chúng sau đó.

Mở rộng là một lớp giả LESS giúp mở rộng các kiểu bộ chọn khác trong một bộ chọn bằng cách sử dụng :extend bộ chọn.

Thí dụ

Ví dụ sau minh họa việc sử dụng mở rộng trong tệp LESS -

expand_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

Tiếp theo, tạo tệp style.less .

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

Bạn có thể biên dịch extend.less tập tin để extend.css bằng cách sử dụng lệnh sau -

lessc style.less style.css

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong extend_syntax.htm tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Mở rộng cú pháp

Phần mở rộng được đặt vào bộ quy tắc hoặc gắn vào bộ chọn. Nó tương tự như một lớp giả chứa một hoặc nhiều lớp, được phân tách bằng dấu phẩy. Sử dụng từ khóa tùy chọnall, mỗi bộ chọn có thể được theo sau.

Thí dụ

Ví dụ sau minh họa việc sử dụng cú pháp mở rộng trong tệp LESS -

expand_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

Bây giờ tạo tệp style.less .

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

Bạn có thể biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong extend_syntax.htm tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Bảng sau liệt kê tất cả các loại cú pháp mở rộng mà bạn có thể sử dụng trong LESS -

Sr.No. Loại & Mô tả
1 Mở rộng được đính kèm với bộ chọn

Phần mở rộng được kết nối với một bộ chọn trông tương tự như một lớp giả với bộ chọn là tham số.

2 Mở rộng bộ quy tắc nội bộ

Các &:extend(selector) cú pháp có thể được đặt bên trong phần thân của ruleet.

3 Mở rộng bộ chọn lồng nhau

Các bộ chọn lồng nhau được so khớp bằng cách sử dụng bộ chọn mở rộng .

4 So khớp chính xác với phần mở rộng

Theo mặc định, extend tìm kiếm sự phù hợp chính xác giữa các bộ chọn.

5 Biểu thức thứ n

Dạng biểu thức thứ n rất quan trọng trong việc mở rộng khác, nó coi bộ chọn là khác.

6 Mở rộng "tất cả"

Khi từ khóa tất cả được xác định cuối cùng trongextend đối số thì LESS khớp với bộ chọn đó như một phần của bộ chọn khác.

7 Nội suy bộ chọn với phần mở rộng

Các extend có thể được kết nối với bộ chọn nội suy.

số 8 Phạm vi / Mở rộng bên trong @media

Phần mở rộng chỉ khớp với bộ chọn có trong cùng một khai báo phương tiện.

9 Phát hiện trùng lặp

Nó không thể phát hiện sự trùng lặp của các bộ chọn.

Sau đây là các loại Trường hợp sử dụng cho Mở rộng

Sr.No. Loại & Mô tả
1 Trường hợp sử dụng cổ điển

Trường hợp sử dụng cổ điển được sử dụng để tránh thêm lớp cơ sở trong LESS.

2 Giảm kích thước CSS

Phần mở rộng được sử dụng để di chuyển bộ chọn đến các thuộc tính bạn muốn sử dụng; điều này giúp giảm mã được tạo css.

3 Kết hợp phong cách / Mixin nâng cao hơn

Sử dụng mở rộng, chúng ta có thể kết hợp các kiểu giống nhau của một bộ chọn cụ thể vào bộ chọn khác.

Mixin tương tự như các hàm trong ngôn ngữ lập trình. Mixin là một nhóm các thuộc tính CSS cho phép bạn sử dụng các thuộc tính của một lớp này cho một lớp khác và bao gồm tên lớp làm thuộc tính của nó. Trong LESS, bạn có thể khai báo một mixin theo cách tương tự như kiểu CSS bằng cách sử dụng bộ chọn lớp hoặc id. Nó có thể lưu trữ nhiều giá trị và có thể được sử dụng lại trong mã bất cứ khi nào cần thiết.

Bảng sau đây trình bày chi tiết việc sử dụng LESS mixin .

Sr.No. Cách sử dụng & Mô tả Mixins
1 Không xuất ra Mixin

Mixin có thể được thực hiện để biến mất trong đầu ra bằng cách chỉ cần đặt dấu ngoặc đơn sau nó.

2 Bộ chọn trong Mixin

Các mixin không chỉ có thể chứa các thuộc tính mà còn có thể chứa các bộ chọn.

3 Không gian tên

Không gian tên được sử dụng để nhóm các mixin dưới một tên chung.

4 Không gian tên được bảo vệ

Khi áp dụng bảo vệ cho không gian tên, các mixin do nó xác định chỉ được sử dụng khi điều kiện bảo vệ trả về true.

5 Từ khóa quan trọng

Các ! Important từ khóa được sử dụng để ghi đè lên các tài sản cụ thể.

Thí dụ

Ví dụ sau minh họa việc sử dụng mixin trong tệp LESS -

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Mixins</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "p1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
      <p class = "p3">LESS is cross browser friendly.</p>
   </body>
</html>

Tiếp theo, tạo tệp style.less .

style.less

.p1 {
   color:red;
}

.p2 {
   background : #64d9c0;
   .p1();
}

.p3 {
   background : #LESS520;
  .p1;
}

Bạn có thể biên dịch style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

.p1 {
   color: red;
}

.p2 {
   background: #64d9c0;
   color: red;
}

.p3 {
   background: #LESS520;
   color: red;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong less_mixins.html tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Dấu ngoặc đơn là tùy chọn khi gọi mixin. Trong ví dụ trên, cả hai câu lệnh.p1();.p1; Làm điều tương tự.

Sự miêu tả

Mixin tham số sử dụng một hoặc nhiều tham số mở rộng chức năng của LESS bằng cách lấy các đối số và thuộc tính của nó để tùy chỉnh đầu ra mixin khi được trộn vào một khối khác.

Ví dụ: hãy xem xét một đoạn mã LESS đơn giản -

.border(@width; @style; @color) {
   border: @width @style @color;
}

.myheader {
   .border(2px; dashed; green);
}

Ở đây chúng tôi đang sử dụng mixin tham số là .border với ba tham số - chiều rộng, kiểu dáng và màu sắc. Sử dụng các tham số này, bạn có thể tùy chỉnh đầu ra mixin với giá trị tham số đã truyền.

Bảng sau mô tả các loại mixin tham số khác nhau cùng với mô tả.

Sr.No. Loại & Mô tả
1 Mixin với nhiều tham số

Các tham số có thể được phân tách bằng dấu phẩy hoặc dấu chấm phẩy.

2 Tham số được đặt tên

Mixin cung cấp các giá trị tham số thay vì vị trí bằng cách sử dụng tên của chúng.

3 @arguments Variable

Khi một mixin được gọi, @arguments bao gồm tất cả các đối số được truyền vào.

4 Đối số nâng cao và biến @rest

Mixin nhận số lượng đối số thay đổi bằng cách sử dụng .....

5 Khớp mẫu

Thay đổi hành vi của mixin bằng cách chuyển các tham số cho nó.

Trong chương này, chúng ta sẽ hiểu tầm quan trọng của Mixins as Functions. Giống như các hàm, các mixin có thể được lồng vào nhau, có thể chấp nhận các tham số và cũng có thể trả về các giá trị.

The following table demonstrates the use of mixins as functions in details.

Sr.No. Mixins usage & Description
1 Mixin scope

Mixins consist of variables; these can be used in caller's scope and are visible.

2 Mixin and return values

Mixins are similar to functions and the variables that are defined in a mixin will behave as the return values.

3 Mixin inside another mixin

Whenever a mixin is defined inside another mixin, it can be used as return value too.

Description

Detached ruleset contains rulesets such as properties, nested rulesets, variables declaration, mixins, etc. It is stored in a variable and included in another structure; all the properties of the ruleset get copied to that structure.

Example

The following example shows how to pass a ruleset to mixin in the LESS file −

passing_ruleset.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

Next, create the style.less file.

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

Output

Follow these steps to see how the above code works −

  • Save the above html code in the passing_ruleset.htm file.

  • Open this HTML file in a browser, the following output will get displayed.

Scoping

All variables and mixins in detached ruleset are available wherever the ruleset called or defined. Otherwise, both the caller and the definition scopes are available by default. The declaration scope takes the priority when both scopes contain same mixin or variable. Detached ruleset body is defined in the declaration scope. It does not change its scope after the detached ruleset is copied from one variable to another.

The following table lists all the types of scope −

Sr.No. Types & Description
1 Definition and Caller Scope Visibility

Variables and mixins are defined inside the detached ruleset.

2 Referencing Won't Modify Detached Ruleset Scope

Just giving the references, the ruleset does not access to any new scopes.

3 Unlocking Will Modify Detached Ruleset Scope

The detached ruleset can access to scope by being imported into it.

Description

The @import directive is used to import the files in the code. It spreads the LESS code over different files and allows to maintain the structure of code easily. You can put the @import statements anywhere in the code.

For instance, you can import the file by using @import keyword as @import "file_name.less".

File Extensions

You can use the @import statements depending on the different file extensions such as −

  • If you are using .css extension, then it will be considered as CSS and the @import statement remains as it is.

  • If it contains any other extension, then it will be considered as LESS and will be imported.

  • If there is no LESS extension, then it will appended and included as imported LESS file.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

Example

The following example demonstrates the use of variable in the SCSS file −

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

Next, create the import_dir.less file.

import_dir.less

.myline {
   font-size: 20px;
}

Now, create the style.less file.

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

The import_dir.less file will get imported into style.less file from the path https://www.tutorialspoint.com/less/import_dir.less.

You can compile the style.less to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Output

Follow these steps to see how the above code works −

  • Save the above html code in the import_directives.html file.

  • Open this HTML file in a browser, the following output will get displayed.

In this chapter, we will understand the importance of Import Options in LESS. LESS offers the @import statement that allows the style sheets to import both LESS and CSS style sheets.

The following tables lists the import directives that will be implemented in the import statements.

Sr.No. Import options & Description
1 reference

It uses a LESS file only as reference and will not output it.

2 inline

It enables you to copy your CSS into the output without being processed.

3 less

It will treat the imported file as the regular LESS file, despite whatever may be the file extension.

4 css

It will treat the imported file as the regular CSS file, despite whatever may be the file extension.

5 once

It will import the file only one time.

6 multiple

It will import the file multiple times.

7 optional

It continues compiling even though the file to import is not found.

More than one keyword is allowed to use in the @import statement, however you have to use commas to seperate the keywords.

For instance −

@import (less, optional) "custom.css";

Description

If you want to match simple values or number of arguments on expressions, then you can make use of guards. It is associated with mixin declaration and includes condition that is attached to a mixin. Each mixin will have one or more guards which are separated by comma; a guard must be enclosed within parentheses. LESS uses guarded mixins instead of if/else statements and performs calculations to specify matched mixin.

The following table describes the different types of mixins guards along with description.

Sr.No. Types & Description
1 Guard Comparison Operators

You can use the comparison operator (=) to compare numbers, strings, identifiers, etc.

2 Guard Logical Operators

You can use the and keyword to work around logical operators with guards.

3 Type Checking Functions

It contains the built-in functions to determine the value types for matching mixins.

4 Conditional Mixins

LESS uses the default function to match mixin with other mixing matches.

Example

The following example demonstrates the use of mixin guards in the LESS file −

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

Now, create the style.less file.

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

You can compile the style.less to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

Output

Follow these steps to see how the above code works −

  • Save the above html code in the mixin-guard.html file.

  • Open this HTML file in a browser, the following output will get displayed.

Description

Guards are used to match simple values or a number of arguments on expressions. It is applied to the CSS selectors. It is syntax for declaring mixin and calling it immediately. To successfully bring out the if type statement; join this with feature &, which allows you to group multiple guards.

Example

The following example demonstrates the use of css guard in the LESS file −

css_guard.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

Next, create the style.less file.

style.less

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

.style {
   background-color: blue;
   color: white;
}

Output

Follow these steps to see how the above code works −

  • Save the above html code in the css_guard.htm file.

  • Open this HTML file in a browser, the following output will get displayed.

In this chapter, we will understand how Loops work in LESS. Loops statement allows us to execute a statement or group of statements multiple times. Various iterative/loop structures can be created when recursive mixin combine with Guard Expressions and Pattern Matching.

Example

The following example demonstrates the use of loops in the LESS file −

loop_example.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web. </p>
      </div>
   </body>
</html>

Next, create the style.less file.

style.less

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);
}

div {
   .cont(7);
}

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong loop_example.htm tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Sự miêu tả

Tính năng này trong LESS cho phép thêm các giá trị vào danh sách được phân tách bằng dấu phẩy hoặc dấu cách từ nhiều thuộc tính bằng cách sử dụng một thuộc tính. Nó có thể được sử dụng cho các thuộc tính nền và chuyển đổi.

Bảng sau đây mô tả hai loại chức năng được hỗ trợ bởi tính năng Hợp nhất.

Sr.No. Loại & Mô tả
1 Dấu phẩy

Nó thêm giá trị tài sản ở cuối.

2 Không gian

Nó thêm giá trị tài sản với không gian.

Trong chương này, hãy để chúng tôi hiểu cách Parent Selectorscông việc. Có thể tham chiếu bộ chọn cha bằng cách sử dụng&(dấu và) toán tử. Các bộ chọn chính của quy tắc lồng nhau được đại diện bởi& toán tử và được sử dụng khi áp dụng một lớp sửa đổi hoặc lớp giả cho một bộ chọn hiện có.

Bảng sau đây cho thấy các loại bộ chọn mẹ:

Sr.No. Loại & Mô tả
1 Nhiều &

Các & sẽ đại diện cho bộ chọn gần nhất và cũng là tất cả các bộ chọn mẹ.

2 Thay đổi Thứ tự Bộ chọn

Việc thêm một bộ chọn cho các bộ chọn kế thừa (cha) sẽ hữu ích khi thứ tự bộ chọn được thay đổi.

3 Combinatorial Explosion

Các & cũng có thể tạo ra tất cả các hoán vị có thể có của các bộ chọn trong một danh sách được phân tách bằng dấu phẩy.

Thí dụ

Ví dụ sau minh họa việc sử dụng bộ chọn cha trong tệp LESS -

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

Tiếp theo, tạo tệp style.less .

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

Bạn có thể biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

Trong ví dụ trên, & đề cập đến bộ chọn a.

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

  • Lưu mã html ở trên trong parent_selector1.htm tập tin.

  • Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Các selectors Chánh điều hành có nhiều công dụng như thế nào, khi bạn cần phải kết hợp selectors sự cai trị lồng nhau trong cách nào khác hơn so với mặc định. Một cách sử dụng điển hình khác của&là tạo tên lớp lặp đi lặp lại. Để biết thêm thông tin bấm vào đây .

Các chức năng khác bao gồm một nhóm các chức năng khác nhau.

Bảng sau liệt kê tất cả các loại hàm sai:

Sr.No. Chức năng & Mô tả
1 màu sắc

Nó là một chuỗi đại diện cho màu sắc.

2 kích thước ảnh

Nó được sử dụng để kiểm tra kích thước của hình ảnh từ tệp.

3 Chiều rộng hình ảnh

Nó kiểm tra chiều rộng của hình ảnh từ tệp.

4 hình ảnh - chiều cao

Nó kiểm tra chiều cao của hình ảnh từ tệp.

5 đổi

Một số được chuyển đổi từ đơn vị này sang đơn vị khác.

6 dữ liệu - uri

Tiểu dữ liệu là lược đồ định danh tài nguyên (URI) thống nhất lấy nội tuyến tài nguyên trên các trang web.

7 mặc định

Hàm mặc định chỉ trả về true khi nó có sẵn bên trong điều kiện bảo vệ và không khớp với bất kỳ mixin nào khác.

số 8 đơn vị

Hàm mặc định chỉ trả về true khi nó có sẵn bên trong điều kiện bảo vệ và không khớp với bất kỳ mixin nào khác

9 get - đơn vị

Hàm get - unit trả về đơn vị của nó trong đó đối số có mặt với số và đơn vị.

10 svg - gradient

svg-gradient là sự chuyển đổi màu này sang màu khác. Nó có thể thêm nhiều màu vào cùng một phần tử.

Sự miêu tả

Ít hỗ trợ một số hàm chuỗi như được liệt kê bên dưới -

  • escape
  • e
  • % định dạng
  • replace

Bảng sau đây mô tả các hàm chuỗi ở trên cùng với mô tả.

Sr.No. Loại & Mô tả Thí dụ
1

Escape

Nó mã hóa một chuỗi hoặc thông tin bằng cách sử dụng mã hóa URL trên các ký tự đặc biệt. Bạn không thể mã hóa một số ký tự như, , / , ? , @ , & , + , ~ , ! , $ , ' và một số ký tự bạn có thể mã hóa chẳng hạn như \ , # , ^ , ( , ) , { , } , : , > , < , ] , [=.

escape("Hello!! welcome to Tutorialspoint!")

Nó xuất ra chuỗi thoát là -

Hello%21%21%20welcome%20to%20Tutorialspoint%21
2

e

Nó là một hàm chuỗi sử dụng chuỗi làm tham số và trả về thông tin mà không có dấu ngoặc kép. Nó là một lối thoát CSS sử dụng các giá trị và số đã thoát ~ "một số nội dung" làm tham số.

filter: e("Hello!! welcome to Tutorialspoint!");

Nó xuất ra chuỗi thoát là -

filter: Hello!! welcome to Tutorialspoint!;
3

% format

Hàm này định dạng một chuỗi. Nó có thể được viết với định dạng sau:

%(string, arguments ...)
format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");

Nó xuất ra chuỗi được định dạng là -

format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";
4

replace

Nó được sử dụng để thay thế văn bản trong một chuỗi. Nó sử dụng một số tham số -

  • string - Nó tìm kiếm chuỗi và thay thế trong.

  • pattern - Nó tìm kiếm mẫu biểu thức chính quy.

  • replacement - Nó thay thế chuỗi phù hợp với mẫu.

  • flags - Đây là các cờ biểu thức chính quy tùy chọn.

replace("Welcome, val?", "val\?", "to Tutorialspoint!");

Nó thay thế chuỗi thành -

"Welcome, to Tutorialspoint!"

Sự miêu tả

LESS bao gồm các hàm danh sách được sử dụng để chỉ định độ dài của danh sách và vị trí của giá trị trong danh sách.

Bảng sau liệt kê các hàm Danh sách được sử dụng trong LESS -

Sr.No. Mô tả chức năng
1 Chiều dài

Nó sẽ lấy một danh sách giá trị được phân tách bằng dấu phẩy hoặc dấu cách làm tham số.

2 Trích xuất

Nó sẽ trả về giá trị tại một vị trí được chỉ định trong danh sách.

Sự miêu tả

Các hàm toán học bao gồm các phương thức được sử dụng để thực hiện các phép toán số như làm tròn, căn bậc hai, giá trị lũy thừa, mô đun, tỷ lệ phần trăm, v.v.

Bảng sau đây cho thấy các Hàm Toán học được sử dụng trong LESS -

Sr.No. Mô tả chức năng Thí dụ
1

ceil

Nó làm tròn số thành số nguyên cao nhất tiếp theo.

ceil(0.7)

nó làm tròn số thành -

1
2

floor

Nó làm tròn số xuống số nguyên thấp nhất tiếp theo.

floor(3.3)

nó làm tròn số thành -

3
3

percentage

Nó chuyển đổi số dấu phẩy động thành chuỗi phần trăm.

percentage(0.2)

nó chuyển đổi số thành chuỗi phần trăm dưới dạng -

20%
4

round

Nó làm tròn một số dấu phẩy động.

round(3.77)

nó chuyển đổi số thành giá trị làm tròn là -

4
5

sqrt

Nó trả về căn bậc hai của một số.

sqrt(25)

nó định nghĩa căn bậc hai của một số là -

5
6

abs

Nó cung cấp giá trị tuyệt đối của một số.

abs(30ft)

nó hiển thị giá trị tuyệt đối là -

30ft
7

sin

Nó trả về radian trên các số.

sin(2)

nó tính toán giá trị sin là -

0.90929742682
số 8

asin

Nó chỉ định arcsine (nghịch đảo của sin) của một số trả về giá trị giữa -pi / 2 và pi / 2.

asin(1)

nó tính toán giá trị asin là -

1.5707963267948966
9

cos

Nó trả về cosine của giá trị được chỉ định và xác định radian trên các số không có đơn vị.

cos(2)

nó tính toán giá trị cos là -

-0.4161468365471424
10

acos

Nó chỉ định arccosine (nghịch đảo của cosine) của một số trả về giá trị giữa 0 và pi.

acos(1)

nó tính toán giá trị acos là -

0
11

tan

Nó chỉ định tang của số.

tan(60)

nó tính toán giá trị tan là -

0.320040389379563
12

atan

Nó chỉ định arctangent (nghịch đảo của tiếp tuyến) của một số cụ thể.

atan(1)

nó hiển thị giá trị atan là -

0.7853981633974483
13

pi

Nó trả về giá trị pi.

pi()

nó xác định giá trị pi là -

3.141592653589793
14

pow

Nó chỉ định giá trị của đối số đầu tiên được nâng lên thành sức mạnh của đối số thứ hai.

pow(3,3)

nó chỉ định giá trị sức mạnh là -

27
15

mod

Nó trả về mô-đun của đối số đầu tiên đối với đối số thứ hai. Nó cũng xử lý các số âm và dấu phẩy động.

mod(7,3)

nó trả về giá trị môđun là -

1
16

min

Nó chỉ định giá trị nhỏ nhất của một hoặc nhiều đối số.

min(70,30,45,20)

nó trả về giá trị nhỏ nhất là -

20
17

max

Nó chỉ định giá trị cao nhất của một hoặc nhiều đối số.

max(70,30,45,20)

nó trả về giá trị lớn nhất là -

70

Trong chương này, chúng ta sẽ hiểu tầm quan trọng của Type Functionstrong LESS. Chúng được sử dụng để xác định loại giá trị.

Bảng sau đây cho thấy các Hàm Loại được sử dụng trong LESS.

Sr.No. Nhập Chức năng & Mô tả Thí dụ
1

isnumber

Nó nhận một giá trị làm tham số và trả về true , nếu đó là một số hoặc false nếu không.

isnumber(1234);       // true
isnumber(24px);       // true
isnumber(7.8%);       // true
isnumber(#fff);       // false
isnumber(red);        // false
isnumber("variable"); // false
isnumber(keyword);    // false
isnumber(url(...));   // false
2

isstring

Nó nhận một giá trị làm tham số và trả về true , nếu đó là một chuỗi hoặc false nếu không.

isstring("variable"); // true
isstring(1234);       // false
isstring(24px);       // false
isstring(7.8%);       // false
isstring(#fff);       // false
isstring(red);        // false
isstring(keyword);    // false
isstring(url(...));   // false
3

iscolor

Nó nhận một giá trị làm tham số và trả về true , nếu giá trị là một màu hoặc false nếu không.

iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false
4

iskeyword

Nó nhận một giá trị làm tham số và trả về true , nếu giá trị là một từ khóa hoặc false nếu không.

iskeyword(keyword);   // true
iskeyword(1234);      // false
iskeyword(24px);      // false
iskeyword(7.8%);      // false
iskeyword(#fff);      // false
iskeyword(red) ;      // false
iskeyword("variable");// false
iskeyword(url(...));  // false
5

isurl

Nó nhận một giá trị làm tham số và trả về true , nếu giá trị là url hoặc false nếu không.

isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false
6

ispixel

Nó nhận một giá trị làm tham số và trả về true , nếu giá trị là một số tính bằng pixel hoặc false nếu ngược lại.

ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false
7

isem

Nó nhận một giá trị làm tham số và trả về true , nếu giá trị là giá trị em hoặc false nếu không.

isem(0.5em);            // true
isem(1234);             // false
isem(24px);             // false
isem(keyword);          // false
isem(#fff);             // false
isem(red) ;             // false
isem("variable");       // false
isem(url(...));         // false
số 8

ispercentage

Nó nhận một giá trị làm tham số và trả về true , nếu giá trị tính theo phần trăm hoặc trả về false , nếu giá trị không tính theo phần trăm.

ispercentage(7.5%);       // true
ispercentage(url(...));   // false
ispercentage(keyword);    // false
ispercentage(1234);       // false
ispercentage(24px);       // false
ispercentage(#fff);       // false
ispercentage(red) ;       // false
ispercentage("variable"); // false
9

isunit

Nó trả về true nếu một giá trị là một số trong các đơn vị được chỉ định được cung cấp dưới dạng tham số hoặc nó sẽ trả về false nếu giá trị không phải là một số trong các đơn vị đã chỉ định.

isunit(10px, px);       // true
isunit(5rem, rem);      // true
isunit(7.8%, '%');      // true
isunit(2.2%, px);       // false
isunit(24px, rem);      // false
isunit(48px, "%");      // false
isunit(1234, em);       // false
isunit(#fff, pt);       // false
isunit("mm", mm);       // false
10

isruleset

Nó nhận một giá trị làm tham số và trả về true , nếu giá trị là một bộ quy tắc hoặc false nếu không.

@rules: {
   color: green;
}

isruleset(@rules);      // true
isruleset(1234);        // false
isruleset(24px);        // false
isruleset(7.8%);        // false
isruleset(#fff);        // false
isruleset(blue);        // false
isruleset("variable");  // false
isruleset(keyword);     // false
isruleset(url(...));    // false

Sự miêu tả

LESS cung cấp một số chức năng màu hữu ích để thay đổi và điều chỉnh màu sắc theo những cách khác nhau. LESS hỗ trợ một số Chức năng Định nghĩa Màu sắc như được hiển thị trong bảng bên dưới -

Sr.No. Mô tả chức năng Thí dụ
1

rgb

Nó tạo ra màu từ các giá trị đỏ, lục và lam. Nó có các thông số sau:

  • red - Nó chứa số nguyên từ 0 - 255 hoặc phần trăm từ 0 - 100%.

  • green - Nó chứa số nguyên từ 0 - 255 hoặc phần trăm từ 0 - 100%.

  • blue - Nó chứa số nguyên từ 0 - 255 hoặc phần trăm từ 0 - 100%.

rgb(220,20,60)

nó chuyển đổi màu với các giá trị rgb là -

#dc143c
2

rgba

Nó xác định màu từ các giá trị đỏ, lục, lam và alpha. Nó có các thông số sau:

  • red - Nó chứa số nguyên từ 0 - 255 hoặc phần trăm từ 0 - 100%.

  • green - Nó chứa số nguyên từ 0 - 255 hoặc phần trăm từ 0 - 100%.

  • blue - Nó chứa số nguyên từ 0 - 255 hoặc phần trăm từ 0 - 100%.

  • alpha - Nó chứa số từ 0 - 1 hoặc phần trăm từ 0 - 100%.

rgba(220,20,60, 0.5)

nó chuyển đổi đối tượng màu với các giá trị rgba thành -

rgba(220, 20, 60, 0.5)
3

argb

Nó xác định biểu diễn hex của màu trong #AARRGGBBđịnh dạng. Nó sử dụng tham số sau:

  • color - Nó chỉ định đối tượng màu.

argb(rgba(176,23,31,0.5))

nó trả về màu argb là -

#80b0171f
4

hsl

Nó tạo ra màu sắc từ các giá trị màu sắc, độ bão hòa và độ sáng. Nó có các thông số sau:

  • hue - Nó chứa số nguyên từ 0 - 360 đại diện cho độ.

  • saturation - Nó chứa số từ 0 - 1 hoặc phần trăm từ 0 - 100%.

  • lightness - Nó chứa số từ 0 - 1 hoặc phần trăm từ 0 - 100%.

hsl(120,100%, 50%)

nó trả về đối tượng màu sử dụng các giá trị HSL dưới dạng:

#00ff00
5

hsla

Nó tạo ra màu sắc từ các giá trị màu, độ bão hòa, độ đậm nhạt và alpha. Nó có các thông số sau:

  • hue - Nó chứa số nguyên từ 0 - 360 đại diện cho độ.

  • saturation - Nó chứa số từ 0 - 1 hoặc phần trăm từ 0 - 100%.

  • lightness - Nó chứa số từ 0 - 1 hoặc phần trăm từ 0 - 100%.

  • alpha - Nó chứa số từ 0 - 1 hoặc phần trăm từ 0 - 100%.

hsla(0,100%,50%,0.5)

nó chỉ định đối tượng màu sử dụng các giá trị HSLA là:

rgba(255, 0, 0, 0.5);
6

hsv

Nó tạo ra màu sắc từ các giá trị màu, độ bão hòa và giá trị. Nó chứa các thông số sau:

  • hue - Nó chứa số nguyên từ 0 - 360 đại diện cho độ.

  • saturation - Nó chứa số từ 0 - 1 hoặc phần trăm từ 0 - 100%.

  • value - Nó chứa số từ 0 - 1 hoặc phần trăm từ 0 - 100%.

hsv(80,90%,70%)

nó chuyển đổi đối tượng màu với các giá trị hsv là -

#7db312
7

hsva

Nó tạo ra màu sắc từ màu sắc, độ bão hòa, giá trị và giá trị alpha. Nó sử dụng các tham số sau:

  • hue - Nó chứa số nguyên từ 0 - 360 đại diện cho độ.

  • saturation - Nó chứa số từ 0 - 1 hoặc phần trăm từ 0 - 100%.

  • value - Nó chứa số từ 0 - 1 hoặc phần trăm từ 0 - 100%.

  • alpha - Nó chứa số từ 0 - 1 hoặc phần trăm từ 0 - 100%.

hsva(80,90%,70%,0.6)

nó chỉ định đối tượng màu với các giá trị hsva là -

rgba(125, 179, 18, 0.6)

Trong chương này, chúng ta sẽ hiểu tầm quan trọng của Chức năng kênh màu trong LESS. LESS hỗ trợ một số chức năng tích hợp đặt giá trị cho một kênh. Kênh đặt giá trị tùy thuộc vào định nghĩa màu. Màu HSL có kênh màu, độ bão hòa và độ sáng và màu RGB có kênh màu đỏ, xanh lục và xanh lam. Bảng sau liệt kê tất cả các chức năng của kênh màu:

Sr.No. Mô tả chức năng Thí dụ
1

hue

Trong không gian màu HSL, kênh màu được trích xuất khỏi đối tượng màu.

background: hue(hsl(75, 90%, 30%));

Nó biên dịch trong CSS như hình dưới đây -

background: 75;
2

saturation

Trong không gian màu HSL, kênh bão hòa được trích xuất khỏi đối tượng màu.

background: saturation(hsl(75, 90%, 30%));

Nó biên dịch trong CSS như hình dưới đây -

background: 90%;
3

lightness

Trong không gian màu HSL, kênh đậm nhạt được trích xuất khỏi đối tượng màu.

background: lightness(hsl(75, 90%, 30%));

Nó biên dịch trong CSS như hình dưới đây -

background: 30%;
4

hsvhue

Trong không gian màu HSV, kênh màu được trích xuất khỏi đối tượng màu.

background: hsvhue(hsv(75, 90%, 30%));

Nó biên dịch trong CSS như hình dưới đây -

background: 75;
5

hsvsaturation

Trong không gian màu HSL, kênh bão hòa được trích xuất khỏi đối tượng màu.

background: hsvsaturation(hsv(75, 90%, 30%));

Nó biên dịch trong CSS như hình dưới đây -

background: 90%;
6

hsvvalue

Trong không gian màu HSL, kênh giá trị được trích xuất khỏi đối tượng màu.

background: hsvvalue(hsv(75, 90%, 30%));

Nó biên dịch trong CSS như hình dưới đây -

background: 30%;
7

red

Kênh màu đỏ được trích xuất khỏi đối tượng màu.

background: red(rgb(5, 15, 25));

Nó biên dịch trong CSS như hình dưới đây -

background: 5;
số 8

green

Kênh màu xanh lá cây được trích xuất khỏi đối tượng màu.

background: green(rgb(5, 15, 25));

Nó biên dịch trong CSS như hình dưới đây -

background: 15;
9

blue

Kênh màu xanh lam được trích xuất khỏi đối tượng màu.

background: blue(rgb(5, 15, 25));

Nó biên dịch trong CSS như hình dưới đây -

background: 25;
10

alpha

Kênh alpha được trích xuất khỏi đối tượng màu.

background: alpha(rgba(5, 15, 25, 1.5));

Nó biên dịch trong CSS như hình dưới đây -

background: 2;
11

luma

Giá trị luma được tính trên một đối tượng màu.

background: luma(rgb(50, 250, 150));

Nó biên dịch trong CSS như hình dưới đây -

background: 71.2513323%;
12

luminance

Giá trị luma được tính mà không cần hiệu chỉnh gamma.

background: luminance(rgb(50, 250, 150));

Nó biên dịch trong CSS như hình dưới đây -

background: 78.53333333%;

Sự miêu tả

LESS cung cấp một số chức năng hoạt động hữu ích để thay đổi và điều chỉnh màu sắc theo những cách khác nhau và lấy các tham số theo cùng một đơn vị. LESS hỗ trợ một số Chức năng Hoạt động Màu như được hiển thị trong bảng bên dưới -

Sr.No. Chỉ thị & Mô tả
1 bão hòa

Nó thay đổi cường độ hoặc độ bão hòa của màu trong phần tử.

2 khử bão

Nó làm giảm cường độ hoặc độ bão hòa của màu trong phần tử.

3 làm sáng

Nó làm tăng độ đậm nhạt của một màu trong phần tử.

4 làm tối

Nó thay đổi cường độ hoặc độ bão hòa của màu trong phần tử.

5 phai màu

Nó làm tăng độ mờ cho các phần tử đã chọn.

6 tàn lụi

Nó làm giảm độ mờ cho các phần tử đã chọn.

7 phai màu

Nó được sử dụng để đặt độ trong suốt của màu cho các phần tử đã chọn.

số 8 quay

Nó được sử dụng để xoay góc của màu cho các phần tử đã chọn.

9 pha trộn

Nó trộn hai màu cùng với độ mờ.

10 màu

Nó trộn màu với màu trắng khi bạn giảm tỷ lệ màu.

11 bóng râm

Nó trộn màu với màu đen khi bạn giảm tỷ lệ màu.

12 thang độ xám

Nó loại bỏ độ bão hòa của một màu trong các phần tử đã chọn.

13 tương phản

Nó thiết lập độ tương phản cho các màu trong phần tử.

Trong chương này, chúng ta sẽ hiểu Color Blending Functionstrong LESS. Đây là các thao tác tương tự được sử dụng trong các trình chỉnh sửa hình ảnh như Photoshop, Fireworks hoặc GIMP, các thao tác này khớp màu CSS với hình ảnh của bạn.

Bảng sau đây cho thấy các chức năng pha trộn màu được sử dụng trong LESS.

Sr.No. Chức năng & Mô tả
1 nhân

Nó nhân hai màu và trả về một màu kết quả.

2 màn

Nó có hai màu và trả về màu sáng hơn. Nó hoạt động ngược lại với chức năng nhân .

3 lớp phủ

Nó tạo ra kết quả bằng cách kết hợp hiệu ứng của phép nhânmàn hình .

4 ánh sáng mềm mại

Nó hoạt động tương tự như lớp phủ nhưng nó chỉ sử dụng một phần của màu, phần này làm nổi bật màu còn lại.

5 đèn rất sáng

Nó hoạt động tương tự như lớp phủ nhưng vai trò của màu sắc bị đảo ngược.

6 Sự khác biệt

Nó trừ màu đầu vào thứ hai từ màu đầu vào đầu tiên.

7 loại trừ

Nó hoạt động tương tự như chức năng khác biệt nhưng với độ tương phản thấp hơn.

số 8 Trung bình cộng

Nó tính toán trung bình của hai màu đầu vào trên cơ sở mỗi kênh (RGB).

9 phủ định

Nó hoạt động ngược lại với hàm khác biệt , trừ màu đầu tiên khỏi màu thứ hai.

Sử dụng dòng lệnh, chúng ta có thể biên dịch tệp .less thành .css .

Cài đặt lessc để sử dụng trên toàn cầu

Lệnh sau được sử dụng để cài đặt lessc với npm (trình quản lý gói nút) để làm cho lessc khả dụng trên toàn cầu.

npm install less -g

Bạn cũng có thể thêm một phiên bản cụ thể sau tên gói. Ví dụnpm install [email protected] -g

Cài đặt để phát triển nút

Lệnh sau được sử dụng để cài đặt phiên bản mới nhất của lessc trong thư mục dự án của bạn.

npm i less -save-dev

Nó cũng được thêm vào devDependencies trong gói dự án.json của bạn.

Bản phát hành beta của lessc

Nó được gắn thẻ là beta khi lessc cấu trúc được xuất bản cho npmỞ đây, chức năng mới được phát triển theo định kỳ. less -v được sử dụng để lấy phiên bản hiện tại.

Cài đặt phiên bản phát triển chưa được xuất bản của lessc

Cam kết phải được chỉ định, khi chúng tôi tiến hành cài đặt phiên bản chưa được xuất bản của lessc và cần tuân theo các hướng dẫn để xác định URL git làm phụ thuộc. Điều này sẽ đảm bảo rằng bạn đang sử dụng đúng phiên bản leesc cho dự án của mình.

Sử dụng phía máy chủ và dòng lệnh

bin/lesscbao gồm nhị phân trong kho lưu trữ. Nó hoạt động với Windows, OS X và nodejs trên * nix.

Sử dụng dòng lệnh

Đầu vào được đọc từ stdin khi nguồn được đặt thành dấu gạch ngang hoặc dấu gạch ngang (-).

lessc [option option = parameter ...]  [destination]

Ví dụ, chúng tôi có thể biên dịch .less đến .css bằng cách sử dụng lệnh sau:

lessc stylesheet.less stylesheet.css

Chúng tôi có thể biên dịch .less đến .css và rút gọn kết quả bằng lệnh sau.

lessc -x stylesheet.less stylesheet.css

Tùy chọn

Bảng sau liệt kê các tùy chọn được sử dụng trong việc sử dụng dòng lệnh:

Sr.No. Tùy chọn & Mô tả Chỉ huy
1

Help

Thông báo trợ giúp được hiển thị với các tùy chọn có sẵn.

lessc -help
lessc -h
2

Include Paths

Nó bao gồm các đường dẫn có sẵn đến thư viện. Các đường dẫn này có thể được tham chiếu đơn giản và tương đối trong tệp Ít hơn. Các đường dẫn trong cửa sổ được phân tách bằng dấu hai chấm (:) hoặc dấu chấm phẩy (;).

lessc --include-path = PATH1;PATH2
3

Makefile

Nó tạo ra một danh sách phụ thuộc nhập makefile vào stdout làm đầu ra.

lessc -M
lessc --depends
4

No Color

Nó vô hiệu hóa đầu ra được tô màu.

lessc --no-color
5

No IE Compatibility

Nó vô hiệu hóa kiểm tra tính tương thích của IE.

lessc --no-ie-compat
6

Disable Javascript

Nó vô hiệu hóa javascript trong ít tệp hơn.

lessc --no-js
7

Lint

Nó kiểm tra cú pháp và báo lỗi mà không có bất kỳ đầu ra nào.

lessc --lint
lessc -l
số 8

Silent

Nó buộc dừng hiển thị thông báo lỗi.

lessc --silent
lessc -s
9

Strict Imports

Nó buộc phải đánh giá hàng nhập khẩu.

lessc --strict-imports
10

Allow Imports from Insecure HTTPS Hosts

Nó nhập từ các máy chủ HTTPS không an toàn.

lessc --insecure
11

Version

Nó hiển thị số phiên bản và số lần thoát.

lessc -version
lessc -v
12

Compress

Nó giúp loại bỏ khoảng trắng và nén đầu ra.

lessc -x
lessc --compress
13

Source Map Output Filename

Nó tạo ra bản đồ nguồn trong ít hơn. Nếu tùy chọn bản đồ nguồn được xác định mà không có tên tệp thì nó sẽ sử dụng bản đồ mở rộng với tên tệp Ít hơn làm nguồn.

lessc --source-map
lessc -source-map = file.map
14

Source Map Rootpath

Rootpath được chỉ định và nên được thêm vào Đường dẫn tệp ít hơn bên trong bản đồ nguồn và cũng như tệp bản đồ được chỉ định trong css đầu ra của bạn.

lessc --source-map-rootpath = dev-files/
15

Source Map Basepath

Một đường dẫn được chỉ định phải được xóa khỏi các đường dẫn đầu ra. Basepath đối lập với tùy chọn rootpath.

lessc --source-map-basepath = less-files/
16

Source Map Less Inline

Tất cả các tệp Ít hơn phải được bao gồm trong sơ đồ nguồn.

lessc --source-map-less-inline
17

Source Map Map Inline

Nó chỉ định rằng trong css đầu ra, tệp bản đồ phải là nội tuyến.

lessc --source-map-map-inline
18

Source Map URL

Một URL được phép ghi đè các điểm trong tệp bản đồ trong css.

lessc --source-map-url = ../my-map.json
19

Rootpath

Nó thiết lập các đường dẫn để viết lại URL trong nhập khẩu và url tương đối.

lessc -rp=resources/
lessc --rootpath=resources/
20

Relative URLs

Trong các tệp đã nhập, URL được viết lại để URL luôn liên quan đến tệp cơ sở.

lessc -ru
lessc --relative-urls
21

Strict Math

Nó xử lý tất cả các chức năng Toán học trong css của bạn. Theo mặc định, nó tắt.

lessc -sm = on
lessc --strict-math = on
22

Strict Units

Nó cho phép các đơn vị hỗn hợp.

lessc -su = on
lessc --strict-units = on
23

Global Variable

Một biến được xác định có thể được tham chiếu bởi tệp.

lessc --global-var = "background = green"
24

Modify Variable

Điều này không giống như tùy chọn biến toàn cục; nó di chuyển phần khai báo vào cuối tệp less của bạn.

lessc --modify-var = "background = green"
25

URL Arguments

Để chuyển sang mọi URL, một đối số được phép chỉ định.

lessc --url-args = "arg736357"
26

Line Numbers

Ánh xạ nguồn nội tuyến được tạo.

lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all
27

Plugin

Nó tải plugin.

lessc --clean-css
lessc --plugin = clean-css = "advanced"

Ít hơn được sử dụng trong trình duyệt khi bạn muốn biên dịch động tệp Ít hơn khi cần thiết và không phải trên máy chủ; điều này là do ít hơn là một tệp javascript lớn.

Để bắt đầu, chúng ta cần thêm tập lệnh LESS để sử dụng LESS trong trình duyệt -

<script src = "less.js"></script>

Để tìm các thẻ kiểu trên trang, chúng ta cần thêm dòng sau trên trang. Nó cũng tạo các thẻ kiểu với css đã biên dịch.

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

Cài đặt tùy chọn

Trước thẻ script, các tùy chọn có thể được đặt trên đối tượng less theo chương trình. Nó sẽ ảnh hưởng đến tất cả việc sử dụng có lập trình của ít hơn và các thẻ liên kết ban đầu.

Ví dụ, chúng ta có thể đặt tùy chọn như sau:

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

Chúng tôi cũng có thể đặt tùy chọn ở định dạng khác trên thẻ script như được chỉ định bên dưới -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

Bạn cũng có thể thêm các tùy chọn này vào các thẻ liên kết.

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

Các điểm cần được xem xét cho các tùy chọn thuộc tính là:

  • window.less <thẻ script <thẻ liên kết là mức độ quan trọng.

  • Các thuộc tính dữ liệu không thể được viết trong trường hợp lạc đà; tùy chọn thẻ liên kết được biểu diễn dưới dạng tùy chọn thời gian.

  • Các thuộc tính dữ liệu có giá trị không phải là chuỗi phải là JSON hợp lệ.

Chế độ xem

Chế độ đồng hồ có thể được bật bằng cách đặt tùy chọn env thành phát triển và gọi less.watch () sau khi tệp less.js được thêm vào. Nếu bạn muốn tạm thời bật chế độ xem, hãy thêm #! Watch vào URL.

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

Sửa đổi các biến

Đã bật sửa đổi thời gian chạy của biến LESS. Tệp LESS được biên dịch lại khi giá trị mới được gọi. Đoạn mã sau đây cho thấy cách sử dụng cơ bản của các biến sửa đổi:

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

Gỡ lỗi

Chúng ta có thể thêm tùy chọn ! DumpLineNumbers: mediaquery vào url hoặc tùy chọn dumpLineNumbers như đã đề cập ở trên. Các mediaquery tùy chọn có thể được sử dụng với FireLESS (Nó hiển thị bản gốc LESS tên file và đường số phong cách CSS LESS tạo ra.)

Tùy chọn

Trước khi tải tệp script less.js, các tùy chọn phải được đặt trong một đối tượng ít chung .

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>
  • async- Nó là một kiểu Boolean. Các tệp đã nhập được yêu cầu cho dù có tùy chọn không đồng bộ hay không. Theo mặc định, nó là sai.

  • dumpLineNumbers- Nó là một loại chuỗi. Trong tệp css đầu ra, thông tin dòng nguồn được thêm vào khi đặt dumpLineNumbers. Nó giúp gỡ lỗi quy tắc cụ thể đến từ đâu.

  • env- Nó là một loại chuỗi. Env có thể chạy trong quá trình phát triển hoặc sản xuất. Phát triển được đặt tự động khi URL tài liệu bắt đầu bằngfile:// hoặc nó có trong máy cục bộ của bạn.

  • errorReporting - Khi biên dịch không thành công, phương pháp báo lỗi có thể được thiết lập.

  • fileAsync- Nó là một kiểu Boolean. Khi một trang có giao thức tệp thì nó có thể yêu cầu nhập không đồng bộ hay không.

  • functions - Đó là kiểu đối tượng.

  • logLevel- Nó là một loại số. Nó hiển thị mức ghi nhật ký trong bảng điều khiển javascript.

    • 2: Thông tin và lỗi

    • 1: Lỗi

    • 0: Không có gì

  • poll- Ở chế độ đồng hồ, thời gian hiển thị bằng mili giây giữa các cuộc thăm dò. Nó là một kiểu số nguyên; theo mặc định, nó được đặt thành 1000.

  • relativeUrls- Các URL điều chỉnh là tương đối; theo mặc định, tùy chọn này được đặt là sai. Điều này có nghĩa là các URL đã có liên quan đến tệp mục nhập ít hơn. Nó là một kiểu Boolean.

  • globalVars- Chèn danh sách các biến toàn cục vào mã. Biến kiểu chuỗi phải được bao gồm trong dấu ngoặc kép

  • modifyVars- Nó không giống như tùy chọn biến toàn cục. Nó di chuyển khai báo vào cuối tệp less của bạn.

  • rootpath - Nó đặt đường dẫn ở đầu mọi tài nguyên URL.

  • useFileCache- Sử dụng bộ đệm tệp trên mỗi phiên. Bộ nhớ đệm trong các tệp ít hơn được sử dụng để gọi các EditVars nơi tất cả các tệp ít hơn sẽ không truy xuất lại.

LESS thân thiện với nhiều trình duyệt. Nó hỗ trợ các trình duyệt hiện đại như Google Chrome, Mozilla Firefox, Safari và Internet Explorer và cho phép tái sử dụng các phần tử CSS và viết mã LESS với cùng ngữ nghĩa. Bạn phải cẩn thận về các tác động của hiệu suất khi sử dụng LESS ở phía máy khách và trong khi hiển thị JavaScript để tránh bất kỳ vấn đề thẩm mỹ nào như

  • Lỗi đánh vần,
  • Thay đổi màu sắc,
  • Texture
  • Look
  • Liên kết, v.v.

Biên dịch các tệp LESS ở phía máy chủ để cải thiện mức hiệu suất của trang web.

PhantomJS không triển khai hàm Function.prototype.bind , vì vậy bạn cần sử dụng công cụ JavaScript es5 shim để chạy dưới PhantomJS. Người dùng có thể thực hiện các điều chỉnh với các biến để ảnh hưởng đến chủ đề và hiển thị chúng trong thời gian thực bằng cách sử dụng LESS phía khách hàng trong quá trình sản xuất.

Nếu bạn muốn chạy LESS trong các trình duyệt cũ hơn, hãy sử dụng công cụ JavaScript es-5 shim bổ sung các tính năng JavaScript mà LESS hỗ trợ. Bạn có thể sử dụng các thuộc tính trên tập lệnh hoặc các thẻ liên kết bằng cách sử dụng JSON.parse mà phải được trình duyệt hỗ trợ.

Trong chương này, chúng ta sẽ hiểu cách một Plugin có thể được tải lên để mở rộng chức năng của trang web. Các plugin có thể được sử dụng để giúp công việc của bạn dễ dàng hơn.

Dòng lệnh

Để cài đặt plugin bằng dòng lệnh, trước tiên bạn cần cài đặt plugin lessc. Có thể cài đặt plugin này bằng cách sử dụng ít plugin ngay từ đầu. Dòng lệnh sau sẽ giúp bạn cài đặt plugin clean-css -

npm install less-plugin-clean-css

Trực tiếp, bạn có thể sử dụng plugin đã cài đặt bằng cách sử dụng lệnh sau:

lessc --plugin = path_to_plugin = options

Sử dụng một plugin trong mã

Trong Node, plugin là bắt buộc và nó được chuyển vào một mảng như một plugin tùy chọn cho ít hơn.

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

Trong trình duyệt

Trước tập lệnh less.js, tác giả plugin nên đưa tệp javascript vào trang.

<script src = "plugin.js"></script>

<script>
less = {
   plugins: [plugin]
};
</script>

<script src = "less.min.js"></script>

Danh sách ít plugin hơn

Bảng sau đây liệt kê các plugin có sẵn trong LESS.

Postprocessor / Feature Plugins

Sr.No. Plugin & Mô tả
1 Trình sửa lỗi tự động

Nó được sử dụng để thêm tiền tố vào CSS sau khi dịch từ LESS.

2 CSScomb

Nó giúp cải thiện việc duy trì biểu định kiểu của bạn.

3 sạch sẽ

Nó thu nhỏ đầu ra CSS từ LESS.

4 CSSWring

Nó nén hoặc giảm thiểu đầu ra CSS từ LESS.

5 css-flip

Nó được sử dụng để tạo CSS từ trái sang phải (LTR) hoặc từ phải sang trái (RTL).

6 chức năng

Nó viết hàm của LESS trong chính LESS.

7 quả cầu

Nó được sử dụng để nhập nhiều tệp.

số 8 group-css-media-queries

Nó thực hiện xử lý hậu kỳ cho Ít hơn.

9 url nội tuyến

Tự động chuyển đổi URL thành dữ liệu uri.

10 npm-import

Nó nhập từ gói npm với giá thấp hơn.

11 làm hài lòng

Nó được sử dụng để xử lý ít hơn.

12 rtl

LESS được đảo ngược từ ltr (trái sang phải) thành rtl (từ phải sang trái).

Framework / Library Importers

Sr.No. Nhà nhập khẩu & Mô tả
1 Bootstrap

Mã Bootstrap LESS được nhập trước mã LESS tùy chỉnh.

2 Bower Resolve

LESS tệp được nhập từ gói Bower.

3 Cardinal CSS cho less.js

Trước mã LESS tùy chỉnh, mã LESS cho Cardinal được nhập.

4 Lưới Flexbox

Framework được nhập phổ biến nhất hoặc trình nhập thư viện.

5 Hệ thống lưới linh hoạt

Nó nhập Hệ thống lưới linh hoạt.

6 Ionic

Nó nhập khuôn khổ ion.

7 Bài học

Nó nhập các mixin Lesshat.

số 8 Bộ xương

Nó nhập ít mã khung xương hơn.

Thư viện chức năng

Sr.No. Nhà nhập khẩu & Mô tả
1 chức năng màu nâng cao

Nó được sử dụng để tìm các màu tương phản hơn.

2 cubehelix

Sử dụng giá trị hiệu chỉnh gamma bằng 1, hàm lập phương có thể trả về một màu giữa hai màu.

3 danh sách

Điều này liệt kê thư viện hàm thao tác.

Dành cho tác giả plugin

LESS cho phép một tác giả kết hợp với ít hơn.

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}
  • pluginManager cung cấp một người giữ có thể thêm người quản lý tệp, người xử lý bài đăng hoặc khách truy cập.

  • setOptions hàm truyền chuỗi.

  • printUsage được sử dụng để giải thích các tùy chọn.

Điểm chính của việc sử dụng có lập trình trong LESS là hàm less.render. Hàm này sử dụng định dạng sau trong LESS -

less.render(input_data, options)
.then(function(output) {
   //code here
},
   
function(error) {
});

hàm cũng có thể được viết theo cách sau:

less.render(css, options, function(error, output) {})

Các tùy chọn là một đối số tùy chọn trả vềpromise khi bạn không chỉ định lệnh gọi lại và trả về promisekhi bạn chỉ định gọi lại. Bạn có thể hiển thị tệp bằng cách đọc nó thành chuỗi và đặt các trường tên tệp của tệp chính.

Các sourceMap tùy chọn cho phép tùy chọn sourcemap bộ như sourceMapURL , sourceMapBasepath , sourceMapRootpath , outputSourceFilessourceMapFileInline . Điểm cần được xem xét ở đây là tùy chọn sourceMap không có sẵn cho less.js.

Bạn có thể có quyền truy cập vào nhật ký bằng cách thêm người nghe như được hiển thị trong định dạng bên dưới -

less.logger.addListener({
   debug: function(message) {
   },
   
   info: function(message) {
   },
   
   warn: function(message) {
   },
   
   error: function(message) {
   }
});

Các chức năng được xác định ở trên là tùy chọn. Nếu một lỗi được hiển thị, thì nó sẽ chuyển lỗi chocallback hoặc là promisecó mặt trong less.render .

Trong chương này, chúng ta sẽ hiểu tầm quan trọng của trình biên dịch trực tuyến trong LESS. Các trình biên dịch trực tuyến được sử dụng để biên dịch mã ít hơn thành mã css. Các công cụ biên dịch trực tuyến dễ dàng giúp tạo mã css. Sau đây là các trình biên dịch ít trực tuyến có sẵn -

  • winless.org/online-less-compiler

  • lesstester.com

  • dopefly.com/less-converte

  • lessphp.gpeasy.com/demo

  • leafo.net/lessphp/editor

  • estFiddle

IDE web / sân chơi trực tuyến với ít hỗ trợ hơn

Sau đây là các IDE Web Trực tuyến có sẵn với ít hỗ trợ hơn.

Sr.No. IDE & Mô tả Web Trực tuyến
1 CSSDeck Labs

Đây là nơi bạn có thể dễ dàng tạo các testcase liên quan đến mã HTML, CSS, JS.

2

CodePen

Đây là một sân chơi cho giao diện người dùng web.

3 Fiddle Salad

Đây là nơi bạn có thể thêm mã hiện có trong môi trường.

4 JS Bin

Điều này giúp mã Javascript và CSS.

5 jsFiddle

Đây là một trình soạn thảo web trực tuyến.

Trong chương này, chúng ta sẽ hiểu về GUI cho LESS . Bạn có thể sử dụng các công cụ LESS khác nhau cho nền tảng của mình. Để sử dụng dòng lệnh và các công cụ, hãy nhấp vào liên kết này .

Bảng sau liệt kê các trình biên dịch GUI hỗ trợ nhiều nền tảng.

Sr.No. Công cụ & Mô tả
1 Crunch 2!

Nó hỗ trợ trên các nền tảng như Windows, MacLinux . Nó cung cấp trình soạn thảo với tính năng biên dịch tích hợp.

2

Mixture

Nó là một công cụ tạo mẫu và trang web tĩnh nhanh chóng được các nhà thiết kế và nhà phát triển sử dụng. Nó nhanh chóng, hiệu quả và hoạt động tốt với trình soạn thảo của bạn. Nó tập hợp một bộ sưu tập các công cụ tuyệt vời và các phương pháp hay nhất.

3 SimpLESS

Nó là một trình biên dịch LESS tối giản. Nó cung cấp chức năng kéo, thả và biên dịch. SimpLESS hỗ trợ thêm tiền tố CSS của bạn bằng cách sử dụng tiền tố , đây là tính năng độc đáo của SimpLESS. Nó được xây dựng trên nền tảng Titanium.

4 Koala

Nó được sử dụng để biên dịch LESS, SASS và CoffeeScript. Nó cung cấp các tính năng như hỗ trợ thông báo lỗi biên dịch và hỗ trợ các tùy chọn biên dịch.

Bảng sau liệt kê các trình biên dịch GUI hỗ trợ nền tảng Windows.

Sr.No. Công cụ & Mô tả
1 Prepros

Nó là một công cụ biên dịch LESS, SASS, Compass, Stylus, Jade và nhiều thứ khác.

2 WinLess

Ban đầu nó là một bản sao của LESS.app, nó có một số cài đặt và có cách tiếp cận đầy đủ tính năng hơn. Nó hỗ trợ bắt đầu với các đối số dòng lệnh.

Bảng sau liệt kê các trình biên dịch GUI hỗ trợ nền tảng OS X.

Sr.No. Công cụ & Mô tả
1 CodeKit

t là kế thừa của LESS.app và hỗ trợ LESS trong số nhiều ngôn ngữ xử lý khác như SASS, Jade, Markdown và hơn thế nữa.

2 LiveReload

Nó chỉnh sửa CSS và thay đổi hình ảnh ngay lập tức. SASS, LESS, CoffeeScript và những thứ khác hoạt động tốt.

Bảng sau liệt kê các trình biên dịch GUI hỗ trợ nền tảng OS X.

Sr.No. Công cụ & Mô tả
1 Plessc

Nó là giao diện người dùng gui cho lessc. Nó có các tính năng như trình xem nhật ký, biên dịch tự động, mở tệp LESS với trình chỉnh sửa đã chọn và hỗ trợ bản đồ nguồn.

Trong chương này, chúng ta sẽ hiểu tầm quan trọng của trình chỉnh sửaplugin trong LESS. Trình soạn thảo là một hệ thống hoặc chương trình cho phép người dùng chỉnh sửa văn bản. Plugin là một phần của phần mềm được sử dụng để mở rộng chức năng của trang web.

Bây giờ chúng ta hãy thảo luận về trình chỉnh sửa và IDE cho LESS.

Sr.No. Người chỉnh sửa và IDE & Mô tả
1 Rầm!

Nó hỗ trợ đa nền tảng như Windows, MacLinux . Nó cung cấp trình soạn thảo với tính năng biên dịch tích hợp.

2 Mindscape Web Workbench

Nó cung cấp tính năng chỉnh sửa CoffeeScript, SASS, Compass và LESS và giúp phát triển web hiện đại dễ dàng trong Visual Studio.

3 NetBeans

Nó là một IDE dựa trên Java mã nguồn mở. Điều này giúp phát triển nhanh chóng các ứng dụng máy tính để bàn, di động và web cũng như các ứng dụng HTML5 liên quan đến HTML, JavaScript và CSS.

4 TextMate

Nó là một trình soạn thảo văn bản đồ họa có mục đích chung cho Mac OS X. Nó có các tùy chỉnh khai báo, macro có thể ghi, đoạn mã, tích hợp shell, tab tài liệu mở và hệ thống gói có thể mở rộng.

5 Vim

Gói vim bổ sung các chức năng như thụt lề, đánh dấu và tự động hoàn thành cho ngôn ngữ biểu định kiểu động LESS.

6 Emacs

Nó chứa less-css-model cung cấp chế độ Emacs cho LESS CSS (lesscss.org); Emacs hỗ trợ biên dịch khi lưu.

7 jetBrains WebStorm và PhpStorm

WebStrom là một IDE nhẹ và mạnh mẽ. Nó được trang bị hoàn hảo để phát triển phía máy khách và máy chủ phức tạp với Node.js. PhpStorm là một PHP IDE, hỗ trợ hiểu mã sâu và cung cấp hỗ trợ và hỗ trợ mã hóa hàng đầu cho tất cả các công cụ và khuôn khổ chính.

số 8 Dấu ngoặc

Nó là một trình soạn thảo mã nguồn mở nhẹ, mạnh mẽ và giúp ích cho các nhà thiết kế web và các nhà phát triển front-end.

9 CodeLobster

Nó là một môi trường phát triển tích hợp di động (IDE) chủ yếu dành cho PHP. Nó cũng hỗ trợ phát triển HTML, CSS và JavaScript và các plugin có sẵn cho Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii và CakePHP.

10 KineticWing IDE

Nó là một IDE nhanh chóng, sạch sẽ, nhẹ và di động. Nó là một bộ phát triển kích thước đầy đủ giúp bạn làm việc thông minh và nhanh chóng.

11 nodeMirror

Nó là một IDE mã nguồn mở và có thể tùy chỉnh dễ dàng. Nó sử dụng CodeMirror.net, pty.js và các thư viện khác.

12 Công cụ HTML-Kit

Đây là một trình soạn thảo web hiện đại dành cho HTML5, CSS3, JavaScript và hơn thế nữa. Với điều này, bạn có thể chỉnh sửa, xem trước, xác nhận xuất bản và quản lý các dự án từ trình chỉnh sửa tuân thủ tiêu chuẩn hiện đại.

Văn bản siêu phàm 2 & 3

Các văn bản tuyệt vời cung cấp tùy chọn khác nhau cho LESS như được liệt kê trong bảng sau -

Sr.No. Tùy chọn & Mô tả
1 Ít cao siêu hơn

Cú pháp LESS cho văn bản siêu phàm cung cấp đánh dấu cú pháp cho các tệp .less , cùng với các đoạn mã.

2 Tuyệt vời-Ít-to-CSS

Plugin Sublime text 23 để biên dịch các tệp .less sang CSS khi bạn lưu. Nó yêu cầulessc được cài đặt trên PATH.

3 Ít xây dựng-siêu phàm

Hệ thống xây dựng LESS cho văn bản siêu phàm 2 cung cấp hai hệ thống xây dựng cho các tệp LESS, cả được rút gọn và không được rút gọn.

4

SublimeOnSaveBuild

Nó là một plugin đơn giản cho sublime text 2 để kích hoạt một bản dựng khi bạn nhấp vào Lưu. Hoạt động tốt với các bộ xử lý trước như LESS, La bàn và bất kỳ bộ xử lý nào khác.

Nhật thực

Eclipse có hai plugin cho LESS như được liệt kê trong bảng sau:

Sr.No. Plugin & Mô tả
1 Eclipse Less Plugin

Bằng cách mở rộng IDE Eclipse, plugin này cung cấp các tính năng hữu ích để chỉnh sửa và biên dịch các bảng định kiểu LESS.

2 Plugin trình vận chuyển

Plugin Eclipse này tự động chuyển đổi các tệp của bạn như LESS, SASS, CoffeeScript, v.v.

Visual Studio

Visual Studio có các tùy chọn khác nhau sau đây cho LESS -

Sr.No. Tùy chọn & Mô tả
1 CSS ít hơn

Phần mở rộng này làm cho các tệp LESS mở bằng dịch vụ ngôn ngữ CSS.

2 Khái niệm cơ bản về web 2012

Tiện ích mở rộng này cho phép bạn thực hiện các tác vụ phổ biến dễ dàng hơn nhiều và bổ sung các tính năng hữu ích cho Visual studio dành cho các nhà phát triển web.

3 Khái niệm cơ bản về web 2013

Nó mở rộng Visual Studio với rất nhiều tính năng mới không dành riêng cho một ngôn ngữ hoặc trình soạn thảo cụ thể.

4 Công cụ web 2013

Điều này giúp bạn trong các nhiệm vụ phát triển liên quan đến ASP.NET

Dreamweaver

Những điểm sau đây cần được xem xét khi làm việc với Dreamweaver .

  • Nó là một ứng dụng Adobe được các nhà thiết kế và phát triển web sử dụng để tạo các ứng dụng và trang web.

  • Nó có khả năng hoạt động trên nhiều nền tảng bao gồm trình duyệt, thiết bị và máy tính bảng.
  • Các nhà thiết kế web sử dụng Dreamweaver để tạo các nguyên mẫu trang web.

  • DMXzone Less CSS Compiler tạo tất cả các quyền hạn CSS LESS trực tiếp trong Dreamweaver.

Notepad ++ 6.x

Những điểm sau đây cần được xem xét khi làm việc trên Notepad ++ .

  • Notepad ++ là trình soạn thảo văn bản và trình chỉnh sửa mã nguồn miễn phí hỗ trợ chỉnh sửa theo thẻ, tức là làm việc với nhiều tệp đang mở trong một cửa sổ.

  • LESS cho Notepad ++ là một tệp xml cung cấp đánh dấu hoặc tô màu cú pháp cho các tệp .less. Để biết thêm thông tin, hãy nhấp vào liên kết này .

  • Để cài đặt Notepad ++, hãy nhấp vào liên kết này .

Trình biên dịch Node.js

Sau đây là các trình biên dịch Node.js được sử dụng cho LESS.

grunt-Contrib-less

Grunt là một người chạy nhiệm vụ Node. Nó sẽ biên dịch các bảng định kiểu của bạn mỗi khi bạn thực hiện các thay đổi đối với tệp LESS của mình.

lắp ráp-ít

assembly-less là một plugin grunt mạnh mẽ để biên dịch tệp LESS sang CSS. Nhiệm vụ ít hơn kéo mẫu JSON và Lo - dash (gạch dưới) để xác định gói LESS, thành phần giao diện người dùng, biểu định kiểu nén hoặc chủ đề.

nuốt nước bọt

Nó là plugin ÍT cho Gulp. gulp-minify-css được sử dụng để giảm thiểu CSS của bạn. gulp-sourcemaps được sử dụng để tạo thư viện sourcemaps.

GHI NHẬN

Nó là một công cụ mã nguồn mở được xây dựng trên LESS và giúp tối ưu hóa mã CSS của bạn. Nó giữ cho mã CSS không bị lỗi, sạch sẽ và có thể quản lý được.

tự quyết

Nó là một trình xem tệp .less . Nó chứa theo dõi phụ thuộc và thông báo đa nền tảng.

Kết nối phần mềm trung gian cho Less.js

Nó được sử dụng để cho phép xử lý khung JS kết nối của các tệp LESS. Nó biên dịch tệp nguồn theo yêu cầu và lưu vào bộ đệm dữ liệu đã biên dịch cho yêu cầu tiếp theo.

Công nghệ khác

Sau đây là một số công nghệ khác giúp bạn biên dịch mã LESS.

Wro4j Á hậu CLI

Bạn có thể tải xuống wro4j-runner.jar và có thể biên dịch mã LESS của bạn trong CSS bằng cách sử dụng lệnh sau:

java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss

Bạn có thể truy cập vào liên kết sau để biết thêm về Wro4j Runner CLI

CSS :: LESSp

Mô-đun này được sử dụng để phân tích cú pháp và biên dịch tệp LESS thành tệp CSS. Sau đây là lệnh được sử dụng để biên dịch:

lessp.pl styles.less > styles.css

Bạn có thể truy cập liên kết sau để biết thêm về CSS :: LESSp

Máy chủ Windows Script

Sau đây là trình biên dịch dòng lệnh sẽ chạy trên windows.

cscript //nologo lessc.wsf input.less [output.css] [-compress]

OR

lessc input.less [output.css] [-compress]

Bạn có thể truy cập liên kết sau để biết thêm về Less.js cho windows

không có chấm

Sau đây là một trình biên dịch dòng lệnh để chạy không dấu chấm cho các cửa sổ.

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

Bạn có thể truy cập liên kết sau để biết thêm về dotless

Giao diện người dùng / Khung chủ đề và Thành phần

LESS hỗ trợ một số khung giao diện người dùng / Chủ đề như được liệt kê trong bảng sau:

Sr.No. Khung & Mô tả
1 1pxdeep

Đây là chủ đề Bootstrap 3 phẳng cung cấp các điều khiển phối màu mạnh mẽ.

2 Bootflat

Nó là một khung công tác mã nguồn mở dựa trên Bootstrap.

3 BootPress

Nó là một khuôn khổ PHP dựa trên CMS tệp phẳng

4 Bootstrap

Đây là khung front-end mạnh mẽ dành cho thiết bị di động để phát triển web nhanh hơn và dễ dàng hơn.

5 Chủ đề Bootstrap a11y

Nó cung cấp khả năng truy cập dễ dàng để phát triển web.

6 Bootswatch

Đây là một chủ đề mã nguồn mở cung cấp các chủ đề miễn phí cho Bootstrap.

7 Hồng y

Đây là khuôn khổ CSS ưu tiên cho thiết bị di động cho phép duy trì CSS cho các trang web, giao diện người dùng và ứng dụng đáp ứng.

số 8 CSSHorus

Nó là một thư viện cung cấp sự phát triển dễ dàng của các trang web di động.

9 Giao diện người dùng phẳng miễn phí

Nó dựa trên Bootstrap 3 chứa các thành phần cơ bản và phức tạp và cung cấp thiết kế chủ đề cho Bootstrap.

10 bình phong

Nó là một khuôn khổ giao diện người dùng có chứa một bộ công cụ để xây dựng các widget.

11

InContent

Nó chỉ định mô tả của hình ảnh bằng cách sử dụng CSS3 và SASS / LESS.

12 Mực

Nó tạo ra các giao diện web đáp ứng.

13 JBST

Đây là khung chủ đề mạnh mẽ được sử dụng để tạo các chủ đề con cho WordPress và được sử dụng làm trình tạo trang web độc lập.

14 KNACSS

Nó được sử dụng để phát triển các dự án HTML / CSS bằng cách sử dụng các biểu định kiểu đáp ứng và có thể mở rộng.

15 Kube

Nó là khung CSS được sử dụng cho các nhà thiết kế và nhà phát triển chuyên nghiệp.

16 CSS UI Metro

Nó là một khuôn khổ giao diện người dùng được sử dụng để tạo Windows Metro Style trên các dự án.

17 Pre

Đó là khuôn khổ CSS sử dụng LESS.

18 khúc dạo đầu

Đó là khung CSS frontend sử dụng LESS.

19 Lược đồ

Nó là một khuôn khổ nhẹ và đáp ứng giúp xây dựng các trang web phức tạp.

20 Giao diện người dùng ngữ nghĩa

Nó là một khung giao diện người dùng tạo ra các bố cục đáp ứng bằng cách sử dụng HTML.

21 UIkit

Nó là một khuôn khổ giao diện người dùng bao gồm các thành phần HTML, CSS và JS và dễ sử dụng và phát triển các ứng dụng web.

22

ngBoilerplate

Nó là hệ thống xây dựng dựa trên grunt được sử dụng cho các dự án AngularJS.

23 ít đường sắt

Nó là một ngôn ngữ biểu định kiểu động sử dụng Less.js cho các dự án Rails.

24 Wee

Nó là một khung công tác giao diện người dùng chứa các thành phần khởi động HTML, CSS và JavaScript để phát triển các dự án web đáp ứng.

Hệ thống lưới

LESS hỗ trợ các khung hệ thống lưới như được liệt kê trong bảng sau:

Sr.No. Khung & Mô tả
1 Hệ thống lưới linh hoạt

Nó là một khuôn khổ CSS tạo ra các dự án web một cách linh hoạt.

2 adaptGrid

Nó là một hệ thống lưới đáp ứng để phát triển các ứng dụng web.

3 Dễ sợ

Nó là hệ thống lưới đáp ứng nhẹ dựa trên bộ xử lý tiền LESS.

4 Hệ thống lưới vàng

Đó là hệ thống lưới cho thiết kế đáp ứng.

5 ÍT Zen Grid

Nó được sử dụng để giải quyết vấn đề làm tròn điểm ảnh phụ.

6 Order.less

Nó là một thư viện ÍT được sử dụng để căn chỉnh, hệ thống lưới và các thang mô-đun.

7 có trách nhiệm

Nó là một hệ thống lưới có thể tùy chỉnh và độc lập.

số 8 Bản ghi sẵn đáp ứng

Nó là một hệ thống lưới nhẹ được sử dụng để tạo thiết kế web đáp ứng cho các trang web.

9 Semantic.gs

Đây là bản phân phối mặc định của trình duyệt web cho hệ điều hành của nó.

Thư viện Mixin

LESS cung cấp các thư viện mixin như được liệt kê trong bảng sau:

Sr.No. Khung & Mô tả
1 3L

Nó cung cấp các tính năng CSS3 mới nhất cho bộ tiền xử lý LESS.

2 hoạt hình

Nó là một thư viện được sử dụng cho các hoạt ảnh trình duyệt được sử dụng trong các dự án.

3 Trong suốt

Nó sử dụng LESS mixin có thể tái sử dụng mà không phá hủy kiểu dáng và tạo ra kích thước quá lớn trong bảng định kiểu.

4 Css3LessPlease

Nó chuyển đổi css3please.com thành ÍT mixin và phần tử sẽ nhận được các thay đổi tức thì khi bạn chạy CSS.

5 CssEffects

Nó cung cấp các hiệu ứng kiểu CSS được viết dưới dạng LESS mixin.

6 Cssowl

Nó là một thư viện mixin hỗ trợ cho LESS, SASS và Stylus.

7 cube.less

Nó là một khối hoạt hình 3D được tạo ra chỉ bằng CSS.

số 8 tRRtoolbelt.less

Đây là một thư viện cung cấp các mixin và các hàm để thực hiện các hành động trên tệp LESS.

9 est

Nó dựa trên LESS cho phép viết mã LESS hiệu quả hơn.

10 Hình lục giác

Nó tạo ra các hình lục giác CSS với kích thước và màu sắc.

11 Vô gia cư

Nó là một thư viện mixin chứa các chức năng hữu ích cho Less.js.

12

LESS Elements

Nó là một tập hợp các mixin cho bộ tiền xử lý LESS.

13 LESS Mũ

Nó là một thư viện mixin giúp xuất CSS cho tất cả các trình duyệt và tạo ra số lượng bóng đổ, độ dốc và hình ảnh động, v.v.

14 lessley

Đó là bộ thử nghiệm được viết bằng LESS.

15 LESS-bidi

Nó là một bộ sưu tập LESS mixin cung cấp kiểu dáng hai chiều mà không bị trùng lặp mã.

16

LESS-Mix

Nó là một thư viện mixin được viết bằng LESS.

17 media-query-to-type

Nó được sử dụng để tạo các truy vấn phương tiện cho phép các phiên bản Internet Explorer 8 trở xuống truy cập nội dung.

18 Nhiều màu sắc. Không có

Nó cung cấp các biến để thao tác màu trong khi thiết kế các ứng dụng web.

19 ít hơn

Nó là một thư viện cho phép viết mã CSS để tương thích với nhiều trình duyệt.

20 Thêm nữa. Không có

Nó là sự kết hợp của La bàn và Twitter Bootstrap cung cấp nhiều hơn cho LESS bằng cách sử dụng CSS3 và các mixin trình duyệt chéo.

21 nhiều hơn hoặc ít hơn

Nó cung cấp các mixin mạnh mẽ cho less.js.

22 normalize.less

Nó cung cấp CSS chuẩn hóa bằng LESS.

23 Oban

Nó là một tập hợp các mixin giúp tăng tốc quá trình phát triển của ứng dụng web.

24 Khởi động trước

Nó là một tập hợp các dịch vụ LESS sử dụng mixin và các biến để viết CSS tốt hơn và được hình thành từ Bootstrap.

25 prelude-mixin

Nó là một thư viện mixin ÍT.

26 Hình dạng.LESS

Nó cung cấp một số hỗn hợp để chỉ định các hình dạng khác nhau cho ứng dụng.