Preprocessor CSS: Umumiy Tasavvur, tanlash, dastur

Albatta, barcha tajribali veb-dizaynerlar Önişlemci foydalaning. hech istisnolar bor. Agar bu faoliyatni muvaffaqiyatli bo'lsangiz, bu dasturlar haqida unutmang. Birinchi qarashda, ular bir Ajam sokin qo'rquv sabab bo'lishi mumkin - u dasturlash uchun juda o'xshaydi! Aslida, siz bir kun uchun, CSS Önişlemci barcha xususiyatlari bilan shug'ullanish, va mumkin sinash, agar, soat keyin er-xotin. Kelajakda, ular ancha hayotingizni soddalashtirish bo'ladi.

Qanday CSS Önişlemci qildi

yaxshi, bu texnologiya xususiyatlarini tushunish uchun, qisqacha veb-sahifalar Visual taqdimot tarixi puxta o'rganish.

faqat faqat Internet ommaviy foydalanishni boshladi bo'lsa, hech qanday uslublar jadvallari mavjud emas edi. hujjatlar ijrosi brauzerida butunlay bog'liq. Ularning har biri muayyan teglar davolash uchun ishlatilgan o'z tarzini bor edi. Shunga ko'ra, sahifalar brauzer siz ularni ochish qaysi tartibda qarab farq qiladi. Natijada - Ishlab chiquvchilar uchun betartiblik, tartibsizlik, muammolari.

1994 yilda Norvegiya olimi Håkon yolg'on HTML-hujjat alohida sahifalar ko'rinishi uchun foydalanish mumkin bo'lgan uslublar sahifani ishlab chiqildi. darhol bajarilishi uchun yo'lga W3C, g'oyasi priglanulas a'zolari. Bir necha yil o'tgach, u CSS xususiyatiga birinchi versiyasini nashr. So'ngra u doimo, yaxshilandi yakunlanmoqda ... Lekin tushunchasi hamma bir xil bo'lib qoldi: har bir uslub ma'lum xususiyatlarini sozlash.

CSS jadvallar yordamida har doim muammoli bo'ldi. Masalan, veb-dizaynerlar ko'pincha xususiyatlarini saralash va guruhlash bilan bog'liq muammolar bor edi, va meros shunday oddiy emas.

Va keyin ikki mingdan keldi. Belgilar tobora moslashuvchan va dinamik ish uslublar bo'lishi muhim ahamiyatga ega professional old-end ishlab chiquvchilar, bilan shug'ullanish boshladi etiladi. vaqt talab CSS old joylashtirish mavjud va qo'llab-quvvatlash brauzerining yangi qobiliyat kuzatish. So'ngra, JavaScript tomonidan, va Ruby ekspertlar Agar önişlemci yaratish, pastga biznes uchun bor - CSS uchun oliy imorat, yangi xususiyatlar unga qo'shiladi.

Boshlovchilar uchun CSS: önişlemci xususiyatlari

Ular bir necha vazifalarni bor:

• brauzer old va yashil birlashtirish;

• Matnni sintaksisi rang soddalashtirish;

• xatolar holda, ichki sinchkovlik bilan ishlash imkonini berishi;

• mantiq uslub yaxshilash.

Qisqasi: önişlemci CSS dasturlash mantiq qobiliyatlari qo'shimchalar. o'zgaruvchilar, vazifalari, hagfish, davr sharoiti: Endi, uslublar tarzini odatdagi listingiga va bir necha oddiy texnik va yondashuvlar bilan amalga emas. Bundan tashqari, qobiliyati matematika foydalanish.

Ushbu plagin-ins mashhurlik ko'rib, W3C asta-sekin CSS kodi ularning ehtimoli qo'shish boshladi. Misol uchun, spesifikasyonda ko'p brauzerlar tomonidan qo'llab-quvvatlanadigan bor calc () funktsiyasi, shuning uchun. Bu tez orada u o'zgaruvchilar va hagfish yaratish mumkin bo'ladi, deb kutilmoqda. Biroq, bu uzoq kelajakda sodir va preprocessors-da bu erda va allaqachon yaxshi ishlaydi.

Mashhur preprocessors CSS. Sass

2007 yilda ishlab chiqilgan. Dastlab bir qismi Haml - bir Andoza HTML. CSS elementlar uchun yangi xususiyatlar hamma joyda uni yoyish boshladi Ruby on Rails, ustiga relished chiquvchilar nazorat. o'zgaruvchilar, sinchkovlik joylash texnologiyasi, hagfish (keyin, ammo, bu vajlari qo'shib bo'lmaydi): endi har qanday Önişlemci kiritilgan funktsiyalar katta soni Sass.

Sass e'lon o'zgaruvchilar

O'zgaruvchilar $ belgisi bilan e'lon qildi. Ular, masalan, ularning xususiyatlarini va silsilasini saqlab qolish mumkin: "$ borderSolid: 1px qattiq qizil;". Bu, masalan, biz borderSolid ismli bir o'zgarmaydigan e'lon va 1px qattiq qizil qiymatini berdik. CSS biz 1px bir qizil chegara kengligi yaratish kerak bo'lsa, endi, shunchaki mulk nomi so'ng, bu o'zgaruvchilar ko'rsatadi. o'zgaruvchilar e'lon so'ng o'zgartirilishi mumkin emas. bir necha ajralmas vazifalari bor. Misol uchun, $ redcolor # FF5050 qiymati bilan o'zgaruvchilar e'lon. p {rangi:: Endi, har qanday elementning xususiyatlari CSS kodi bilan, shrift rangini belgilash uchun foydalanishingiz $ redColor; }. Agar rang bilan tajriba istaysizmi? funktsiya qorayishini foydalaning yoki yoritmoq. Bu shuning uchun amalga oshiriladi: p {rangi: ($ redColor, 20%) qorayishini; }. Natijada, rang redColor 20% engil bo'ladi.

Sass ko'p ajralmas vazifalari. kamida ularni o'qib-Uert, lekin yaxshi - o'rganish.

joylashtirish

Avvalroq, joylashganligiga ko'rsatish uchun uzoq va noqulay dizayn foydalanish kerak edi. Biz p bo'lgan div, bor, deb tasavvur qiling, va unda esa, o'z navbatida, oralig'ini sozlash. vaqt uchun, sariq - - div, P, qizil shrift rangini belgilash kerak pushti. quyidagicha tipik CSS u qilinishi:

div {

rangi: qizil;

}

div p {

rangi: sariq;

}

div p span {

rangi: pushti;

}

CSS Önişlemci barcha yanada qulay va ixcham bo'ladi:

div {

rangi: qizil;

p {

rangi: sariq;

.span {

rangi: pushti;

}

}

}

Elements tom ma'noda bir-birini "investitsiya".

Önişlemci direktivalari

fayllarni import mumkin @import foydalanish yo'riqnomasida. Misol uchun, biz shriftlar uchun tarzini e'lon fonts.sass fayli bor. Asosiy fayl style.sass ulang: @import "shriftlarni. Bajar! Buning o'rniga uslublar bilan bitta katta fayl, biz talab xususiyatlariga tez va oson kirish uchun foydalanish mumkin, deb bir necha bor.

hagfish

eng qiziqarli g'oyalar biri. Bu xususiyatlar majmui so'rab bir qator beradi. quyidagicha faoliyat:

@mixin largeFont {

font-oila: "Times New Roman ';

font-size: 64px;

Moddama-balandligi: 80px;

font-Og'irligi: qalin;

}

Hagfish, sahifada element murojaat ko'rsatma @include foydalanish. Misol uchun, biz h1 soket, uni qo'llash istayman. H1 {@include: Biz quyidagi tuzilishga ega largeFont; }

hagfish barcha xususiyatlari bir h1 elementi tayinlanadi.

Önişlemci kam

Syntax Sass, dasturiy eslaydi. Agar parametr izlayotgan bo'lsangiz kam izlab, CSS o'rganish boshlanuvchilar uchun ko'proq mos keladi. Bu 2009 yilda tashkil etilgan. asosiy xususiyati - CSS ona sintaksisi qo'llab-quvvatlash, dasturlash Imposer bilan notanish u o'rganish oson bo'ladi.

o'zgaruvchilar @ belgisini yordamida e'lon qilinadi. Misol uchun: @fontSize: 14px;. Sass bir xil tamoyillariga Yuvalama ishlari. .largeFont () {font-oila: quyidagicha Hagfish e'lon qilingan "Times New Roman '; font-size: 64px; Moddama-balandligi: 80px; font-Og'irligi: qalin; }. faqat tanlangan element xususiyatlari yangi tashkil hagfish qo'shish - u önişlemci ko'rsatmalarni foydalanishingiz kerak emas ulanish uchun. Misol uchun: h1 {.largeFont; }.

Stilus

Yana bir Önişlemci. dunyoni Jade, Express va boshqa foydali mahsulotlar berdi Shu muallifning tomonidan 2011 yilda yaratilgan.

O'zgaruvchilar, ikki yo'l bilan e'lon mumkin - karamay. Misol uchun: shrift = 'Times New Roman'; - Ravshan variant. Lekin $ font = 'Times New Roman "- aniq. Hagfish deb e'lon qildi va bilvosita bog'liq. redColor () qizil rang: sintaktik quyidagicha bo'ladi. Endi biz, masalan, narsani kiritishingiz mumkin: h1 redColor ();.

birinchi qarashda haqida Stilus Bu tushunarsiz tuyulishi mumkin. "Ona" qavslardan va nuqta-vergul qaerda? Lekin u sho'ng'idi zarur, barcha juda aniq bo'ladi. Bu Önişlemci uzoq muddatli rivojlanish Agar klassik CSS sintaksisi foydalanishingiz "bola" mumkin, ammo, unutmang. a "sof" uslubi bilan ishlash uchun bo'lgan bo'lsa, bu ba'zan muammolar sabab bo'ladi.

Nima önişlemci tanlang?

Aslida, u ... u muhim emas. Barcha versiyalari faqat har bir sintaktik boshqacha Shu xususiyatlari haqida taklif etamiz. Biz quyidagi Davom etish uchun tavsiya:

• Agar bo'lsa, - dasturchi va Sass, uslublar bilan, ham kodi ishlash ishlatish uchun kerakli;
• Agar bo'lsa - bir Coder va an'anaviy tartibi bilan bo'lib uslublar bilan ishlash, unchalik e'tibor istayman;
• Agar minimalizm kabi bo'lsa Stilus foydalaning.

yanada rivojlantirish soddalashtirish mumkin qiziqarli kutubxonalar cheksiz soni barcha modellarida. Sass tavsiya Foydalanuvchilar Kompas e'tibor uchun - kuchli vositasi ko'p ajralmas xususiyatlari bilan. Misol uchun, siz uni o'rnatish keyin sotuvchi versiyasi prefiks haqida tashvishlanib shart hech qachon. Basitleştirir panjaralarini ishlash. gullar, sprite bilan ishlash uchun uskunalar bor. Bir qator allaqachon hagfish e'lon qildi. Ushbu avtomobil bir necha kun ber - shunday siz kelajakda vaqt va kuch ko'p tejash imkonini beradi.