कम सीएसएस सेट चर?

Question

मैं एक आईपैड-विशिष्ट वेबसाइट पर काम कर रहा हूं। दोनों रेटिना प्रदर्शन iPad और iPads के पुराने संस्करणों पर मेरी वेबसाइट काम करने के लिए, मैं की तरह मीडिया क्वेरी में कम सीएसएस में एक चर सेट करना चाहते हैं:

@media all and (max-width: 768px) { 
    @ratio: 1; 
} 

@media all and (min-width: 769px) { 
    @ratio: 2; 
} 

तो जब आप पिक्सल में कुछ भी तय कर रहे हैं, आप कर सकते हैं

width: 100px * @ratio; 

लेकिन मुझे एक संकलन त्रुटि मिली है जो @ratio परिभाषित नहीं है। क्या यह काम करने के लिए एक कामकाज संभव है? धन्यवाद।

Answer 1

यह अच्छा होगा, लेकिन ऐसा करना असंभव है।

कम मीडिया मीडिया प्रश्नों को वास्तविक मीडिया प्रश्नों में संकलित करता है, इसलिए संकलन समय पर कोई संकेत नहीं है कि कौन सी मीडिया क्वेरी ब्राउज़र के लिए प्रासंगिक होगी।

संकलन समय के बाद आपके पास सीएसएस कम नहीं है, इसलिए अब आपके पास चर नहीं हो सकते हैं।

आप इस के बजाय कर सकते हैं, लेकिन यह के रूप में सुंदर नहीं है:

@base_width: 100px; 

@media all and (max-width: 768px) { 
    .something { 
     width: @base_width; 
    } 
} 

@media all and (min-width: 769px) { 
    .something { 
     width: @base_width * 2; 
    } 
} 

Answer 2

कि एक छोटे से hackish है, लेकिन एक संभव समाधान em करने के लिए एक आवरण तत्व के लिए फ़ॉन्ट आकार सभी इकाइयों की स्थापना की और स्थापित करने के लिए है :

HTML:

<div id="wrap"> 
    <div class="child1"></div> 
    <div class="child2"></div> 
</div> 

कम:

#wrap 
    { 
    font-size: 100px; 
    width: 10em; // = 1000px; 
    @media all and (max-width: 768px) 
     { 
     font-size: 60px; 
     } 
    .child1 
     { 
     width: 5em; // 500px normally, 300px on small screens 
     } 
    .child1 
     { 
     width: 2.5em; // 250px normally, 150px on small screens 
     } 
    } 

यदि आपके पास टेक्स्ट और बच्चे वाले तत्व हैं तो निश्चित रूप से काम नहीं करता है।

Answer 3

कम से कम हम मीडिया क्वेरी के लिए चर परिभाषित कर सकते हैं।

@iPad: ~"only screen and (min-width: 40.063em) and (max-width: 64em); 

ये 641px और 1024px गुणा की उन्हें बराबर हैं:
सब से पहले आईपैड संकल्प का पता लगाने।

@highResolution: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)", 
      ~"only screen and (min--moz-device-pixel-ratio: 1.5)", 
      ~"only screen and (-o-min-device-pixel-ratio: 3/2)", 
      ~"only screen and (min-device-pixel-ratio: 1.5)"; 

अब हम इस तरह एक मीडिया क्वेरी में इन 2 चर गठजोड़ कर सकते हैं:

@media @iPad, @highResolution{ .yourCssClass{} } 

यह सिर्फ आईपैड पर मान्य होगा या (समान


अब उच्च संकल्प का पता लगाने के संकल्प) रेटिना डिस्प्ले (या समान पिक्सेल घनत्व) के साथ।

Answer 4

कम वर्तमान में ऐसा नहीं कर सकता है, हालांकि यह करने के लिए तकनीकी रूप से संभव होगा। गिटहब मुद्दे में Less variables in media queries नामक इस सुविधा का अनुरोध किया गया है।

भी इस सवाल देखें: CSS pre-processor with a possibility to define variables in a @media query

Answer 5

मैं के रूप में संकलक mixin शिकायत करेगा परिभाषित नहीं किया गया था, स्वीकार किए जाते हैं समाधान नहीं मिला काम करने के लिए नहीं।एक वैकल्पिक समाधान:

@base_width: 100px; 

.mixin { 
    width: @base_width; 

    @media all and (min-width: 769px) { 
     width: @base_width * 2; 
    } 
} 

Answer 6

मुझे पता है कि मुझे अपने उत्तर के साथ देर हो चुकी है लेकिन किसी को यह उपयोगी मिल सकता है।

आप

// styles.less 
.foo { 
    width: 100px * @ratio; 
} 

एक अलग फाइल करने के लिए अपनी शैली स्थानांतरित कर सकते हैं और फिर चर 'मान बदलने

// main.less 
@ratio: 1; // initial value 

@media all and (max-width: 768px) { 
    @ratio: 1; 
    @import (multiple) "styles"; 
} 

@media all and (min-width: 769px) { 
    @ratio: 2; 
    @import (multiple) "styles"; 
} 

ध्यान दें कि (कई) यहां महत्वपूर्ण

है के बाद फ़ाइल को कई बार आयात

संकलित कोड इस

जैसा दिखेगा

// main.css 
@media all and (max-width: 768px) { 
    .foo { 
    width: 100px; 
    } 
} 
@media all and (min-width: 769px) { 
    .foo { 
    width: 200px; 
    } 
}