less.js kullanarak daha az değişken listesi alın

Question

İstemci tarafı kullanıyorum. Tüm değişkenleri daha az dosyamdan almanın bir yolu var. Ben değişkenlerini değiştirmek için biliyorum:

less.modifyVars({ 
    "@var": "#fff" 
}); 

Ama (işe yaramaz) gibi hepsini almak istiyorum: o göründüğü gibi bu alışılmamış cevap olacak

var variables = less.getVars(); 

Answer 1

Bu veriler, tarayıcıya bakan API'nın bir parçası olarak herkese açık olarak gösterilmez.

---

tl; dr

• kaydet less.js dosyanın yerel bir kopyası.
yere

function exposeVars(root) { 
    var r=root._variables,n=Object.keys(r),m={} 
    for(var k of n){m[k]=r[k].value} 
     less.variables = m; 
} 

• sadece hat ~ 2556 tarihinde return result önce aşağıdaki çağrıyı exposeVars(evaldRoot) Ekle Bu fonksiyon tanımını ekleyin.

• Şimdi less.variables dosyanızdaki tüm değişkenleri içermektedir.

Yasal Uyarı: Bunu yapmak iyi bir fikir değildir! Bir şeyleri oynamak, hata ayıklamak ya da bir şeyleri test etmek istiyorsanız iyi olur, ancak ciddi bir şey için bu hacke bağlı değilsiniz!

---

burada temel amaç

.less dosyaları soyut sözdizimi ağaçlar (veya başka bir resmi yapıya) haline getirilir kaynağında noktayı bulmaktı.

Düzgün kaynağa atlayarak, bir ParseTree sınıfı buldum. Daha az dosyanın ayrıştırılması sonucunu içereceğini tahmin etmek makul bir varsayımdır.

Hızlı bir test dosyası yazdım ve tarayıcıya uygun etiketle ekledim. Bu şuna benzer:

@myvar: red; 
@othervar: 12px; 

body { 
    padding: @othervar; 
    background: @myvar; 
} 

Ben less.js yerel bir kopyasını indirip bir kesme noktası ben sunulmuştu ve bulunan ne olduğunu görmek için yerel kapsamda etrafında bir körü vardı 2556.

satır ilave ekledik evaldRoot adlı bir nesnede değişkenler.

evaldRoot = { 
    _variables: { 
    @myvar: { 
     name: '@myvar', 
     value: Color 
    }, 
    @othervar: { 
     name: '@othervar', 
     value: Dimension 
    } 
    } 
} 

Sonraki iş bu verinin nereye gittiğini bulmaktı. Görünen CSS'yi oluşturmak için evaldRoot değişkeni kullanıldı (değişken gibi bilgiler içerdiğinden anlam ifade eder). o result.css olarak CSS bir dizi üretmek için kullanılır sonra ne olursa olsun

if (options.sourceMap) { 
    sourceMapBuilder = new SourceMapBuilder(options.sourceMap); 
    result.css = sourceMapBuilder.toCSS(evaldRoot, toCSSOptions, this.imports); 
} else { 
    result.css = evaldRoot.toCSS(toCSSOptions); 
} 

, değişkenler kapsam dışına gider.

Bu değişkenleri açığa çıkarmak için komut dosyasının küçük bir değişiklik yapması gerekiyor. Değişkenleri bir şekilde herkese açıklamak zorunda kalacaksınız. İşte bunun bir örneği.

function exposeVars(root) { 
    var varNames = Object.keys(root._variables); 

    var variables = varNames.reduce(function(varMap, varName) { 
    varMap[varName] = root._variables[varName].value; 
    }, {}); 

    less.variables = variables; 
} 

Bu, breakpoint ile dönüş ifadesinden hemen önce eklenebilir.

exposeVars(evaldRoot); 
return result; 

Şimdi değişkenler küresel less nesne üzerinde bir name: value nesne satışa sunulacak.

Hatta less.getVars() bir çağrı değişkenleri dönmek için maruz işlevini değiştirebilir. İlk öneriniz gibi.

function exposeVars(root) { 
    // ... 
    less.getVars = function() { 
    return variables; 
    }; 
}