SCSS और क्रॉस-प्लेटफॉर्म ग्रेडिएंट (अच्छी तरह से, लगभग)

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

मैं कभी भी याद नहीं रख सकता कि क्रॉस-ब्राउज़र ग्रेडिएंट के नियमों को सही तरीके से कैसे लिखा जाए, इसलिए मैं हमेशा Google ऑनलाइन सेवाओं (उदाहरण के लिए, यह www.colorzilla.com/gradient-editor ) का उपयोग करता हूं। लोड करने के तुरंत बाद हमें ग्रेडिएंट के लिए कोड मिलता है:

background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */ 

आगे देखते हुए, मैं तुरंत फ़िल्टर कहूंगा : IE के लिए, और Safari4 + के लिए -webkit -gradient को कार्यान्वित करने में असमर्थता के कारण चूकना पड़ा (अच्छी तरह से, या मुझे इसे लागू करने का कोई तरीका नहीं मिला)। इसलिए, शीर्षक "लगभग।" ऊपर से, हमें ऐसा कुछ मिलता है:

 background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ 

यह वही है जो मैंने लागू किया है, जिसके परिणामस्वरूप हमें रंग और स्थिति के "सरणी" के लिए ढाल सेट करने की आवश्यकता है, और आउटपुट पर हमें ऊपर वर्णित नियम मिलेंगे। वास्तव में सरणी ही:

 $gradientOptions: rgba(225,225,225,0) 0%, rgba(225,225,225,1) 10%, rgba(225,225,225,1) 90%, rgba(225,225,225,0) 100%; @include linearGradient(#fff, $gradientOptions , left); 

ऊपर रिकॉर्ड की संरचना के बारे में विस्तार से परीक्षण (परीक्षण और त्रुटि) के बाद, हम 2 दोहराए गए भागों को अलग कर सकते हैं:

 background: -*-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); 

और

 #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100% 

नालियों के लिए "पृष्ठभूमि: रैखिक-ढाल (# 1e5799 0%, # 2989d8 50%, # 207cca 51%, # 7db9e8 100%);" तो हम एक अपवाद बनाते हैं, यह अभी भी रंग-सेटिंग लाइन को दोहराता है।
सामान्य कोड को आउटपुट करने का कार्य नीचे दिया गया है:

 $browsersPrefix: moz o webkit ms; @mixin linearGradient($oldColor, $gradientList, $direction) { background: $oldColor; $directionRevers:null; @if $direction == left { $directionRevers: right; } @else if $direction == right { $directionRevers: left; } @else if $direction == top { $directionRevers: bottom; } @else if $direction == bottom { $directionRevers: top; } @include buildGradientLine($gradientList); @each $prefix in $browsersPrefix { background:-#{$prefix}-linear-gradient($direction, $resultLine); } background: linear-gradient(to $directionRevers, $resultLine); } 

एक छोटी सी व्याख्या: $directionRevers 3 डी मानक के अनुसार नियम के लिए रैवर्स वेरिएबल की आवश्यकता होती है, जहां दिशा इंगित की जाती है कि ढाल किस तरफ जाती है, ब्राउज़र समाधानों के विपरीत जो इंगित करता है कि दिशा कहाँ से शुरू होती है। अरे हाँ, कोड में केवल 4 दिशाएँ हैं, लेकिन जो कोई अधिक लचीला समाधान चाहता है, उसे कोड बनाना आसान है। @each $browsersPrefix में पहले से निर्दिष्ट उपसर्गों पर पुनरावृत्ति करता है। उपसर्ग चर और आपके द्वारा आवश्यक कोड प्रदर्शित करता है।

अनुपलब्ध रेखा @include buildGradientLine($gradientList) और $resultLine चर है। लाइन @include buildGradientLine($gradientList) सिर्फ "रंग रेखा" बनाती है, और चर $resultLine में यह शामिल है:

 $resultLine:null; @mixin buildGradientLine($gradientList) { $resultLine:null; @for $i from 1 through length($gradientList) { $colors: nth($gradientList, $i); $color: nth($colors, 1); $position: nth($colors, 2); $resultLine: $resultLine $color $position; @if $i != length($gradientList) { $resultLine: $resultLine#{','} } } } 

शुरू करने के लिए, हम $resultLine:null घोषित करते हैं $resultLine:null एक वैश्विक चर के रूप में $resultLine:null , और फिर तर्क औसत प्रोग्रामर के लिए स्पष्ट है (यह छात्र को स्पष्ट होना चाहिए, हालांकि, कुछ भी हो सकता है)। वैसे, मुझे कोड के इस भाग के साथ एक समस्या थी। लूप के बजाय, मैंने सामान्य रूप से @each उपयोग किया, जिसके परिणामस्वरूप मुझे एक ही चीज़ मिली, इस अंतर के साथ कि पंक्ति में, अंत में, अंतिम अल्पविराम था जिसके साथ ढाल प्रदर्शित नहीं करना चाहता था। मैं यहाँ पर जासूसी @for साथ समाधान। कौन परवाह करता है कि कोड का यह मुश्किल हिस्सा क्या है:

 $colors: nth($gradientList, $i); $color: nth($colors, 1); $position: nth($colors, 2); 

समझाएं: $colors: nth($gradientList, $i); पूरे सरणी से पाश में मूल्यों की वांछित जोड़ी का चयन करता है, और $color: nth($colors, 1); $position: nth($colors, 2) $color: nth($colors, 1); $position: nth($colors, 2) क्रमशः चर रंग और स्थिति के लिए लिखते हैं।

और इसलिए यह लगभग क्रॉस-ब्राउजर ग्रेडिएंट निकला। मैंने रंग के लिए एक स्थिति के रूप में प्रतिशत का उपयोग करने की कोशिश की, लेकिन इसे पिक्सेल के साथ काम करना चाहिए, मुख्य बात यह नहीं है कि याद न करें। RGBA भी पूरा करता है। डेमो संलग्न नहीं है, क्योंकि अब इसके लिए कोई समय नहीं है, समय दिखाई देगा, मैं निश्चित रूप से इसे जोड़ूंगा।

पुनश्च: कोड एक तैयार समाधान से डाला गया था, इसलिए चर के नाम आंख को चोट पहुंचा सकते हैं। वर्तनी, विराम चिह्न और अन्य चीजों के साथ आप स्वयं जानते हैं कि कहाँ है।