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 , mixin và hoạ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 , Gravity và Susy .

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 và .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ư media và keyframe 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 .

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 -

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

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 .

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(); và .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ả.

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.

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 −

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.

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.

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.

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

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:

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

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

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

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

filter: Hello!! welcome to Tutorialspoint!;

%(string, arguments ...)

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

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

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

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

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 -

ceil(0.7)

1

floor(3.3)

3

percentage(0.2)

20%

round(3.77)

4

sqrt(25)

5

abs(30ft)

30ft

sin(2)

0.90929742682

asin(1)

1.5707963267948966

cos(2)

-0.4161468365471424

acos(1)

0

tan(60)

0.320040389379563

atan(1)

0.7853981633974483

pi()

3.141592653589793

pow(3,3)

27

mod(7,3)

1

min(70,30,45,20)

20

max(70,30,45,20)

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.

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

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

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

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

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

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

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

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

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

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

rgb(220,20,60)

#dc143c

rgba(220,20,60, 0.5)

rgba(220, 20, 60, 0.5)

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

#80b0171f

hsl(120,100%, 50%)

#00ff00

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

rgba(255, 0, 0, 0.5);

hsv(80,90%,70%)

#7db312

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

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:

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

background: 75;

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

background: 90%;

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

background: 30%;

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

background: 75;

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

background: 90%;

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

background: 30%;

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

background: 5;

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

background: 15;

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

background: 25;

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

background: 2;

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

background: 71.2513323%;

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

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 -

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.

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:

lessc -help
lessc -h

lessc --include-path = PATH1;PATH2

lessc -M
lessc --depends

lessc --no-color

lessc --no-ie-compat

lessc --no-js

lessc --lint
lessc -l

lessc --silent
lessc -s

lessc --strict-imports

lessc --insecure

lessc -version
lessc -v

lessc -x
lessc --compress

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

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

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

lessc --source-map-less-inline

lessc --source-map-map-inline

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

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

lessc -ru
lessc --relative-urls

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

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

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

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

lessc --url-args = "arg736357"

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

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

Framework / Library Importers

Thư viện chức năng

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 , outputSourceFiles và sourceMapFileInline . Đ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.

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.

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

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

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

Trong chương này, chúng ta sẽ hiểu tầm quan trọng của trình chỉnh sửa và plugin 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.

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 -

Nhật thực

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

Visual Studio

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

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:

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:

Thư viện Mixin

LESS cung cấp các thư viện mixin như được liệt kê trong bảng sau: