कम्पास - CSS के साथ कुशलता से काम करने का एक उपकरण

CSS3 की रिलीज़ के साथ, बहुत सारे नवाचार दिखाई दिए: नई संपत्तियों के साथ, शैलियाँ अधिक जटिल हो गईं, लेकिन कोड दोहराव सहित नई और पुरानी जटिलताओं का समर्थन करने के लिए कोई सुधार नहीं हुआ। प्योर CSS में @import का अभाव है, क्योंकि फाइलों में स्टाइल को विभाजित करने और @import माध्यम से जोड़ने से प्रदर्शन पर प्रतिकूल प्रभाव पड़ता है।
सीएसएस प्रीप्रोसेसरों में इन समस्याओं का समाधान पाया गया, उनकी मदद से चर का उपयोग करना संभव हो गया, कोड में गणितीय गणना करना, मिश्रण और वंशानुक्रम का उपयोग करके कोड का पुन: उपयोग करना संभव हो गया। प्रीप्रोसेसरों की विचारधारा संदर्भ द्वारा शैली की फ़ाइलों के तार्किक पृथक्करण पर आधारित है - प्रतिरूपकता समस्या हल हो गई है। बेशक, प्लस टीम में कोड संघर्ष के जोखिम को कम करता है, कोड के माध्यम से नेविगेशन बहुत अधिक सुविधाजनक हो जाता है। प्रीप्रोसेसरों में भी लूप का उपयोग करके कोड उत्पन्न करना संभव हो गया, एसएएसएस में यह इस तरह दिखता है:

 /* SCSS */ $animals: puma, sea-slug, salamander; @each $animal in $animals { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } 

 /*  CSS */ .puma-icon { background-image: url("/images/puma.png"); } .sea-slug-icon { background-image: url("/images/sea-slug.png"); } .salamander-icon { background-image: url("/images/salamander.png"); } 

या:

 /* SCSS */ @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } 

 /*  CSS */ .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } 

कम्पास के बारे में थोड़ा सा

कम्पास सिर्फ एक सीएसएस प्रीप्रोसेसर से अधिक है, कम्पास डेवलपर्स इसे एक डिजाइन फ्रेमवर्क के रूप में रखते हैं। कम्पास SASS सिंटैक्स (.sass या .scss) का उपयोग करता है, इसलिए किसी भी SASS कोड को कंपास में भी संकलित किया जाएगा।
कम्पास की मुख्य अवधारणाओं में से एक है, स्टाइल सपोर्ट का सरलीकरण और सरलीकरण, जो आपको स्टाइलिंग पर ध्यान केंद्रित करने और पुराने ब्राउज़र को सपोर्ट करने के लिए न्यूनतम प्रयास करने की अनुमति देता है, इसलिए कम्पास की व्यापक कार्यक्षमता है और अधिकांश CSS फ्रेमवर्क के साथ काम करता है:
- छवियों, CSS3, फोंट, लेआउट के साथ काम करने के लिए बड़ी संख्या में अंतर्निहित मिश्रण;
- सूची, तालिकाओं, लिंक जैसे बुनियादी तत्वों के रंग, स्प्राइट और स्टाइल के साथ काम करने के लिए उपयोगिताओं;
- निर्मित सीएसएस रीसेट;
- normalize.css;
- एचटीएमएल 5 बॉयलरप्लेट, ब्लूप्रिंट, ट्विटर बूटस्ट्रैप;
- ग्रिड सिस्टम (द्रव 960, विलक्षणता, 960.gs, सूसी, ज़ेन ग्रिड, आदि)
- विजेट (फैंसी बटन, सैसी बटन);
CSS3 PIE

कम्पास मिश्रणों की एक सूची यहाँ श्रेणी के अनुसार, कम्पास मॉड्यूल की एक अधिक व्यापक सूची यहाँ है ।

कम्पास के साथ कैसे शुरू करें

कम्पास को रूबी में लिखा गया है और रत्न पैकेज मैनेजर से स्थापित किया गया है (स्थापित रूबी की आवश्यकता है):

 $ gem update --system $ gem install compass $ compass create <myproject> /*  compass  */ $ compass watch [path/to/compass-project] /*  Compass     [path/to/compass-project]*/ 

स्काउट , Compass.app - उन लोगों के लिए जो कमांड लाइन के साथ गड़बड़ करना पसंद नहीं करते हैं।

कम्पास एक्सटेंशन को स्थापित करना भी काफी सरल है:

1. एक्सटेंशन स्थापित करें:

 $ gem install {extension} 

2. कंपास परियोजना में config.rb फ़ाइल की शुरुआत में जोड़ें:

 require '{extension}' 

3. एक्सटेंशन कनेक्ट करें:

 @import '{extension}'; 

आइए Compass in क्रिया का उपयोग करने के लाभों को देखें।

ऑटो उत्पन्न स्प्राइट

विकास के चरण में, स्प्राइट्स को अपडेट करना अक्सर आवश्यक होता है, और ज्यादातर मामलों में यह नियमित रूप से कार्रवाई मैन्युअल रूप से की जाती है। कम्पास स्प्राइट उत्पन्न करने के लिए एक अलग दृष्टिकोण प्रदान करता है - छवियों को एक स्प्राइट वेरिएबल में (http://compass-style.org/reference/compass/helpers/sprites/):

 /* SCSS */ $arrows: sprite-map("arrows/*.png"); //      arrows 

या आप गैर-मानक सेटिंग्स के साथ स्प्राइट की घोषणा कर सकते हैं:

 /* SCSS */ /*       : vertical( ), horizontal, diagonal, smart */ $<arrows-dirname>-layout: smart; $arrows: sprite-map("<arrows-dirname>/*.png", $position: 100%, $spacing: 25px, /*    */ $arrows-arrow-down-spacing: 10px /*     <arrows-dirname>/arrow-down.png */ ); 

$ आइकॉन स्प्राइट वैरिएबल अब स्प्राइट मिक्सिन का उपयोग कर बैकग्राउंड प्रॉपर्टी में इस्तेमाल किया जा सकता है:

 /* SCSS */ background: sprite($arrows, arrow-down) no-repeat; 

 /*  CSS */ background: url('/<arrows-dirname>/arrow-down.png?12345678') 0 -24px no-repeat; 

<Arrow-dirname> फ़ोल्डर में एक नई छवि जोड़ते समय, Compass स्प्राइट को पुन: उत्पन्न करेगा, पृष्ठभूमि-स्थिति के बारे में चिंता करने की कोई आवश्यकता नहीं है - Compass संबंधित छवियों को प्रदर्शित करने के लिए आवश्यक मानों को प्रतिस्थापित करता है।

फोंट और आकारों के साथ काम करने के लिए सुविधाजनक है

कम्पास एक आसान फ़ॉन्ट उपकरण है।
CSS में, एक कस्टम फ़ॉन्ट जोड़ना इस तरह दिखता है:

 /* CSS */ @font-face { font-family: "PacificoRegular"; src: url('[project-root]/fonts/pacifico/Pacifico-webfont.eot'); src: url('[project-root]/fonts/pacifico/Pacifico-webfont.eot?#iefix') format('eot'), url('[project-root]/fonts/pacifico/Pacifico-webfont.woff') format('woff'), url('[project-root]/fonts/pacifico/Pacifico-webfont.ttf') format('truetype'), url('[project-root]/fonts/pacifico/Pacifico-webfont.svg') format('svg'); } 

अंतर्निहित कंपास फॉन्ट-फेस मिक्सिन का उपयोग करने वाला एक उदाहरण:

 /* SCSS */ @include font-face("PacificoRegular", font-files( "pacifico/Pacifico-webfont.woff", "pacifico/Pacifico-webfont.ttf", "pacifico/Pacifico-webfont.svg" ), "pacifico/Pacifico-webfont.eot" /*    .eot   IE */ ); 

अतिरिक्त गणितीय गणनाओं के कारण सीएसएस में फ़ॉन्ट आकार के साथ काम करना हमेशा सीएसएस में सबसे सुखद नहीं होता है, लेकिन कम्पास उनके साथ काम करना आसान बनाता है:

 /* SCSS */ $base-font-size: 14px; /*    */ div{ @include adjust-font-size-to(28px); /* @adjust-font-size-to() -      */ h1 { @include adjust-font-size-to(32px, $from-size: 28px); /*  $from-size        em */ } } 

 /*  CSS */ body { font-size: 0.875em; // 0.875 * 16px = 14px } div { font-size: 2em; // 2 * 14px = 28px } div h1 { font-size: 1.143em;// 1.143 * 28px = 32px } 

जब एम के साथ काम करते हैं, तो फॉन्ट इनहेरिटेंस से बचना बेहतर होता है, लेकिन ऊपर दिए गए उदाहरण से पता चलता है कि आप कंपास में समान परिस्थितियों से कैसे निपट सकते हैं।
कम्पास वर्टिकल रिदम ( वर्टिकल रिदम पर अधिक ) के साथ भी काम करता है।

वेंडर उपसर्ग

कम्पास में निर्मित मिक्सर विक्रेता उपसर्ग पीढ़ी का समर्थन करते हैं। एक उदाहरण:

 /* SCSS */ .round { @include border-radius(4px); } 

 /*  CSS */ .round { -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } 

उपसर्गों को कॉन्फ़िगर करना संभव है:

 /* SCSS */ $experimental-support-for-mozilla : true; // !default; $experimental-support-for-webkit : true; // !default; $support-for-original-webkit-gradients : true; // !default; $experimental-support-for-microsoft : true; // !default; $experimental-support-for-opera : false; $experimental-support-for-khtml : false; .round { @include border-radius(4px); } 

 /*  CSS */ .round { -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } 

ढ़ाल

ग्रेडिएंट्स के साथ काम करने के लिए, कंपास में 2 बिल्ट-इन लीनियर-ग्रेडिएंट और रेडियल-ग्रेडिएंट मिक्सिन्स होते हैं, जिनका उपयोग बैकग्राउंड-इमेज या बैकग्राउंड मिसकिन्स के साथ किया जाता है:

 /* SCSS */ @import "compass/css3/images"; @import "compass/utilities/general/hacks"; /*   @filter-gradient */ .item { /*  IE,      @linear-gradient      IE  */ @include filter-gradient(#aaaaaa, #eeeeee); /* Fallback: */ background: #cccccc; /* CSS3 c   */ @include background(linear-gradient(top, #aaaaaa, #eeeeee)); } 

 /*  CSS */ .item { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')"; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE'); background: #cccccc; /*    */ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee)); background: -moz-linear-gradient(top, #aaaaaa, #eeeeee); background: -o-linear-gradient(top, #aaaaaa, #eeeeee); background: linear-gradient(top, #aaaaaa, #eeeeee); } 

ढ़ाल का उपयोग करने का एक और उदाहरण ।

मीडिया के सवाल

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

 /* SCSS */ $small: 543px; $medium: 794px; $fence-sm: $small $medium; #foo { content: 'No Media Queries'; @include breakpoint($small) { content: 'Small Media Query'; } @include breakpoint($fence-sm) { content: 'Fenced Media Query'; } } 

 /*  CSS */ #foo { content: 'No Media Queries'; } @media (min-width: 543px) { #foo { content: 'Small Media Query'; } } @media (min-width: 543px) and (max-width: 794px) { #foo { content: 'Fenced Media Query'; } } 

AND, या तर्क के साथ अधिक जटिल प्रश्नों के उदाहरण:

 /* SCSS */ $print-land: print monochrome (orientation landscape); $fenced-landscape: screen 321px 543px, handheld (orientation portrait); /*   screen and (min-width: 321px) and (max-width: 543px), handheld and (orientation: portrait) */ #foo { @include breakpoint($print-land) { content: 'Monochrome Print in Landscape'; } @include breakpoint($fence-landscape) { content: 'Screen media type between 300px and 500px or Handheld media type in Portrait'; } } 

 /*  CSS */ @media print and (monochrome) and (orientation: landscape) { #foo { content: 'Monochrome Print in Landscape'; } } @media screen and (min-width: 321px) and (max-width: 543px), handheld and (orientation: portrait) { #foo { content: 'Screen media type between 321px and 543px or Handheld media type in Portrait'; } } 

परिणाम

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