LESS - Sử dụng ít hơn trong trình duyệt

Í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ế độ xem 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ị cấp độ 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à false. Đ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.