CSS preprocessor: maelezo ya jumla, uchaguzi, programu

Kwa kweli, wasanidi wa mpangilio wenye uzoefu hutumia preprocessors. Hakuna tofauti. Ikiwa unataka kufanikiwa katika shughuli hii, usisahau kuhusu programu hizi. Kwa mtazamo wa kwanza, wanaweza kusababisha hisia ya utulivu wa mwanzo - hii ni kubwa sana kama programu! Kwa kweli, unaweza kuelewa uwezo wote wa preprocessors wa CSS katika siku moja, na kama unapojaribu, basi kwa masaa kadhaa. Katika siku zijazo, watakuwa rahisi kurahisisha maisha yako.

Jinsi CSS preprocessors ilionekana

Ili kuelewa vizuri zaidi sifa za teknolojia hii, kwa ufupi tatizo la kuzama ndani ya historia ya maendeleo ya uwakilishi wa kuona wa kurasa za wavuti.

Wakati programu ya mtandao wa wingi ilianza tu, hapakuwa na karatasi za mtindo. Mpangilio wa nyaraka unategemea tu kwenye vivinjari. Kila mmoja alikuwa na mitindo yake, ambayo ilitumiwa kutatua vitambulisho fulani. Kwa hiyo, kurasa zilionekana tofauti kulingana na kivinjari kipi uliwafungua. Matokeo ni machafuko, machafuko, matatizo kwa watengenezaji.

Mwaka 1994, mwanasayansi wa Kinorwe Haakon Lee alijenga karatasi ya mtindo ambayo inaweza kutumika kutengeneza kuonekana kwa ukurasa tofauti na hati ya HTML. Wazo hilo lilialikwa kwa wawakilishi wa muungano wa W3C, ambao mara moja wakaanza kufanya kazi juu yake. Miaka michache baadaye, toleo la kwanza la vipimo vya CSS lilichapishwa. Kisha ilikuwa imefanywa kuboreshwa, kuboreshwa ... Lakini dhana ilibakia sawa: kila mtindo hupewa mali fulani.

Matumizi ya meza za CSS daima imesababisha matatizo fulani. Kwa mfano, coder mara nyingi alikuwa na shida ya kuchagua na kundi kundi, na urithi si rahisi sana.

Na kisha wakaja elfu mbili. Watengenezaji wa mtaalamu wa mstari wa mbele walianza kufanya markup mara nyingi, ambayo kazi rahisi na yenye nguvu na mitindo ilikuwa muhimu. CSS ambayo ilikuwepo wakati wa kuhamasisha na kufuatilia usaidizi wa vipengele mpya vya kivinjari. Kisha wataalamu wa JavaScript na Ruby wamepungua kwenye biashara, na kujenga preprocessors - kuongeza-ons kwa CSS, na kuongeza sifa mpya kwa hilo.

CSS kwa Kompyuta: vipengele vya preprocessors

Wanafanya kazi kadhaa:

• Unganisha prefixes browser na hacks;

• Punguza syntax;

• Ruhusu kufanya kazi na wateuzi wa kiota bila makosa;

• Kuboresha mantiki ya mtindo.

Kwa kifupi: mtangulizi anaongeza mantiki ya programu kwa uwezo wa CSS. Sasa styling hufanyika si kwa kawaida kawaida ya mitindo, lakini kwa msaada wa mbinu kadhaa rahisi na mbinu: vigezo, kazi, myxins, mizunguko, hali. Kwa kuongeza, iliwezekana kutumia hisabati.

Kuona umaarufu wa kuingizwa kama hizo, W3C ilianza kuongeza hatua kwa hatua kutoka kwao hadi kwenye msimbo wa CSS. Kwa mfano, kazi ya calc () imeonekana katika vipimo, vinavyotumika na browsers nyingi. Inatarajiwa kwamba hivi karibuni itakuwa rahisi kuweka vigezo na kujenga misuli. Hata hivyo, hii itatokea katika siku zijazo za baadaye, na preprocessors tayari yuko hapa na tayari wanafanya kazi kikamilifu.

Wafanyabiashara maarufu wa CSS. Sass

Ilianzishwa mwaka 2007. Ilikuwa ni sehemu ya Haml, injini ya template ya HTML. Vipengele vipya vya kusimamia vipengele vya CSS vimekuja na ladha ya watengenezaji kwenye Ruby kwenye Rails, ambayo ilianza kuienea kila mahali. Katika Sass ilitokea idadi kubwa ya fursa ambazo sasa zimejumuishwa katika mtangulizi wowote: vigezo, vifungo vya kuingilia, mixins (basi, hata hivyo, huwezi kuongezea hoja).

Kutangaza vigezo katika Sass

Vigezo vinatangazwa kwa kutumia ishara ya $. Ndani yao, unaweza kuokoa mali na seti zao, kwa mfano: "$ mpaka mkali: 1px nyekundu imara;". Katika mfano huu, tulitangaza variable inayoitwa borderSolid na kuhifadhiwa thamani ya 1px nyekundu ndani yake. Sasa, ikiwa katika CSS tunahitaji kuunda mpakani mwekundu na upana wa 1px, tufafanua variable hii baada ya jina la mali. Baada ya tamko, vigezo haziwezi kubadilishwa. Kazi kadhaa zilizojengwa zinapatikana. Kwa mfano, tangaza variable $ redColor na thamani # FF5050. Sasa, katika CSS, katika mali ya kipengele, tunatumia kuweka rangi ya font: p {rangi: $ redColor; }. Ungependa kujaribu rangi? Tumia kazi zimepunguza au kuangaza. Hii imefanywa kama hii: p {rangi: giza ($ redColor, 20%); }. Matokeo yake, rangi ya redColor itakuwa nyepesi 20%.

Sass ina kazi nyingi za kujengwa. Tunapendekeza uweze kuwajulisha, na bora - jifunze.

Uchimbaji

Hapo awali, kutaja kiota, tulihitaji kutumia miundo ndefu na isiyosababishwa. Fikiria kwamba tuna div ambayo p uongo, na ndani yake, kwa upande wake, ni muda. Kwa div, tunahitaji kuweka rangi ya font kuwa nyekundu, kwa p-njano, kwa span-pink. Katika CSS ya kawaida, hii itafanyika kama hii:

Div {

Rangi: nyekundu;

}

Div p {

Rangi: njano;

}

Div p span {

Rangi: nyekundu;

}

Pamoja na mtangulizi wa CSS, kila kitu kinafanywa rahisi na kikiwa zaidi:

Div {

Rangi: nyekundu;

P {

Rangi: njano;

.span {

Rangi: nyekundu;

}

}

}

Elements ni "kuweka" moja kwa moja.

Maagizo ya mtangulizi

Kwa maelekezo ya @import, unaweza kuagiza faili. Kwa mfano, tuna faili inayoitwa fonts.sass, ambayo mitindo ya fonts imetangazwa. Tunakuunganisha faili ya style.sass kuu: @ fonts 'fonts'. Imefanyika! Badala ya faili moja kubwa na mitindo, tuna kadhaa ambayo unaweza kutumia kwa haraka na kwa urahisi kupata mali zinazohitajika.

Changanya

Moja ya zadumok ya kuvutia zaidi. Inaruhusu seti moja ya mali ilifafanuliwa kwenye mstari mmoja. Kazi kama ifuatavyo:

@mixin kubwaFont {

Family Font: 'Times New Roman';

Ukubwa wa herufi: 64px;

Urefu wa mstari: 80px;

Uzito wa herufi: ujasiri;

}

Ili kuomba mixin kwenye kipengele kwenye ukurasa, tumia maagizo ya @ @include. Kwa mfano, tunataka kuitumia kwa kichwa cha h1. Ujenzi wafuatayo hupatikana: h1 {@ include: largeFont; }

Mali yote kutoka kwa mixin yatapewa kipengele h1.

Chini ya Preprocessor

Sass syntax inakumbusha programu. Ikiwa unatafuta chaguo inayofaa kwa wanafunzi wa mwanzo wa CSS, makini na Chini. Ilianzishwa mwaka 2009. Kipengele kikuu ni msaada wa syntax ya asili ya CSS, hivyo ni rahisi kujifunza na wageni ambao hawajui na programu ya coder.

Vigezo vinatangazwa na @ ishara. Kwa mfano: @FontSize: 14px;. Uchimbaji hufanya kazi sawa na kanuni kama Sass. Mixins hutangazwa kama ifuatavyo: .largeFont () {font-family: 'Times New Roman'; Ukubwa wa herufi: 64px; Urefu wa mstari: 80px; Uzito wa herufi: ujasiri; }. Kwa uunganisho, huna haja ya kutumia maelekezo ya preprocessor - tu kuongeza mixin iliyopangwa upya kwa mali ya kipengele kilichochaguliwa. Kwa mfano: h1 {.largeFont; }.

Nguzo

Mtangulizi mwingine. Iliundwa mwaka 2011 na mwandishi mmoja aliyepa dunia Jade, Express na bidhaa nyingine muhimu.

Vigezo vinaweza kutangaza kwa njia mbili - wazi au wazi. Kwa mfano: font = 'Times New Roman'; Je! Ni chaguo thabiti. Lakini $ font = 'Times New Roman' - wazi. Mixins zinatangazwa na zinaunganishwa waziwazi. Syntax ni: redColor () rangi nyekundu. Sasa tunaweza kuiongeza kwa kipengele, kwa mfano: h1 redColor ();.

Kwa mtazamo wa kwanza, Stylus inaweza kuonekana isiyoeleweka. Ambapo ni mabaki ya "asili" na semicolons? Lakini kama wewe tu kupiga mbizi ndani yake, kila kitu inakuwa wazi zaidi. Hata hivyo, kumbuka kwamba maendeleo ya muda mrefu na mtangulizi huyu anaweza "kukupunguza" kutumia mkondoni wa CSS classic. Hii wakati mwingine husababisha matatizo wakati unahitaji kufanya kazi na mitindo "safi".

Nipaswa kuchagua chochote cha awali?

Kwa kweli, ni ... haijalishi. Chaguo zote hutoa takribani uwezekano sawa, tu syntax ya kila ni tofauti. Tunapendekeza uendelee kama ifuatavyo:

• Ikiwa wewe ni programu na unataka kufanya kazi na mitindo kama kanuni, tumia Sass;
• Ikiwa wewe ni mpangilio wa mpangilio na unataka kufanya kazi na mitindo kama ilivyo na mpangilio wa kawaida, makini na Chini;
• Ikiwa unapenda minimalism, tumia Stylus.

Kwa chaguzi zote zinapatikana idadi kubwa ya maktaba ya kuvutia ambayo yanaweza kurahisisha maendeleo. Watumiaji wa Sass wanashauriwa makini na Compass - chombo chenye nguvu na sifa nyingi zilizojenga. Kwa mfano, baada ya kuifungua, hutawahi kamwe kuwa na wasiwasi kuhusu prefixes ya muuzaji. Kazi rahisi na magridi. Kuna huduma za kufanya kazi na rangi, sprites. Nyaraka kadhaa zilizojazwa tayari zinapatikana. Kutoa chombo hiki siku kadhaa - hivyo kukuokoa muda mwingi na nishati katika siku zijazo.