LESS @import & Web Essentials 2012

Question

Trong dự án web của tôi, tôi đã chia CSS của mình thành các tệp LESS riêng biệt vì lý do bảo trì. Tôi có một tập tin gọi là config.less hoạt động như một tập tin tổng thể nhập khẩu các tập tin ít khác, bằng cách sử dụng chỉ thị @import. Vấn đề với thiết lập này có vẻ là tôi nhận được rất nhiều "biến không khai báo" & "Không được khai báo mixin" trong khi chỉnh sửa các tệp LESS của tôi, ví dụ khi thêm biến thuộc tính được gọi là @textColor trong base.less, đó là tuyên bố trong một tập tin ít được gọi là variables.less. Có cách nào để làm cho các yếu tố cần thiết web nhận thức được các biến và mixin được định nghĩa trong các tệp bên ngoài ít hơn không?

Một điều mà dường như bị vấp ngã lên Essentials Web là khi tôi đang sử dụng các tính năng truyền thông truy vấn lồng nhau của LESS:

.some-selector { 
    background: #000; 
    @media only screen and (max-width: 800px) { 
     background: #fff; 
    } 
} 

Việc kê khai @media lồng nhau được một gạch dưới màu đỏ, và trên di chuột nó nói "Không mong đợi '@' chặn trong quy tắc kiểu". Di chuột lên thuộc tính nền lồng nhau cho biết màu "Xác thực: 'màu' không phải là thẻ HTML hợp lệ.

Answer 1

Tôi không thể đưa ra câu trả lời về vấn đề @media với Web Essentials, nhưng tôi có thể đưa ra lời khuyên về các biến và vấn đề mixin.

về cơ bản, thay đổi tập tin config.less của bạn để có variables.less và bất kỳ tập tin mixin khác là @import-once, sau đó cũng thêm @import-once 'variables.less vào mỗi tập tin có sử dụng biến từ nó (làm tương tự cho bất kỳ tập tin mixin sử dụng).

Điều này làm là nhập tệp nếu bạn đang làm việc trên nó (như số base.less) của bạn, nhưng khi tất cả các tệp được biên soạn bởi config.less, nó sẽ chỉ nhập variables.less một lần và không phải một lần nữa cho mỗi tệp cũng tham chiếu đến variables.less.