Preprocessor CSS: ակնարկ, ընտրությունը, դիմումը

Բացարձակապես բոլոր փորձառու վեբ դիզայներները օգտագործել նախաթարգմանիչը: Չկան բացառություններ: Եթե դուք ցանկանում եք հաջողության հասնել: Այս մասին, չեն մոռանում, այդ ծրագրերի. Առաջին հայացքից, նրանք կարող են առաջացնել մի novice հանգիստ սարսափը, դա չափազանց նման է ծրագրավորման! Ըստ էության, դուք կարող եք զբաղվել բոլոր հատկանիշները CSS սիմվոլներով համար մոտ մեկ օր, եւ եթե դուք փորձեք, ապա մի քանի ժամվա ընթացքում: Ապագայում, նրանք զգալիորեն պարզեցնել ձեր կյանքը.

Ինչպես եղավ, որ CSS թարգմանիչի նախապրոցեսորին

Որպեսզի ավելի լավ հասկանալ, թե այն հատկանիշները այս տեխնոլոգիան, համառոտ փորել պատմության մեջ տեսողական ներկայացման մեջ վեբ էջերը.

Երբ միայն սկսվել են զանգվածային օգտագործումը Ինտերնետում, ոչ ոճը թերթ գոյություն չի ունեցել: Կատարման փաստաթղթերի կախված ամբողջությամբ բրաուզերի. Նրանցից յուրաքանչյուրն ուներ սեփական ոճեր, որոնք օգտագործվել բուժման համար որոշակի թեգերը. Ըստ այդմ, էջերը նայում տարբեր են, կախված է այն կարգով, որը զննարկիչը եք բացել դրանք: Արդյունքը քաոսի, շփոթություն, խնդիրներ մշակողների.

1994 թ.-ին, Նորվեգիայի գիտնականը Håkon Սուտ մշակել է ոճը թերթիկ, որը կարող է օգտագործվել է տեսքը էջերում առանձին HTML փաստաթղթի. Այն գաղափարը priglanulas անդամները W3C, ով անմիջապես ձեռնամուխ է ավարտին: Մի քանի տարի անց նա հրատարակեց առաջին տարբերակը CSS ճշգրտման: Ապա նա մշտապես բարելավվել է, հստակեցման փուլում ... Բայց հայեցակարգը մնացել բոլոր նույնը: յուրաքանչյուրը ոճը սահմանված որոշակի հատկություններով.

Օգտագործելով CSS սեղաններ միշտ եղել խնդրահարույց: Օրինակ, վեբ դիզայներները հաճախ խնդիրներ է ունեցել, տեսակավորման եւ խմբավորման հատկանիշները, եւ ժառանգութիւնը չէ, որ պարզ է.

Իսկ հետո եկավ երկու հազարերորդական: Գծանշում են ավելի ու ավելի սկսեց զբաղվել մասնագիտական ճակատ- end մշակողների, ինչը կարեւոր է ճկուն եւ դինամիկ աշխատանքային ոճերը: Գոյություն է ունեցել անգամ պահանջել է CSS նախածանցներ տեղաբաշխման եւ հետեւել աջակցությունը նոր կարողությունների բրաուզերի. Ապա, ըստ JavaScript, եւ Ruby փորձագետները ստացել ներքեւ բիզնեսին, ստեղծելով թարգմանիչի նախապրոցեսորին - վերնաշենքը համար CSS, նոր առանձնահատկություններ ավելացվել են դրան:

CSS սկսնակների համար: գրված առանձնահատկությունները

Նրանք ունեն մի շարք գործառույթներ:

• միասնականացնել բրաուզերի նախածանցներ եւ խաքի.

• պարզեցնել ձեւաչափումով;

• հնարավորություն է տալիս աշխատելու nested selectors առանց սխալների.

• բարելավել տրամաբանական styling.

Կարճ ասած `նախաթարգմանիչը ավելացնում է CSS ծրագրավորման տրամաբանական կարողությունները. Այժմ, styling չի կատարվում է սովորական ցուցակման ոճերի եւ մի քանի պարզ տեխնիկայի եւ մոտեցումների: փոփոխականները, գործառույթները, hagfish, ցիկլեր պայմանների: Բացի այդ, կարողություն օգտագործել մաթեմատիկան:

Տեսնելով, որ հայտնի է նաեւ ավելացնել- ins, որ W3C սկսել են աստիճանաբար ավելացնել հնարավորությունը նրանց է CSS կոդը. Օրինակ, ճշգրտման, որպեսզի այնտեղ Calc () ֆունկցիայի, որը աջակցում է բազմաթիվ բրաուզերների. Սպասվում է, որ շուտով հնարավոր կլինի սահմանել փոփոխականները եւ ստեղծել hagfish: Սակայն, դա տեղի կունենա հեռավոր ապագայում, եւ preprocessors արդեն այստեղ եւ արդեն լավ աշխատել.

Հանրաճանաչ preprocessors CSS. sass

Նախագծված է 2007 թ. Originally մի բաղադրիչն Haml մի Կաղապար HTML: Նոր առանձնահատկություններ համար CSS տարրերի վերահսկել ըմբոշխնում ծրագրավորողներին է Ruby on Rails, որը սկսվել է տարածել այն ամենուր. The Sass մի մեծ շարք առանձնահատկություններ, որոնք այժմ ընդգրկված է որեւէ սիմվոլներով: փոփոխականների, ներառվածութ selectors, hagfish (ապա, այնուամենայնիվ, այդ փաստարկները չեն կարող ավելացվել է):

Հռչակելով փոփոխականները Sass

Փոփոխականներ հայտարարել է հետ $ նշանով: Նրանք կարող են պահպանել իրենց ունեցվածքն ու Կոմպլեկտներ, օրինակ `" $ borderSolid: 1px solid կարմիր. »: Այս օրինակում, մենք հայտարարեցինք, փոփոխական է, որը կոչվում է borderSolid եւ պահվում են այն գնահատում են 1px վառ կարմիր: Հիմա, եթե CSS մենք պետք է ստեղծել մի կարմիր սահմանային լայնությունը 1px, պարզապես ցույց է տալիս, որ փոփոխական, հետո սեփականության անունով: Հայտարարությունից հետո, որ փոփոխականների չի կարող փոխվել: Կան մի քանի ներկառուցված գործառույթները. Օրինակ, հայտարարում է փոփոխականի արժեքի $ redcolor # FF5050: Հիմա, CSS կոդը եւ հատկությունների ցանկացած տարր, օգտագործել այն սահմանել տառատեսակի գույնը: P {գույն: $ redcolor; }. Դուք ցանկանում եք փորձարկել հետ գույնի. Օգտագործեք ֆունկցիան մթնել կամ մեղմացնել: Սա արվում է, որպեսզի: P {գույն: մթնել ($ redcolor, 20%): }. Որպես հետեւանք, գույնը redcolor կլինի 20% -ով թեթեւ.

Այն sass բազմաթիվ Ներկառուցված գործառույթները. Արժե առնվազն կարդալ դրանք, բայց ավելի լավ է սովորել:

nesting

Նախկինում, ցույց են տալիս, nesting ստիպված է օգտագործել երկար ու անհարմար դիզայն. Պատկերացրեք, որ մենք ունենք մի div է, որը p, իսկ դա, իր հերթին, սահմանել span. Համար div, մենք պետք է սահմանել տառատեսակի գույնը կարմիր, P - դեղին, համար span - վարդագույն. Մի տիպիկ CSS, որ դա կլինի կատարվում է հետեւյալ կերպ.

div {

գույն, կարմիր;

}

div P {

գույն: դեղին;

}

div P span {

գույն: վարդագույն;

}

Հետ CSS սիմվոլներով բոլորը դառնում է ավելի հեշտ եւ ավելի կոմպակտ:

div {

գույն, կարմիր;

P {

գույն: դեղին;

.span {

գույն: վարդագույն;

}

}

}

Տարրեր բառացիորեն «ներդրվել» զիրար:

գրված

Օգտագործելով @import հրահանգները կարող է ներմուծել ֆայլեր. Օրինակ, մենք ունենք fonts.sass ֆայլը, որը հայտարարում է ոճեր համար տառատեսակներ: Միացրեք այն հիմնական ֆայլի style.sass: @import «տառատեսակներ»: Արել! Փոխարեն մեկ մեծ ֆայլ ոճերի մենք ունենք մի քանիսը, որոնք կարող են օգտագործվել արագ եւ հեշտ մուտք դեպի պահանջվող հատկություններով.

hagfish

Մեկը առավել հետաքրքիր գաղափարների. Այն թույլ է տալիս մեկ տող է խնդրելու մի շարք հատկություններով. Գործում են հետեւյալ կերպ.

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

գիծը բարձրությունը: 80px;

տառակշիռը թավ.

}

Hagfish է դիմել տարր էջի վրա, օգտագործել Հրահանգի @include: Օրինակ, մենք ցանկանում ենք կիրառել այն h1 տողի: Մենք ունենք հետեւյալ կառուցվածքը Հ 1 {@include: largeFont; }

Բոլոր հատկությունները hagfish են նշանակվել H1 տարր.

preprocessor Less

Շարահյուսական Sass հիշեցնում է ծրագրավորման. Եթե դուք փնտրում են մի տարբերակ, որն ավելի հարմար է սկսնակների սովորող CSS, նայեք համար Less. Այն ստեղծվել է 2009 թ. Հիմնական առանձնահատկությունն աջակցության համար CSS հայրենի syntax, այնպես որ, անծանոթ ծրագրավորման պարտադրողի դա կլինի ավելի հեշտ է սովորել:

Փոփոխականները հայտարարվում են, օգտագործելով @ խորհրդանիշ: Օրինակ `@fontSize: 14px;: Nesting աշխատում է նույն սկզբունքով, ինչ Sass. Hagfish են հայտարարել են հետեւյալ կերպ `.largeFont () {font-family: 'Times New Roman'; font-size: 64px; գիծը բարձրությունը: 80px; տառակշիռը թավ. }. Միացնել դա անհրաժեշտ է օգտագործել գրված, - պարզապես ավելացնել նորաստեղծ hagfish է հատկությունների ընտրված տարր. Օրինակ `Հ1-ի եթերում {.largeFont. }.

stylus

Մեկ այլ preprocessor: Ստեղծվել է 2011 թ. Նույն հեղինակի, որ տվել է աշխարհին Jade, Express եւ այլ օգտակար արտադրանքի.

Փոփոխականները կարող է հայտարարվել երկու ձեւերով, կամ ուղղակիորեն կամ անուղղակիորեն: Օրինակ: font = 'Times New Roman'; - բնազդական տարբերակ: Բայց $ font = 'Times New Roman' - պարզ է. Hagfish են հայտարարվում եւ անուղղակիորեն կապված: The շարահյուսություն հետեւյալն է. Redcolor () Գույնը կարմիր. Այժմ մենք կարող ենք ավելացնել իրը, օրինակ `H1 redcolor ();:

Stylus առաջին հայացքից կարող է թվալ, անհասկանալի է: Որտեղ է «հայրենի» փակագծերում եւ կետ-ստորակետ. Բայց դա անհրաժեշտ է դրա մեջ ներքաշել, բոլորը դառնում է շատ հստակ: Հիշեք, սակայն, որ երկարաժամկետ զարգացումը այս սիմվոլներով կարող է «երեխա» դուք օգտագործում դասական CSS շարահյուսություն: Սա երբեմն առաջացնում խնդիրներ ունենալով է աշխատել «մաքուր» ոճով:

Ինչ է preprocessor ընտրել.

Ըստ էության, դա ... դա կարեւոր չէ: Բոլոր տարբերակները առաջարկել նույն հատկանիշները հենց շարահյուսական յուրաքանչյուրը տարբեր է: Մենք խորհուրդ ենք տալիս շարունակել է հետեւյալ կերպ.

• եթե դուք - ծրագրավորող եւ ուզում է աշխատել ոճերի, այնպես էլ օրենսգրքում, օգտագործել sass.
• եթե դուք մի ծածկագրողը եւ ուզում է աշխատել ոճերի, ինչպես նաեւ պայմանական դիրքով, ուշադրություն է Less.
• եթե ցանկանում եք minimalism, օգտագործել Stylus:

Համար բոլոր տարբերակներից անվերջանալի շարք հետաքրքիր գրադարանների, որ կարող է նույնիսկ ավելի պարզեցնել զարգացմանը: Users Sass խորհուրդ է տրվում ուշադրություն դարձնել, որ կողմնացույցի - հզոր գործիք է բազմաթիվ ներկառուցված հատկանիշները. Օրինակ, երբ դուք տեղադրել այն, դուք երբեք պետք է անհանգստանալու մասին վաճառող տարբերակը նախածանցի: Պարզեցնում է աշխատել grids. Կան գործիքներ աշխատելու ծաղիկներով, sprites: Մի շարք արդեն հայտարարել hagfish: Տվեք Այս գործիքը մի քանի օրվա ընթացքում, դրանով իսկ Դուք կարող եք պահպանել շատ ժամանակ եւ ջանք է ապագայում.