@viewport, @media और LESS

Question

मैंने हाल ही में .NET अनुप्रयोग के साथ उपयोग के लिए कुछ सीएसएस को कम करने के लिए परिवर्तित कर दिया है (मैं रनटाइम पर कम से कम संकलित करने के लिए .NET, http://www.dotlesscss.org/ के लिए डॉटलेस का उपयोग कर रहा हूं)।

संकलक कोड के इन दो ब्लॉक पर नीचे गिर रहा है:

@viewport { 
    width: device-width; 
} 
/* Add a min-width for IE 8 and lower */ 
@media \0screen\,screen\9 { 
    body { 
     min-width: 960px; 
    } 
} 

बस आपके संदर्भ के लिए

, ऊपर मीडिया क्वेरी आईई

मैं कैसे "कम-ify कर सकते हैं लक्षित कर की एक hacky तरीका है "कोड के इन ब्लॉक?

Answer 1

कम में> = 1.4.0 आप बस एक चर को परिभाषित करने और मीडिया क्वेरी में इसका इस्तेमाल कर सकते हैं:

@iehack: \0screen\,screen\9; 

@media @iehack { 
    body { 
     min-width: 960px; 
    } 
} 

कम के पुराने संस्करणों (< = 1.3.3) में आप स्ट्रिंग का उपयोग करना चाहते हो सकता है परिवर्तनीय में स्ट्रिंग इंटरपोलेशन:

@iehack: ~'\0screen\,screen\9'; 

यह आपको अपना वांछित आउटपुट देना चाहिए।

लेकिन अगर आप सीएसएस में एक hacky रास्ते जाने के लिए आप के रूप में अच्छी भी कम समय में एक hacky रास्ता तय कर सकते हैं:

@themedia: ~"@media \0screen\,screen\9 {"; 
@aftermedia: ~"} after"; 
@{themedia} { 
    body { 
     min-width: 960px; 
    } 
} 
@{aftermedia}{/*just to add the closing bracket to media*/} 

जहां एक सामान्य भूमिका के चारों ओर मीडिया क्वेरी इंजेक्षन, इस एक अतिरिक्त चयनकर्ता उत्पन्न करता है मीडिया ब्लॉक के अंत में, लेकिन आप इसका उपयोग कुछ उपयोगी के लिए भी कर सकते हैं, इस तकनीक का उपयोग मीडिया प्रश्नों की तुलना में more exciting instances में किया जा सकता है ... लेकिन मैं बस इसका उल्लेख करना चाहता था।

@media \0screen\,screen\9 { 
body { 
    min-width: 960px; 
} 
} 
after { 
    /*just to add the closing bracket to media*/ 
}