Modernizr için yararlı LESS CSS sözdizimi

Question

Genellikle tarayıcı yeteneklerini öğrenmek için modernizr kullanın. Aynı zamanda, css'yi daha okunabilir ve sürdürülebilir yapmak için LESS CSS kullanıyorum. DAHA AZ iç içe kurallarını kullanarak Ortak stil şuna benzer:

#header { 
    color: black; 

    .logo { 
    width: 300px; 
    color: rgba(255,255,255,.6); 
    &:hover { text-decoration: none } 
    } 
} 

Sonra ben modernizr stil sonbahar-geri kullanırsanız, önceki blok için bu metni ekleyin: Yani

.no-js #header, 
.no-rgba #header { 
    .logo { 
    color: white; 
    } 
} 

ben var gibi, görünüşe iki kod kodu ve her seferinde başka bir uyumluluk açısından bakmam gerektiğinde, braketlerin sayısı artacaktır. Bu kod daha az sürülebilirdir, çünkü her öğeye uygulanan tüm stilleri bulmanız gerekir ve iç içe geçmiş sınıfları kullanarak elde ettiğimiz fayda ortadan kalkar.

Soru: LESS sözdiziminde, bu gibi geri-destekleri içerecek ve .no-js ve diğer .no-smth sınıfları için yeni bir kod dalı başlatmanın bir yolu var mı?

Answer 1

Artık bu sorunu çözmek için & operatörünü kullanabilirsiniz. Aşağıdaki sözdizimi, less.js içinde lessphp ve dotless çalışması gerekir:

#header { 
    .logo { color:white; } 
    .no-rgba &, 
    .no-js & { 
     .logo { color:green; } 
    } 
} 

: Aşağıdaki sözdizimini kullanabilirsiniz verilen örneğin

a b { color:red; } 

Yani:

b { 
    a & { 
    color: red; 
    } 
} 

Bu derlenir.Bu

... hangi dilde derlenebilir:

#header .logo { 
    color:white; 
} 
.no-rgba #header .logo, 
.no-js #header .logo { 
    color:green; 
} 

Answer 2

Yaklaşmayı düşünebilmemin en iyi yolu, bu geri dönüşler için ayrı bir .less dosyasına sahip olmaktır. Bence bu, yönetilmesi daha kolay olacaktı, bu yüzden birçok yerde .no-rgba için etrafa bakmanıza gerek yok.

.no-rgba { 
    #header {} 
    #footer {} 
} 

.no-js { 
    #header {} 
    #footer {} 
} 

Bunu istedim ama ugursuz oldugunu nasıl bir çözüm ile geliyor çalıştım.