का प्रयोग कक्षा में mixin के रूप में मीडिया क्वेरी में सेट कम

Question

मैं एक मीडिया क्वेरी के अंदर सेट के रूप में mixins बजाय html में अन-अर्थ वर्ग के नाम को एम्बेड की एक वेबसाइट में उपयोग करने के लिए कक्षाओं का एक सेट का पुन: उपयोग करने के लिए कोशिश कर रहा हूँ।

यहां मेरी समस्या का एक उदाहरण है।

@media (min-width: 1000px) { 

    .foo{width:120px;} 
    .foo-2{width:150px;} 
} 
@media (max-width: 999px) { 

    .foo{width:110px;} 
    .foo-2{width:120px;} 
} 

.bar{.foo;} 
.bar-2{.foo;} 
.bar-3{.foo-2;} 

.bar-X कभी भी कोई शैलियों को लागू नहीं करेगा। मुझे लगता है कि यह हो रहा है क्योंकि कम से कम मीडिया प्रश्नों के अंदर .bar-X नहीं बना है, इसलिए कुछ भी लागू नहीं किया जाएगा।

इस कम में एक बग, या कुछ और मैं प्राप्त नहीं कर सकता है? इसके लिए एक कामकाज आदर्श होगा।

Answer 1

आपकी समस्या एक आम गलतफहमी है। कम प्रक्रिया@media क्वेरी, ब्राउज़र के बाद कम अपने काम किया है करता नहीं करता है। कम केवल सीएसएस कोड बना सकता है जिसे ब्राउज़र पढ़ने जा रहा है। तो @media कम करने के लिए "व्यर्थ" है, यह सिर्फ किसी भी अन्य चयनकर्ता (.someClass div table, आदि) की तरह है, यह केवल प्रक्रियाओं क्या @media ब्राउज़र की सेवा करने के लिए जा रहा है।

तो इसका मतलब है कि आपको @media ब्लॉक में @media के लिए अपने सभी कोड डालने की आवश्यकता है। लेकिन आप दोहराए गए कोड का गुच्छा भी नहीं चाहते हैं। बजाय, अपने @media कोड निर्धारित करते हैं, और फिर मीडिया के प्रश्नों से कि mixin कॉल करने के लिए एक मास्टर mixin बनाएँ:

@media (min-width: 1000px) { 
    .foo {width: 120px;} 
    .foo-2 {width: 150px;} 
    .bar {width: 120px;} 
    .bar-2 {width: 120px;} 
    .bar-3 {width: 150px;} 
} 
@media (max-width: 999px) { 
    .foo {width: 110px;} 
    .foo-2 {width: 120px;} 
    .bar {width: 110px;} 
    .bar-2 {width: 110px;} 
    .bar-3 {width: 120px;} 
} 

कुछ अधिक जानकारी मैं पर दिया है के लिए:

.makeFooGroup(@w1, @w2) { 
    .foo {width: @w1} 
    .foo-2{width: @w2} 
    .bar{.foo} 
    .bar-2{.foo} 
    .bar-3{.foo-2} 
} 

@media (min-width: 1000px) { 
    .makeFooGroup(120px, 150px); 
} 
@media (max-width: 999px) { 
    .makeFooGroup(110px, 120px); 
} 

इस सीएसएस का उत्पादन कम और @media इस से संबंधित, देखें:

1. CSS pre-processor with a possibility to define variables in a @media query
2. Media Query grouping instead of multiple scattered media queries that match