Tek bir LESS dosyasında değişkenleri tanımlayın

Question

CSS öğelerini basitleştirmek için LESS'i kullanmaya yeni başladım. Renkleri tek bir dosyada tanımlayabilmek istiyorum, bu yüzden hangi dosyaya başvurulduğunu değiştirerek değiştirebileceğim birkaç renk şemasına sahip olabilirim.

böyle bir şey denedim:

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

Ama styles.less dosyada hatalar "değişken tanımlı değil" olsun.

Ben styles.less başında import "/css/colours.less" kullanarak bu "düzeltme" olabilir, ama her tek AZ dosya için bunu yapmak zorunda ve bu çok, çok zor kullanılıyor hangi dosya değiştirmek için yapar.

Tek bir dosyadaki değişkenleri tanımlamanın ve bunları başka birinde kullanmanın bir yolu var mı? Veya diğer dosyaların başında colours.less dosyasını otomatik olarak içe aktarmanın herhangi bir yolu var mı?

Answer 1

Tek .css dosya halinde .less dosyalarının derlenmesi ve her sayfada bir kez olmak üzere edilmelidir (yani styles.lessstyles.css için derlenmiş). Bu şekilde tarayıcı, her sayfa yükünü CSS'yi yeniden derleme yüküne sahip değildir. Ayrıca .css dosya önbelleğe alınabilir. Bunun yerine eklemenin

:

<link href="/css/colours.less" /> 
<link href="/css/styles.less" /> 
<link href="/css/forms.less" /> 
<link href="/css/widgets.less" /> 
...etc... 

Olmalıdır:

<link href="/css/styles.css" /> 

Ve styles.less sen sahip olmalıdır:

@import 'colours'; 
@import 'forms'; 
@import 'widgets'; 
...etc... 

Aksi takdirde, birden içinde colours.less yeniden kullanmak istiyorsanız .less stil sayfaları,gerekir Her bir stil sayfasında 210. geliştirme amaçları için

---

, sadece değişken bildirimleri ve @import ifadeleri içeren tek birincil .less dosyası kullanmanızı öneririz. Bu şekilde ek komutların eklendiği yeri bulmak kolaydır. LESS, kodu düzenli tutmak için stil sayfaları eklemeyi veya kaldırmayı çok kolaylaştırır.

... 
@import 'modules/events'; 
@import 'modules/foo'; //add another module 
... 

Ayrıca yapar: Bu yapı sayesinde böyle yeni bir modül eklerken, yeni bir stil eklemek için yapar

// import statements 
@import 'core'; 
@import 'mixins'; 
@import 'lists'; 
@import 'buttons'; 

@import 'forms/form'; 
@import 'forms/search'; 
@import 'forms/contact-us'; 

@import 'modules/module'; 
@import 'modules/archive'; 
@import 'modules/events'; 

// variables 
@image-path: '/assets/images/'; 

@font: Helvetica, Arial, sans-serif; 

@black: #000; 
@dark-grey: #333; 
@grey: #888; 
@light-grey: #CCC; 
@white: #FFF; 
@red: #F00; 

: Örneğin

, style.less benzeyebilecek Artık kullanılmıyorlarsa stilleri kaldırmak çok kolaydır. foo modülünün kaldırılması gerekiyorsa, foo stillerini kaldırmak için @import 'modules/foo'; ifadesini kaldırmanız yeterlidir.