sass
कम्पास CSS3 मिक्सिन
खोज…
परिचय
Sass exentsion Compass का उपयोग करके गाइड प्राप्त करना शुरू करें। CSS3 से निपटने के दौरान कम्पास बहुत उपयोगी है क्योंकि यह CSS3 सुविधाओं का उपयोग करके हर ब्राउज़र का समर्थन करने के लिए 1 लाइन लिखने के लिए मिश्रण प्रदान करता है। स्प्राइट छवियों को शामिल करना भी बहुत अच्छा है।
पर्यावरण स्थापित करें
अपनी कमांड लाइन खोलें
रूबी का उपयोग कर स्थापना
gem update --system
gem install compass
एक प्रोजेक्ट बनाएं
compass create <myproject>
यह एक कम्पास परियोजना को इनिशियलाइज़ करेगा। यह एक फोल्डर को जोड़ेगा जिसे नाम दिया गया है। फ़ोल्डर की तरह दिखेगा निम्नलिखित संरचना:
| फ़ाइल फ़ोल्डर | विवरण |
|---|---|
| सास / | इस फोल्डर में आपको sass / scss फाइल्स डालें |
| स्टाइलशीट / | इस फ़ोल्डर में आपका संकलित सीएसएस संग्रहीत किया जाएगा |
| config.rb | कम्पास को कॉन्फ़िगर करें - उदाहरण के लिए फ़ोल्डर पथ, सैस संकलन |
कम्पास का उपयोग करें
compass watch
यह आपकी sass फ़ाइलों को हर बार जब आप उन्हें बदलेंगे, संकलन करेंगे। Sass फ़ोल्डर पथ को config.rb के अंदर बदला जा सकता है
कम्पास के साथ CSS3 का उपयोग करना
आप एक पूर्ण संदर्भ पा सकते हैं जो CSS3 के घटक इस पृष्ठ पर समर्थित हैं
अपने प्रोजेक्ट में CSS3 का उपयोग करने के लिए कंपास हर ब्राउज़र में CSS3 की विशेषताओं का समर्थन करने के लिए मिश्रण प्रदान करता है। आपकी Sass / Scss फ़ाइल के ऊपर आपको यह निर्दिष्ट करना होगा कि आप कम्पास का उपयोग करना चाहते हैं
@import "compass/css3";
बॉर्डर-त्रिज्या
अपनी sass फ़ाइल में कम्पास के साथ सीमा-त्रिज्या शामिल करें:
div {
@include border-radius(4px);
}
सीएसएस उत्पादन
div {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
जैसा कि आप देख सकते हैं कि आप सामान्य सीएसएस नाम का उपयोग कर सकते हैं। इसके सामने सिर्फ @include रखें और अपने मान को सेट करने के लिए उपयोग करें ()।
फ्लेक्सबॉक्स उदाहरण
.row {
@include display-flex;
@include flex-direction(row);
}
सीएसएस आउटपुट
.row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
निष्कर्ष
यह केवल दो उदाहरण हैं। कम्पास बहुत अधिक CSS3 मिश्रण प्रदान करता है। कम्पास का उपयोग करना बहुत आसान है और आपको चिंता करने की ज़रूरत नहीं है कि आप किसी निर्दिष्ट ब्राउज़र के लिए CSS3 के घटक को परिभाषित करना भूल गए हैं। यदि ब्राउज़र CSS3 की सुविधा का समर्थन करता है, तो कम्पास इसे आपके लिए परिभाषित करेगा।