Dinamik Arka Plan Rengi Edin, LESS Kullanarak Ayrı Öğeye Uygula

Question

Burada, LESS kullanarak rengin dinamik olarak güncellenmesi hakkında birçok tartışma var, örn .: dynamically change LESS variables in page with JavaScript. Ama henüz benim meydan okumam gereken özel bir şeyi görmedim.

Firmamız arka plan rengi de dahil olmak üzere kullanıcı arabirimi üzerinde kullanıcılara geniş esneklik sağlayan bir web yazılımı sağlar. Ancak, uygun kullanıcı deneyimini sağlamak için arka plan rengine sahip olma ihtiyacını değiştiremedikleri bir dizi unsur vardır (bkz. Bootstrap Glyphicon sorgum here - eminim orada da bir cevap bekliyoruz). Kullanıcının herhangi bir zamanda arka plan rengi olarak ayarladığı her şeyi alan ve bunu dinamik olarak diğer öğelere uygulayan bir çözüm bulmak istiyorum. Bunu Javascript aracılığıyla yapabilirim, ancak kullanıcı arayüzünde tercih edilen kullanıcı arayüzüne dayalı olarak dinamik olarak güncellenen bir unset mixin yaratmak için uygulama yığınımızda LESS kullanımımızı kullanabilmem gerekiyor gibi görünüyor. LESS çözümünü formüle etmek için birçok girişimde bulunmayı denedim.

Yanlış ağacı havlıyor muyum? JS rotasına gitmeden önce, herkesin bu zorluk için LESS tabanlı bir çözüm önerisinde bulunup bulunmadığını görmek istiyorum. Her zaman olduğu gibi, burada sağlayabileceğiniz herhangi bir yardım için şimdiden teşekkürler.

Answer 1

Ben genellikle tarayıcıda AZ kullanmayan değişken değişikliği css transpile sunucu yeniden olması gerekir, ancak sağlanan belgeler ile gidiş here Eğer parametre kümesi temelinde CSS dosyası oluşturur ve bir aracılığıyla yayınlanan alır yapılandırma tahrik css jeneratör, sahip olacaktır

<!-- Here: include any less plugin scripts, any required browser shims and optionally set less = any options --> 
<script src="less.js"></script> 
<link rel="stylesheet/less" type="text/css" href="styles.less" /> 
<link data-dump-line-numbers="all" data-global-vars='{ "myvar": "#ddffee", "mystr": "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less"> 

daha iyi bir yaklaşım olarak sizin daha az dosyaları derler javascript dosyaya bağlantı olabilir CDN.

Answer 2

sadece daha az değişkenler kullanabilirsiniz, ancak tarayıcıda transpile veya