Css seçicilerini ortam sorguları içinde tanımlamak yerine (örnek 1), css seçicileri içindeki ortam sorgularını tanımlarsanız (örnek 2) herhangi bir sorun var (performansım birincil kaygım).Seçiciler içindeki CSS ortam sorgularını tanımlama
Örnek 1 - css seçicileri
.foo {
@media (min-width: 600px) { ... }
@media (min-width: 1000px) { ... }
@media (min-width: 1500px) { ... }
}
.bar {
@media (min-width: 600px) { ... }
@media (min-width: 1000px) { ... }
@media (min-width: 1500px) { ... }
}
.hello {
@media (min-width: 600px) { ... }
@media (min-width: 1000px) { ... }
@media (min-width: 1500px) { ... }
}
.world{
@media (min-width: 600px) { ... }
@media (min-width: 1000px) { ... }
@media (min-width: 1500px) { ... }
}
Sen "? Bunu neden" merak ediyor olabilirsiniz içinde medya sorguları - medya içinde css seçiciler
@media (min-width: 600px) {
.foo { ... }
.bar { ... }
.hello { ... }
.world{ ... }
}
@media (min-width: 1000px) {
.foo { ... }
.bar { ... }
.hello { ... }
.world{ ... }
}
@media (min-width: 1500px) {
.foo { ... }
.bar { ... }
.hello { ... }
.world{ ... }
}
DERS derleme veya tarayıcı oluşturma açısından performans farkı? İkincisi, CSS'nin nasıl oluşturulduğuna bağlıdır, çünkü stil kuralları 'media' kurallarında görünebilir, ancak ** başka bir şekilde değil. – BoltClock
İkinci örnek nasıl çalışır? "Seçiciler" ile, [mixins] (http://lesscss.org/features/#mixins-feature) kastediyor musunuz? Herhangi bir kuralın dışında çağrıldığında, bu karıĢımlar çalıĢmalıdır, ancak sorunuzda yazılı olan afaik değildir. ".foo() {@media {} @media {} @media {}} gibi parantezler eklemeniz gerekir, bu nedenle bu durum (geçersiz) CSS olarak değil, yalnızca bir mixin olarak tanımlanır ve sonra bu mixin olarak adlandırılır. ve her birinde kuralları olan 3 medya kurallarını yayınlayacak – FelipeAls