PostCSS Deep Dive: "PreCSS" के साथ प्रीप्रोसेसिंग

पिछले दो ट्यूटोरियल्स में हमने अपने क्रॉस ब्राउज़र संगतता और अनुकूलन बढ़ाने के लिए पूर्ण स्टाइलशीट पर PreCSS का उपयोग करने के तरीकों पर ध्यान दिया, जो पोस्ट प्रोसेसर के रूप में अनिवार्य रूप से था। इस ट्यूटोरियल में आप PostCSS को pre-प्रोसेसर के रूप में उपयोग करना सीखेंगे, उसी तरह आप स्टाइलस, Sass या LESS का उपयोग करेंगे।

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

हम तेज और आसान दृष्टिकोण से शुरू करेंगे, जो प्लगइन के उत्कृष्ट PreCSS पैक को स्थापित कर रहे हैं, जोनाथन नेल द्वारा बनाया गया है। इसके बाद ट्यूटोरियल में हम आगे बढ़ेंगे कि आप अपने खुद के पूर्वप्रोसेसर को कैसे जोड़ सकते हैं, केवल आप की कार्यक्षमता का उपयोग करके।

यह ट्यूटोरियल मान लेगा कि स्टाइलस, Sass या LESS जैसे प्रीप्रोसेसरों में पाए जाने वाले विशेषताओं के साथ आपके पास कुछ हद तक परिचितता है। यह विशुद्ध रूप से है क्योंकि हम इस बात पर ध्यान केंद्रित करेंगे कि आप इन विशेष प्रकार के विशेषताओं को कैसे उपयोग कर सकते हैं। यद्यपि, आपने पहले कभी भी किसी पूर्वप्रोसेसर का उपयोग नहीं किया है, भले ही यह शुरू करने के लिए सही जगह हो।

PreCSS लाइव आज़माएं

हम अगले भाग में प्रीCSS का उपयोग कर एक गल्प या ग्रन्ट प्रोजेक्ट को सेटअप करने के तरीके के माध्यम से जायेंगे, हालांकि, यदि आप शॉर्टकट लेना चाहते हैं, (अभी के लिए), तो आप वैकल्पिक रूप से लाइव डेमो प्लेग्राउंड का मैदान का उपयोग कोड हम इस ट्यूटोरियल में चलेंगे। कोड को बाईं विंडो में टाइप किया जा सकता है, और यह आपके लिए स्वतः संकलित होगा और सही विंडो में प्रदर्शित होगा।

अपना प्रोजेक्ट सेटअप करें

आपकी प्राथमिकता के आधार पर, आपको पहली चीज की ज़रूरत है जो आपके प्रोजेक्ट को या तो Gulp या Grunt का उपयोग करने के लिए सेट कर लेता है। अगर आपके पास पहले से ही एक या दूसरे के लिए कोई प्राथमिकता नहीं है तो मैं Gulp का उपयोग करने की सलाह देता हूं क्योंकि आपको उसी समाप्ति को प्राप्त करने के लिए कम कोड की आवश्यकता होगी।

आप पिछले ट्यूटोरियल में पोस्टCSS के लिए गुल या ग्रन्ट परियोजनाओं को सेटअप करने के तरीके के बारे में पढ़ सकते हैं

• PostCSS Quickstart Guide: Gulp Setup या
• PostCSS Quickstart Guide: Grunt Setup

क्रमशः।

यदि आप मैन्युअल रूप से अपने प्रोजेक्ट को स्क्रैच से सेट नहीं करना चाहते हैं, तो आप इस ट्यूटोरियल से जुड़ी स्रोत फाइल डाउनलोड कर सकते हैं, या फिर खाली प्रोजेक्ट फ़ोल्डर में दिए गए Gulp या Grunt स्टार्टर प्रोजेक्ट निकाल सकते हैं।

उसके बाद, एक टर्मिनल या कमांड प्रॉम्प्ट के साथ फ़ोल्डर पर दिये गये, कमांड npm install को चलाएं।

PreCSS स्थापित करें

चाहे आप Gulp या Grunt का उपयोग कर रहे हों, अपने प्रोजेक्ट में PreCSS को कमांड के साथ स्थापित करें:

1

npm install precss --save-dev

Gulp प्लगइन के रूप में लोड करें

यदि आप गुल का उपयोग कर रहे हैं, तो इस वैरिएबल को फ़ाइल में पहले से ही वेरिएबल्स के तहत जोड़ें:

1

var precss = require('precss');

अब अपने processors array में नया वैरिएबल नाम जोड़ें:

1

    var processors = [

2

  	precss

3

	];

एक त्वरित परीक्षण करें कि सबकुछ gulp css के command को चलाकर काम कर रहा है और यह जाँच कर रहा है कि एक नई "style.css" फ़ाइल आपके प्रोजेक्ट के "dist" फ़ोल्डर में दिखाई गई है।

ग्रन्ट प्लगइन के रूप में लोड करें

अगर आप ग्रन्ट का उपयोग कर रहे हैं, तो processors ऑब्जेक्ट अपडेट करें, जो options ऑब्जेक्ट के तहत नेस्टेड है, निम्नलिखित:

1

        processors: [

2

          require('precss')()

3

        ]

एक त्वरित परीक्षण करें कि सब कुछ कमांड grunt postcss को चलाकर काम कर रहा है और यह जांच कर रहा है कि आपके प्रोजेक्ट के "डिस्ट" फ़ोल्डर में एक नई "style.css" फ़ाइल दिखाई गई है। आपके प्रोजेक्ट के "डिस्ट" फ़ोल्डर में फ़ाइल दिखाई गई है।

आपके पास अभी तक सब कुछ है जो आपको PreCSS स्थापित करने और जाने के लिए तैयार होने का उपयोग करने की आवश्यकता है। इसका मतलब है कि हम PreCSS की कुछ प्रीप्रोसेसिंग क्षमताओं के माध्यम से आगे बढ़ने के लिए तैयार हैं और उनका उपयोग कैसे किया जा सकता है।

"PreCSS" के माध्यम से प्रीप्रोसेसिंग

आम तौर पर बोलना, PreCSS सिंटैक्स Sass के समान है। हालांकि यह अपने कुछ अनूठे तरीकों का उपयोग करता है, जिसे हम साथ में चलते हुए कवर करेंगे।

नोट: PreCSS की Sass-जैसी सिंटैक्स की वजह से, आपको लगता है कि आपके पसंदीदा टेक्स्ट संपादक में एक Sass सिंटेक्स हाइलाइटर आपके लिए सबसे अच्छा काम करेगा।

नेस्टिंग

नेस्टिंग के शिकार सभी तीन प्रमुख प्रोप्रोसेसरों, जैसे स्टाइलस, Sass और LESS के लिए आम है, और यह PreCSS में भी मौजूद है। PreCSS में नेस्टिंग करना चयनकर्ताओं को अन्य चयनकर्ताओं के घुंघराले ब्रैकेट के अंदर रखकर, Sass और LESS में उसी तरह से किया जाता है।

मूल चयनकर्ता में डुप्लिकेट किए गए अभिभावक चयनकर्ता के लिए & प्रतीक का उपयोग करने की क्षमता दूसरे प्रीप्रोसेसरों के मुताबिक PreCSS में भी काम करती है।

निम्न नेस्टेड कोड को आपके "src / style.css" फ़ाइल में जोड़ने का प्रयास करें: फ़ाइल:

1

.menu {

2

    width: 100%;

3

	a {

4

		text-decoration: none;

5

	}

6

	&::before {

7

		content: '';

8

	}

9

}

gulp css या grunt postcss के साथ अपना CSS संकलित करें और आपकी "dest / style.css" फ़ाइल ने नेस्टेड कोड को निम्न में मूल्यांकन किया जाना चाहिए:

1

.menu {

2

    width: 100%;

3

}

4

5

.menu a {

6

	text-decoration: none;

7

}

8

9

.menu::before {

10

	content: '';

11

}

वेरिएबल्स

वेरिएबल्स एक और प्रकार की कार्यक्षमता हैं जो सभी प्रीप्रोसेसरों के लिए सामान्य हैं, और वे PreCSS में शामिल हैं। आमतौर पर प्रत्येक पूर्वप्रोसेसर के बीच भिन्नता केवल वेरिएबल्स को इंगित करने के लिए सिंटेक्स है।

• कम वेरिएबल्स एक @ प्रतीक के साथ शुरू होता है और एक: मूल्य से पहले।
• स्टाइलस वेरिएबल वैकल्पिक रूप से $ प्रतीक का उपयोग कर सकते हैं और मूल्य के पहले = एक चिह्न डाल सकते हैं।
• : मूल्य के पहले Sass वेरिएबल्स $ का उपयोग करते हैं और जगह देते हैं।

सर्स की तरह Sass का उपयोग करने की PreCSS प्रवृत्ति को ध्यान में रखते हुए, यह भी वैरिएबल नाम से $ पहले और एक डालता है: मूल्य से पहले।

अपने "src / style.css" फ़ाइल में इसे जोड़कर PreCSS वेरिएबल का उपयोग करके देखें: फ़ाइल

1

$text_color: #232323;

2

3

body {

4

    color: $text_color;

5

}

पुनः कंपाइल करने के बाद आपको यह परिणामी कोड देखना चाहिए:

1

body {

2

    color: #232323;

3

}

सशर्त

कंडीशनल, अर्थात् if और else तर्क, एक ऐसी विशेषता है जो दोनों Sass और स्टाइलस में बहुत मजबूत है। LESS guarded mixins प्रदान करता है, लेकिन वे सत्ता की काफी एक ही डिग्री की पेशकश नहीं करते। कंडीशनल PreCSS में मौजूद हैं और वही सिंटैक्स का अनुसरण करें जैसे Sass, @if का उपयोग कर @else।

इस उदाहरण कोड को अपने "src/style.css" फ़ाइल में जोड़ें: file:

1

$column_layout: 2;

2

3

.column {

4

    @if $column_layout == 2 {

5

		width: 50%;

6

		float: left;

7

	}	@else {

8

		width: 100%;

9

	}

10

}

उपरोक्त उदाहरण में हमारे पास एक .column क्लास आउटपुट अलग-अलग हो रहा है अगर हम एक कॉलम लेआउट, या दो कॉलम लेआउट चाहते हैं। हमारे पास $column_layout वेरिएबल्स सेट 2 है, जिसका अर्थ है कि हमें चौड़ाई दिखनी चाहिए width: 50%; float: left; हमारी क्लास में उत्पादन है।

आपकी फ़ाइल संकलित करें, और आपको अपने "dest/ style.css" फ़ाइल में निम्नलिखित को देखना चाहिए। file.

1

.column {

2

    width: 50%;

3

    float: left

4

}

नोट: postcss-advanced-variables प्लगइन, जो इस शर्त की कार्यक्षमता प्रदान करता है, अभी भी काफी नया है, और मुझे अधिक जटिल परिस्थितियों के लिए उपयोग करते समय मुझे कुछ अप्रत्याशित आउटपुट का सामना करना पड़ा, हालांकि, मुझे यकीन है कि इसे निकट भविष्य में अपडेट किया जाएगा।

एक वैकल्पिक प्लग-इन है जिसका उपयोग कंडीशंस के नाम पर postcss-conditionals के लिए किया जा सकता है। हम अगले ट्यूटोरियल "रोलिंग अपने खुद के प्रीप्रोसेसर" में उस प्लगइन का उपयोग कैसे कर सकते हैं (यदि आप चुनते हैं) को कवर करेंगे।

लूप्स - @for और के लिए @each

PreCSS में दो प्रकार के लूप उपलब्ध हैं, @for और @each। ये दोनों एक ऐसे दृष्टिकोण का उपयोग करते हैं जो बस सास की तरह है। "For" छोरों आप एक संख्यात्मक काउंटर के माध्यम से चक्र चलो, जबकि "प्रत्येक" loops आप आइटम की एक सूची के माध्यम से चक्र चलो।

@for लूप के लिए

एक @for लूप में एक "काउंटर" वेरिएबल्स है जो कि आप अपने सांख्यिक काउंटर के माध्यम से साइक्लिंग में हैं, का ट्रैक रखता है, आमतौर पर $i के रूप में सेट किया जाता है। उदाहरण के लिए, जब 1 से 3 बार फिर से चलती है, तो वहां तीन लूप होंगे; पहले $i will 1 के बराबर है, दूसरा यह 2 के बराबर होगा और तीसरा यह 3 के बराबर होगा।

यह $i काउंटर वेरिएबल को दोनों चयनकर्ताओं और नियमों में प्रक्षेपित किया जा सकता है, जो nth-of-type() नियमों को बनाने और चौड़ाई की गणना जैसी चीज़ों के लिए बहुत आसान हो सकता है।

इस कोड को अपने "src/style.css" फ़ाइल में जोड़ें: एक @for लूप को देखने के लिए

1

@for $i from 1 to 3 {

2

    p:nth-of-type($i) {

3

		margin-left: calc( 100% / $i );

4

	}

5

}

संकलन के बाद आपको इस कोड को विस्तार से देखना चाहिए:

1

p:nth-of-type(1) {

2

    margin-left: calc( 100% / 1 );

3

}

4

5

p:nth-of-type(2) {

6

    margin-left: calc( 100% / 2 );

7

}

8

9

p:nth-of-type(3) {

10

	margin-left: calc( 100% / 3 );

11

}

नोट: उपरोक्त सभी स्टाइल्स में नंबर 1, 2 और 3 को सम्मिलित किया गया है।

@each लूप्स

संख्या के बजाय वस्तुओं की सूची के माध्यम से एक @each loop cycles। @for लूप्स के लिए के रूप में, loop के वर्तमान आइटम का प्रतिनिधित्व करने वाला वेरिएबल्सम चयनकर्ताओं और नियमों में प्रक्षेपित किया जा सकता है। ध्यान दें कि एक स्ट्रिंग में एक दूसरे को घुमाए जाने के लिए, आपको प्रारूप $(var) में वैरिएबल नाम में brackets का एक सेट सम्मिलित करना होगा।

निम्नलिखित उदाहरण कोड को जोड़कर PreCSS @each छोर का प्रयोग करें:

1

$social: twitter, facebook, youtube;

2

3

@each $icon in ($social){

4

    .icon-$(icon) {

5

		background: url('img/$(icon).png');

6

	}

7

}

Compilation के बाद आपको निम्नलिखित CSS उत्पन्न होने चाहिए:

1

.icon-twitter {

2

    background: url('img/twitter.png');

3

}

4

5

.icon-facebook {

6

    background: url('img/facebook.png');

7

}

8

9

.icon-youtube {

10

	background: url('img/youtube.png');

11

}

Mixins

मिक्सिन creation के लिए सिंटेक्स PreCSS का एक पहलू है जो कि Sass से अलग है।

Sass में, एक mixin को परिभाषित करने के लिए आप सिंटैक्स @mixin mixin_name($arg1, $arg2) {...} का उपयोग करते हैं और फिर इसे @include mixin_name(pass_arg1, pass_arg2); के साथ उपयोग करें।

PreCSS में, दूसरी ओर, आप सिंटेक्स @define-mixin mixin_name $arg1, $ arg2 {...} के साथ एक मिक्सिन को परिभाषित करते हैं और इसे @mixin mixin_name pass_arg1, pass_arg2; के साथ प्रयोग करते हैं।

इस उदाहरण को अपने "src/style.css" फ़ाइल में जोड़ें: file:

1

@define-mixin icon $network, $color {

2

    .button.$(network) {

3

		background-image: url('img/$(network).png');

4

		background-color: $color;

5

	}

6

}

7

8

@mixin icon twitter, blue;

9

10

@mixin icon youtube, red;

Compilation पर आपको यह देखना चाहिए:

1

.button.twitter {

2

    background-image: url('img/twitter.png');

3

    background-color: blue;

4

}

5

6

.button.youtube {

7

	background-image: url('img/youtube.png');

8

	background-color: red;

9

}

नोट: मिक्सिन के माध्यम से पारित किए गए arguments को चयनकर्ताओं और strings में एक ही दृष्टिकोण के साथ दोहराया जा सकता है, जैसा कि उपरोक्त @each में वर्णित है; format $(var) के साथ।

@mixin-content का उपयोग करना

साथ ही ऊपर दिखाए गए रास्ते में मिक्सिंस का उपयोग करने के साथ ही, मिक्सिन को बुलाते समय पारित सामग्री के ब्लॉकों का उपभोग करने के लिए उन्हें भी सेट किया जा सकता है। यह अनिवार्य रूप से Sass' @content के साथ ही प्रक्रिया है।

उदाहरण के लिए, ऊपर दिए गए उदाहरण से मिक्सिन को संशोधित करें, @mixin-content डालकर जहां आप चाहते हैं कि content के पारित ब्लॉक को दिखाना है, जैसे:

1

@define-mixin icon $network, $color {

2

    .button.$(network) {

3

		background-image: url('img/$(network).png');

4

		background-color: $color;

5

		@mixin-content;

6

	}

7

}

जब @mixin-content को मिलाकर एक मिक्सिन उपयोग किया जाता है, तो इसे कर्ली ब्रैकेट के साथ रखा जाना चाहिए, इसके बजाय समाप्त होने वाली single line के बजाय ;, या यह संकलन करने में विफल हो जाएगा।

अपना कोड अपडेट करें ताकि आपका मिक्सिन कॉल्स इस प्रकार दिखाई देगा:

1

@mixin icon twitter, blue {

2

    width: 3rem;

3

}

4

5

@mixin icon youtube, red {

6

	width: 4rem;

7

}

संकलन के बाद, यह निम्नलिखित कोड देना चाहिए - मिक्सिन के प्रत्येक उपयोग के माध्यम से पारित होने वाली width की content को शामिल करने की सूचना दें:

1

.button.twitter {

2

    background-image: url('img/twitter.png');

3

	background-color: blue;

4

	width: 3rem;

5

}

6

7

.button.youtube {

8

	background-image: url('img/youtube.png');

9

	background-color: red;

10

	width: 4rem;

11

}

एक्सटेन्डस

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

PreCSS में, विस्तार को परिभाषित करने के लिए सिंटेक्स है @define_extend extend_name {...}।

आपके "src/style.css" फ़ाइल में, एक गोल बटन के लिए आधार शैलियों को बढ़ाते हुए परिभाषित करें जैसे:

1

@define-extend rounded_button {

2

    border-radius: 0.5rem;

3

	padding: 1em;

4

	border-width: 0.0625rem;

5

	border-style: solid;

6

}

स्टाइल्स का यह डिफ़ॉल्ट सेट अब अतिरिक्त कोड के साथ बढ़ाया जा रहा है, उदाहरण के लिए, background-color और border-color जैसी चीज़ों को सेट करना। यह सिंटेक्स @extend extend_name; का उपयोग करके किया जाता है विस्तार में परिभाषित आधार स्टाइल्स को आयात करने के लिए।

इस उदाहरण कोड को जोड़ने के लिए, जो कोड आपने अभी जोड़ा है:

1

.blue_button {

2

    @extend rounded_button;

3

	border-color: #2F74D1;

4

	background-color: #3B8EFF;

5

}

6

7

.red_button {

8

	@extend rounded_button;

9

	border-color: #C41A1E;

10

	background-color: #FF2025;

11

}

जहां @extend rounded_button; लाइन का उपयोग किया जाता है, विस्तार की पूरी content डाली जाएगी।

अपनी स्टाइल्स को संकलित करें और आपको ये मिलना चाहिए:

1

.blue_button,

2

.red_button {

3

    border-radius: 0.5rem;

4

	padding: 1em;

5

	border-width: 0.0625rem;

6

	border-style: solid;

7

}

8

9

.blue_button {

10

	border-color: #2F74D1;

11

	background-color: #3B8EFF;

12

}

13

14

.red_button {

15

	border-color: #C41A1E;

16

	background-color: #FF2025;

17

}

ध्यान दें कि .blue_button और .red_button क्लास के लिए सामान्य स्टाइल्स को दक्षता के लिए जोड़ दिया गया है।

Imports

@import के माध्यम से स्टाइलशीट इनलाइन करने के लिए उपयोग किए जाने वाले प्लगइन, हम इस श्रृंखला के पिछले ट्यूटोरियल में शामिल किए गए एक ही हैं: For Minification and Optimization। यह कैसे सिर पर काम करता है और अनुभाग की अध्यक्षता वाली "Inline / Combine Files @इमपोर्ट" पर पढ़ने के लिए एक ठहरने के लिए।

PostCSS को प्रीप्रोसेसर के रूप में इस्तेमाल करने के संदर्भ में, आयात अधिक उपयोगी हो जाता है क्योंकि वे आपको आंशिक रूप से स्थापित करने का विकल्प देते हैं, कुछ अन्य प्राप्रक्रिया समाधानों से इस्तेमाल किया जा सकता है। उदाहरण के लिए, आप एक "आंशिक" फ़ोल्डर सेट कर सकते हैं, अपनी प्रोजेक्ट को तर्कसंगत असतत आंशिक फाइलों में अलग कर सकते हैं, तो उन्हें ऐसा आयात करें:

1

@import "partials/_variables.css";

2

@import "partials/_utilities.css";

3

@import "partials/_mixins.css";

4

@import "partials/_extends.css";

आओ पूर्वावलोकन कर लें

मुझे आशा है कि आपको अब कुछ जानकारी है कि PreCSS पैक के जरिए एक शक्तिशाली पोस्टCSS प्री प्रोसेसर के रूप में हो सकता है। हम ऊपर जो कवर किया गया है संक्षेप करने के लिए:

• आप PreCSS लाइव की कोशिश कर सकते हैं https://jonathantneal.github.io/precss।
• PreCSS में नेस्टिंग में काम करना उसी तरह से काम करता है जैसे Sass और LESS।
• PreCSS में वेरिएबल्स Sass के समान सिंटैक्स का उपयोग करते हैं।
• कंडीशंस PreCSS में मौजूद हैं, सिंटेक्स @if और @else का उपयोग कर।
• @for लिए और @each लूप उपलब्ध हैं।
• PreCSS मिक्सिक्स को वाक्य रचना के साथ परिभाषित किया गया है:
  @define-mixin mixin_name $arg1, $arg2 {...}
• PreCSS मिक्सिक्स का इस्तेमाल सिंटैक्स के साथ किया जाता है:
  @mixin mixin_name pass_arg1, pass_arg2;
• @mixin-content का इस्तेमाल उसी तरह किया जा सकता है जैसे Sass' @content
• PreCSS में विस्तारित सिंटेक्स के साथ परिभाषित कर रहे हैं:
  @define-extend extend_name {...}
  
• सिंटेक्स के साथ एक्स्टेंड्स का उपयोग किया जाता है:
  @extend extend_name;
  
• @import बाह्य CSS फ़ाइलों को इनलाइन करता है, आंशिक रूप से उपयोग करने के लिए विशेष रूप से सहायक

अगला ट्यूटोरियल में

PreCSS एक बढ़िया प्रोजेक्ट है, जो कुछ उत्कृष्ट भाषा एक्सटेंशन प्लगिन को एक साथ लाती है और पोस्टCSS-आधारित प्रीप्रोसेसिंग बहुत ज्यादा प्लग और प्ले कर रहा है। यह लगभग सभी कार्यक्षमताओं को प्रदान करता है, सबसे पूर्वप्रोसेसर उपयोगकर्ता उम्मीद करते हैं, और एक त्वरित, "कोई उपद्रव" तरीका है, जो पोस्टCSS पूर्वप्रोसेसर गेंद रोलिंग प्राप्त करने का तरीका है।

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

आप यह सीखेंगे कि अगले ट्यूटोरियल में यह कैसे करें, "रोल ऑर प्रॉसप्रोसेसर रोल करें"।