Sass 3.2 में मीडिया क्वेरी का उपयोग करना

सैस 3.2 की रिलीज़ के साथ, ऑब्जेक्ट ओरिएंटेड सीएसएस (ओओसीएसएस) पथ को द्रव्यमान में आगे बढ़ाना शुरू कर दिया, इसके साथ डीआरवाई सिद्धांत और प्रोग्रामेटिक सोच लाया। मीडिया के प्रश्न और OOCSS आज के सामने के विकास के लिए महत्वपूर्ण हो गए हैं।

आइए देखें कि क्या नया है

Sass में बहुत उपयोगी कार्यक्षमता है, व्यापक रूप से ज्ञात सामग्री नहीं है । हम उपज के रूप में सामग्री के बारे में सोच सकते हैं - यह हमें sass @mixin को परिभाषित करने की अनुमति देता है, जिसमें सीएसएस नेस्टेड है। यह मूल्यवान घंटे बचाएगा और कोड पुनरावृत्ति को कम करेगा और मीडिया प्रश्नों के साथ काम को बहुत सरल करेगा।

यह कैसे काम करता है

पहले आपको चर घोषित करने की आवश्यकता है जो उपकरणों के लिए प्रवेश बिंदु निर्धारित करेगा और हमारे मीडिया प्रश्नों में एक अमूर्त परत जोड़ देगा। ऐसा करने के लिए, @mixin उत्तर दें:

$small: 320px; $large: 1024px; @mixin respond-to($media) { @if $media == handhelds { @media only screen and (max-width: $small) { @content; } } @else if $media == medium-screens { @media only screen and (min-width: $small + 1) and (max-width: $large - 1) { @content; } } @else if $media == wide-screens { @media only screen and (min-width: $large) { @content; } } } .block { float: left; width: 250px; @include respond-to(handhelds) { width: 100% ;} @include respond-to(medium-screens) { width: 125px; } @include respond-to(wide-screens) { float: none; } }​ 

कोड को डिक्रिप्शन की तुलना में बेहतर पढ़ा जाता है और तुरंत अधिक सार्थक होता है, उदाहरण के लिए, मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 320px) और (ओरिएंटेशन: पोर्ट्रेट)।
सभी जादू सामग्री है , जो हमें सीएसएस में उन गुणों को पारित करने की अनुमति देता है जिन्हें हम ऊपर मीडिया अनुरोध के अनुसार लागू करना चाहते हैं। हम नहीं जान सकते कि भविष्य में किस डिजाइन की आवश्यकता होगी, लेकिन इस अमूर्तता के माध्यम से इन परिवर्तनों के होने पर शैलियों को अद्यतन करना आसान होगा।
सैस संकलित करने के बाद, हमें आपके द्वारा आवश्यक सीएसएस मिलता है:

 .block { float: left; width: 250px; } @media only screen and (max-width: 320px) { .block { width: 100%; } } @media only screen and (min-width: 321px) and (max-width: 1023px) { .block { width: 125px; } } @media only screen and (min-width: 1024px) { .block { float: none; } }​ 

यदि आपको उदाहरण के लिए, आईपैड-लैन्सस्केप की तुलना में कम सीएसएस का उपयोग करने की आवश्यकता है, तो आप प्रतिक्रिया-भिन्नताओं को चित्रित नहीं कर सकते हैं, लेकिन एक नया @mixin बनाएं जो विभिन्न उपकरणों के लिए अनुकूलित किया जाएगा:

 $ipad-landscape: 980px; @mixin apply-to($ltgt, $device) { $extrema: null; @if $ltgt == less-than { $extrema: max; } @if $ltgt == greater-than { $extrema: min } @if $device == $ipad-landscape { @media only screen and (#{$extrema}-width: $ipad-landscape) { @content; } } } .block { @include apply-to(less-than, ipad-landscape) { background: black; } }​ 

किन समस्याओं का सामना करना पड़ सकता है

यह सब बहुत ठीक है और आपको दिलचस्प इंटरफेस बनाने की अनुमति देता है, लेकिन यह IE में नौवें संस्करण से नीचे काम नहीं करेगा। समस्या का समाधान अलग शैली की फाइलें तैयार करना है:

 <!--[if lte IE 8]> <link rel="stylesheet" href="css/all-old-ie.css"> <![endif]--> <!--[if gt IE 8]><!--> <link rel="stylesheet" href="css/all.css"> <!--<![endif]--> 

चर $old-ie: true; IE के लिए फ़ाइल में $old-ie: true; घोषित किए गए हैं $old-ie: true; और आवश्यक चौड़ाई फिक्सिंग और मुख्य शैली फ़ाइल आयात की जाती है। मुख्य शैली फ़ाइल में IE $ पुराने-यानी चर झूठे डिफ़ॉल्ट होंगे। IE के लिए आपको @mixin लिखना होगा और आवेदन-पत्र की कार्यक्षमता बढ़ानी होगी:

 @mixin old-ie { @if $old-ie { @content; } } @mixin apply-to($ltgt, $device) { $extrema: null; @if $ltgt == less-than { $extrema: max; } @if $ltgt == greater-than { $extrema: min } @if $fix-mqs-ipad-landscape { @content; } @else { @media screen and (#{$extrema}-width: $device) { @content; } } } .block { @include apply-to(less-than, $ipad-landscape) { float: left; width: 70%; @include old-ie { content: ' ,     IE'; } } } 

मीडिया के प्रश्नों के अंदर @ कस्टम का उपयोग करने पर भी कुछ प्रतिबंध हैं ... इसका मतलब है कि यदि आप मीडिया के प्रश्नों में @ कस्टम का उपयोग करते हैं, तो आप केवल उसी ब्लॉक में दिखाई देने वाले चयनकर्ताओं का विस्तार कर सकते हैं। उदाहरण के लिए, यह कोड ठीक काम करता है:

 @media only screen and (max-width: 320px) and (orientation: portrait){ .error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } } 

यह विकल्प गलत है:

 .error { border: 1px #f00; background-color: #fdd; } @media only screen and (max-width: 320px) and (orientation: portrait) { .seriousError { @extend .error; border-width: 3px; } } 

लेकिन हम अन्यथा मौन वर्गों का उपयोग करके कर सकते हैं जो शैलियों में नहीं आते हैं जब तक कि हम उन्हें @ टेक्स्ट नहीं बनाते हैं।

 //silent class %big { width: 20px; height: 20px; } .block_1 { @extend %big; } .block_2 { @include respond-to('large'){ @extend %big; } } .block_3 { @include respond-to('large'){ @extend %big; } } 

सही संकलित सीएसएस प्राप्त करें:

 .block_1 { height: 20px; width: 20px; } @media screen and (min-width: 600px) { .block_2, .block_3 { height: 20px; width: 20px; } } 

इसके अलावा, हर कोई संकलित सीएसएस को छोटा और व्यक्तिगत अनुरोध नियमों के सीएसएस को संयुक्त करना पसंद करेगा, उदाहरण के लिए:

 .profile-pic { @media screen and (max-width: 320px) { width: 100px; float: none; } } .biography { @media screen and (max-width: 320px) { font-size: 15px; } } 

मैं प्राप्त करना चाहते हैं:

 @media screen and (max-width: 320px) { .profile-pic { width: 100px; float: none; } .biography { font-size: 15px; } } 

इसके बजाय, हमें मिलता है:

 @media screen and (max-width: 320px) { .profile-pic { width: 100px; float: none; } } @media screen and (max-width: 320px) { .biography { font-size: 15px; } } 

जब रेल 3.1+ और Sprockets के साथ काम कर रहे हों, तो आप CSS नियमों को आशातीत रूप से संयोजित करने के लिए sprockets-media_query_combiner जैम का उपयोग कर सकते हैं।
मीडिया प्रश्नों के अधिक सुविधाजनक उपयोग के लिए, एक अच्छा जाम भी है जो उत्तरदाता परियोजना में उपयोग किया जा सकता है।

टेबलेट या फ़ोन पर आपकी साइट देखने वाले आगंतुक निश्चित रूप से आपका धन्यवाद करेंगे।