less.css chia sẻ các biến trên các tệp

Question

Tôi đang sử dụng less.css để đơn giản hóa kiểu css của mình. Tôi muốn khai báo một biến thể trong một tệp nhỏ hơn và chia sẻ việc sử dụng nó trong nhiều tệp của tôi. Điều này có thể không? Ví dụ:

english.less

@languageFloat: left;

chart.less

div#footer a.web 
{ 
    display: block; 
    float: @languageFloat; 
    color: #cccccc; 
    margin-right: 10px; 
} 

Answer 1

Cách tốt nhất để làm điều này là để @import tập tin LESS của bạn với tất cả các biến của bạn trong đó. Dưới đây là cú pháp cho các từ khóa @import:

// For LESS file includes, 
@import "lib.less"; 
// or 
@import "lib"; // infers the .less extension 

// and for plain CSS includes which are added but not parsed by LESS 
@import "style.css"; 

này hoạt động đặc biệt tốt nếu bạn phục vụ file CSS để người dùng của bạn (như trái ngược với trong trình duyệt less.js phân tích cú pháp) vì báo cáo kết quả @import sẽ hợp chất LESS của bạn và các tệp CSS thành một tệp CSS duy nhất. Có lẽ bạn có thể xem xét việc có một tệp LESS điều khiển bao gồm các biến của bạn, sau đó là các tệp LESS và CSS khác của bạn sao cho kết quả cuối cùng là một tệp duy nhất mà bạn cung cấp cho trình duyệt.

tôi tưởng tượng nó sẽ là một cái gì đó đơn giản như thế này:

// Controller.less 
@import "english.less"; 
@import "chart.less"; 

Answer 2

// ví dụ BlueTheme.less Ít tập tin ---------
@import "DefaultBlueParameters.less"; < --- chỉ theme ít vars

@import (less) "DefaultBase.css"; < --- có sử dụng DefaultBlueParameters.less vars

Nó tạo BlueTheme.css