26.07.2017

2017-yilning 5 ta eng yaxshi CSS preprotsessorlari, bu sizning ish oqimingizni tezlashtiradi.

CSS protsessorlari CSS dasturchilarining ishini yanada qiziqarli qilish uchun maxsus ishlab chiqilgan. Ular sizga oson tahrirlanadigan, ishonchli va qayta foydalanish mumkin bo'lgan kod yozish imkonini beradi.

Boshqacha qilib aytadigan bo'lsak, CSS protsessori CSS-ga yangi xususiyatlarga ega qo'shimcha: o'zgaruvchilar, kengaytmalar, importlar va boshqalar.

Ushbu maqolada men 2017 yilning eng yaxshi 5 ta CSS preprotsessorlari haqida gapiraman.

01. Sass

SASS - bu ulkan hamjamiyat va kuchli funksionallikka ega eng mashhur preprotsessor. U faqat Ruby bilan birgalikda ishlaydi va o'rganish juda oson. Bootstrap, Foundation va materialize kabi ko'pgina front-end ramkalar SASS yordamida qurilgan.

SASS ikkita sintaksisga ega:

• .sass
• .scss

02. Stylus

Stylus CSS-ni dinamik ravishda yaratish uchun yana bir ajoyib preprotsessordir. Agar siz jingalak qavslar, vergullar va nuqta-vergullarni qoldirmoqchi bo'lsangiz, bu siz uchun bo'lishi mumkin eng yaxshi tanlov. Stylus Node.js da ishlaydi va o'rnatish va ishlatish juda oson. U juda ko'p maxsus funktsiyalarga ega, masalan, saturation(). Boshqa yetakchi kompilyatorlar tomonidan taqdim etilgan barcha funksiyalardan ham foydalanishingiz mumkin.

03.Kamroq

Less, shuningdek, Less.js yoki Less CSS nomi bilan ham tanilgan, yana bir yetakchi CSS protsessoridir. Agar sizga o'zgaruvchilar, ichki uslublar va boshqalar kabi standart funktsiyalar kerak bo'lsa, bu ajoyib tanlovdir. Ushbu Javascript kutubxonasi dastlab Ruby-da yozilgan.

• Shuningdek o'qing:

04.Stylecow

Stylecow - bu npm yordamida o'rnatilishi mumkin bo'lgan Node-da yozilgan preprotsessor. U plaginlarni yaratishni osonlashtiradigan kuchli APIga ega.

05. CSS-Crush

PHP da o'rnatilgan preprotsessorga aylanadi ajoyib variant PHP dasturchilari uchun, chunki u ko'plab platformalarda ishlaydi. CSS-Crush barcha odatiy protsessor xususiyatlariga ega (o'zgaruvchilar, ichki uslublar va boshqalar).

Xulosa

Agar qidirsangiz eng yaxshi css preprotsessor, keyin siz Internetda juda ko'p turli xil variantlarni topasiz. Mening fikrimcha, eng yaxshi variantlar yangi boshlanuvchilar uchun bu SASS va Stylus.

Mutlaqo barcha tajribali maket dizaynerlari preprotsessorlardan foydalanadilar. Hech qanday istisno yo'q. Agar siz ushbu faoliyatda muvaffaqiyat qozonishni istasangiz, ushbu dasturlar haqida unutmang. Bir qarashda, ular yangi boshlanuvchilarda sokin dahshatga olib kelishi mumkin - bu dasturlashga juda o'xshaydi! Aslida, siz CSS protsessorlarining barcha imkoniyatlarini taxminan bir kunda tushunishingiz mumkin, agar urinib ko'rsangiz, bir necha soat ichida. Ular kelajakda hayotingizni ancha osonlashtiradi.

CSS preprotsessorlari qanday paydo bo'lgan

Ushbu texnologiyaning xususiyatlarini yaxshiroq tushunish uchun veb-sahifalarning vizual taqdimotining rivojlanish tarixiga qisqacha to'xtalib o'tamiz.

Internetdan ommaviy foydalanish birinchi marta boshlanganda, uslublar jadvallari mavjud emas edi. Hujjatlarning bajarilishi faqat brauzerlarga bog'liq edi. Ularning har birida ma'lum teglarni boshqarish uchun ishlatiladigan o'z uslublari bor edi. Shunga ko'ra, qaysi brauzerda ochganingizga qarab, sahifalar boshqacha ko'rinardi. Natijada ishlab chiquvchilar uchun tartibsizlik, tartibsizlik va muammolar yuzaga keladi.

1994 yilda norvegiyalik olim Xokon Li dizayn uchun ishlatilishi mumkin bo'lgan uslublar jadvalini ishlab chiqdi ko'rinish HTML hujjatidan alohida sahifalar. Ushbu g'oya W3C konsorsiumi vakillarining e'tiborini tortdi va ular darhol uni takomillashtirishga kirishdilar. Bir necha yil o'tgach, CSS spetsifikatsiyasining birinchi versiyasi chiqdi. Keyin u doimiy ravishda takomillashtirildi va takomillashtirildi ... Lekin kontseptsiya o'zgarishsiz qoldi: har bir uslubga ma'lum xususiyatlar beriladi.

Foydalanish CSS jadvallari har doim ba'zi muammolarni keltirib chiqardi. Misol uchun, tartib dizaynerlari ko'pincha xususiyatlarni saralash va guruhlashda qiyinchiliklarga duch kelishdi va meros bilan hamma narsa unchalik oddiy emas.

Va keyin ikki mingdan bir qismi keldi. Professional front-end ishlab chiquvchilari tobora ko'proq markalash bilan shug'ullana boshladilar, ular uchun moslashuvchanlik va dinamik ish uslublar bilan. O'sha paytda mavjud bo'lgan CSS yangi brauzer funktsiyalari uchun prefiks va kuzatuvni qo'llab-quvvatlashni talab qildi. Keyin JavaScript va Ruby mutaxassislari ishga kirishdilar va unga yangi xususiyatlar qo'shadigan CSS uchun oldingi protsessorlar - qo'shimchalarni yaratdilar.

Yangi boshlanuvchilar uchun CSS: Preprotsessorlarning xususiyatlari

Ular bir nechta funktsiyalarni bajaradilar:

• brauzer prefikslari va xakerlarni birlashtirish;

• sintaksisni soddalashtirish;

• ichki selektorlar bilan xatosiz ishlash imkoniyatini yaratish;

• uslublar mantiqini yaxshilash.

Qisqasi: preprotsessor CSS imkoniyatlariga dasturlash mantig'ini qo'shadi. Endi uslublar uslublarni odatiy sanab o'tish bilan emas, balki bir nechta oddiy texnika va yondashuvlar yordamida amalga oshiriladi: o'zgaruvchilar, funktsiyalar, miksinlar, halqalar, shartlar. Bundan tashqari, matematikadan foydalanish imkoniyati paydo bo'ldi.

Bunday qo'shimchalarning mashhurligini ko'rib, W3C asta-sekin ulardan xususiyatlarni CSS kodiga qo'shishni boshladi. Misol uchun, ko'plab brauzerlar tomonidan qo'llab-quvvatlanadigan spetsifikatsiyada calc() funksiyasi shunday paydo bo'ldi. Tez orada o'zgaruvchilarni o'rnatish va miksinlarni yaratish mumkin bo'lishi kutilmoqda. Biroq, bu uzoq kelajakda sodir bo'ladi va preprotsessorlar allaqachon bu erda va allaqachon mukammal ishlaydi.

Mashhur CSS protsessorlari. Sass

2007 yilda ishlab chiqilgan. Dastlab u HTML shablonlari mexanizmi bo'lgan Haml komponenti edi. Yangi boshqaruv imkoniyatlari CSS elementlari Ruby on Rails dasturchilariga yoqdi va uni hamma joyda tarqata boshladi. Sass hozirda har qanday preprotsessorga kiritilgan juda ko'p xususiyatlarni taqdim etdi: o'zgaruvchilar, selektorlarni joylashtirish, miksinlar (ammo o'sha paytda siz ularga argumentlar qo'sha olmadingiz).

Sassda o'zgaruvchilarni e'lon qilish

O'zgaruvchilar $ belgisi yordamida e'lon qilinadi. Siz ularda xususiyatlarni va ularning to'plamlarini saqlashingiz mumkin, masalan: "$borderSolid: 1px qattiq qizil;". Ushbu misolda biz borderSolid deb nomlangan o'zgaruvchini e'lon qildik va unda 1px qattiq qizil qiymatini saqladik. Endi, agar CSS-da biz 1px kenglikdagi qizil chegara yaratishimiz kerak bo'lsa, biz ushbu o'zgaruvchini xususiyat nomidan keyin belgilaymiz. E'lon qilingandan so'ng, o'zgaruvchilarni o'zgartirib bo'lmaydi. Bir nechta o'rnatilgan funktsiyalar mavjud. Masalan, #FF5050 qiymati bilan $redColor o'zgaruvchisini e'lon qilaylik. Endi CSS kodida, ba'zi bir elementning xususiyatlarida biz shrift rangini o'rnatish uchun foydalanamiz: p ( rang: $redColor; ). Rang bilan tajriba qilishni xohlaysizmi? Qoraytirish yoki yoritish funksiyalaridan foydalaning. Bu shunday amalga oshiriladi: p ( rang: qorong'i($redColor, 20%); ). Natijada, redColor 20% engilroq bo'ladi.

Yuvalash

Ilgari, uya qo'yishni ko'rsatish uchun uzoq va noqulay konstruktsiyalardan foydalanish kerak edi. Tasavvur qilaylik, bizda p ni o'z ichiga olgan div bor va u o'z navbatida oraliqni o'z ichiga oladi. Div uchun shrift rangini qizil, p uchun - sariq, span uchun - pushti rangga o'rnatishimiz kerak. Oddiy CSS-da bu quyidagicha amalga oshiriladi:

CSS protsessorining yordami bilan hamma narsa sodda va ixchamroq bo'ladi:

Elementlar tom ma'noda bir-biriga "joylashgan".

Preprotsessor ko'rsatmalari

Siz @import direktivasi yordamida fayllarni import qilishingiz mumkin. Masalan, bizda fonts.sass fayli bor, u shriftlar uchun uslublarni e'lon qiladi. Biz uni asosiy style.sass fayliga kiritamiz: @import "shriftlari". Tayyor! Birining o'rniga katta fayl uslublar bilan bizda kerakli xususiyatlarga tez va oson kirish uchun ishlatilishi mumkin bo'lgan bir nechta mavjud.

Hagfish

Eng qiziqarli fikrlardan biri. Bir qatorda butun xususiyatlar to'plamini o'rnatish imkonini beradi. Ular quyidagicha ishlaydi:

@mixin largeFont (

font-family: "Vaqtlar" Yangi Roman’;

shrift o'lchami: 64px;

chiziq balandligi: 80px;

shrift vazni: qalin;

Sahifadagi elementga miksin qo'llash uchun @include direktivasidan foydalaning. Misol uchun, biz uni h1 sarlavhasiga qo'llamoqchimiz. Natijada quyidagi konstruktsiya olinadi: h1 ( @include: largeFont; )

Aralashmaning barcha xossalari h1 elementiga tayinlanadi.

Preprotsessor kamroq

Sass sintaksisi dasturlashni eslatadi. Agar siz CSS-ni yangi boshlanuvchilar uchun mosroq variantni izlayotgan bo'lsangiz, Less-ni tekshiring. U 2009 yilda yaratilgan. asosiy xususiyat- mahalliy qo'llab-quvvatlash, shuning uchun dasturlashni bilmagan dizaynerlar uchun uni o'zlashtirish osonroq bo'ladi.

O'zgaruvchilar @ belgisi yordamida e'lon qilinadi. Masalan: @fontSize: 14px;. Nesting Sassdagi kabi printsiplar asosida ishlaydi. Aralashmalar quyidagicha e'lon qilinadi: .largeFont() ( font-family: 'Times New Roman'; shrift o'lchami: 64px; chiziq balandligi: 80px; shrift-weight: qalin; ). Ulanish uchun preprotsessor ko'rsatmalaridan foydalanish shart emas - tanlangan elementning xususiyatlariga yangi yaratilgan miksin qo'shish kifoya. Masalan: h1 ( .largeFont; ).

Stylus

Yana bir protsessor. 2011 yilda dunyoga Jade, Express va boshqa foydali mahsulotlarni bergan o'sha muallif tomonidan yaratilgan.

O'zgaruvchilar ikki usulda e'lon qilinishi mumkin - aniq yoki bilvosita. Masalan: font = 'Times New Roman'; - bu yashirin variant. Lekin $font = 'Times New Roman' aniq. Miksinlar e'lon qilinadi va bilvosita kiritiladi. Sintaksis: redColor() qizil rang. Endi biz uni elementga qo'shishimiz mumkin, masalan: h1 redColor();.

Bir qarashda, Stylus chalkash tuyulishi mumkin. "Mahalliy" qavslar va nuqtali vergullar qayerda? Ammo unga sho'ng'ilgach, hamma narsa aniqroq bo'ladi. Ammo shuni yodda tutingki, ushbu preprotsessor bilan uzoq muddatli rivojlanish sizni klassik CSS sintaksisidan foydalanishdan mahrum qilishi mumkin. Bu ba'zan "sof" uslublar bilan ishlash kerak bo'lganda muammolarni keltirib chiqaradi.

Qaysi protsessorni tanlash kerak?

Bu haqiqatan ham... muhim emas. Barcha variantlar taxminan bir xil imkoniyatlarni ta'minlaydi, faqat sintaksisi har biri uchun farq qiladi. Biz quyidagilarni qilishni tavsiya qilamiz:

• agar siz dasturchi bo'lsangiz va uslublar bilan kod sifatida ishlashni istasangiz, Sass dan foydalaning;
• agar siz maket dizayneri bo'lsangiz va odatdagi tartibdagi kabi uslublar bilan ishlashni istasangiz, Less-ga e'tibor bering;
• Agar siz minimalizmni yoqtirsangiz, Stylus-dan foydalaning.

Barcha variantlar uchun rivojlanishni yanada soddalashtiradigan juda ko'p qiziqarli kutubxonalar mavjud. Sass foydalanuvchilariga Compass-ni ko'rib chiqish tavsiya etiladi - kuchli vosita ko'plab o'rnatilgan xususiyatlarga ega. Misol uchun, uni o'rnatganingizdan so'ng, siz hech qachon sotuvchi prefikslari haqida tashvishlanmaysiz. Meshlar bilan ishlashni osonlashtiradi. Ranglar va spritlar bilan ishlash uchun yordamchi dasturlar mavjud. Bir qator allaqachon e'lon qilingan miksinlar mavjud. Ushbu mahsulotga bir necha kun ajrating - bu bilan siz kelajakda ko'p kuch va vaqtni tejaysiz.

Savollaringiz bormi?

Dizayner tartibini amalga oshirish HTML va CSS-dan foydalanmasdan mumkin emas. Agar belgilash tili bizga kerakli elementlarning shablonini chizishga imkon bersa, CSS ushbu shablonni o'zgartiradi. to'g'ri tur, manbada bo'lgani kabi. Aftidan, sof CSS yordamida siz sahifani mijoz xohlagandek qilishingiz mumkin.

Biroq, agar kimdir sizning yagona CSS faylingizni ochsa va biror narsani o'zgartirishga harakat qilsa, kod o'qilishi, tahrirlanishi, tuzilgan va tushunarli bo'lishiga ishonchingiz komilmi? Agar sizning loyihangiz juda katta bo'lsa, ko'p qismlarga ega bo'lsa, kelajakda uni osongina qo'llab-quvvatlashingizga ishonchingiz komilmi? Agar siz CSS protsessoridan foydalansangiz, javob ha, va bundan tashqari, bu veb-sayt tartibini avtomatlashtirishning bir usuli. Nega? Hozir bilib olamiz.

CSS protsessori nima?

Mening tushunishimga ko'ra, bu kengaytirilgan standart CSS-ga qo'shimcha standart xususiyatlar, ba'zi funksiyalarni qo'shadi va sizga yanada o'qiladigan va tushunarli kod yozish imkonini beradi. Chiqishda manba kodi biz o'rganib qolgan CSS-ga kompilyatsiya qiladi. Zamonaviy rivojlanishda bunday vositadan foydalanish "bo'lishi kerak" va men har bir maket dizayneri yoki ishlab chiquvchisiga u bilan tanishishni maslahat beraman. Shuni qo'shimcha qilish kerakki, tanlash uchun juda ko'p narsa bor, chunki CSS protsessorlari juda ko'p, ammo eng mashhurlarini ta'kidlash kerak:

• Stylus

Yuqoridagi barcha preprotsessorlar deyarli bir xil funksionallikka ega, faqat sintaksisda ozgina farqlar mavjud. Endi yuqorida ko'tarilgan savolga qaytaylik: kodimizni yanada qulayroq va qulayroq qilish uchun preprotsessorlar bizga qanday afzalliklarni beradi? Bu, birinchi navbatda, uy qurish. Bu xususiyat bizga elementlarni tuzish, elementning ota-onasini osongina topish, psevdosinflar va psevdoelementlarni tezda yozish va hatto BEM dan foydalanish imkoniyatini beradi! Masalan:
.track
rang: #fff
&__sarlavha
to'ldirish: 10px
&: suring, &: fokus
rang: ko'k

Sassda yozilgan ushbu kod parchasini ko'rib chiqing. Bularning barchasi quyidagi CSS-ga tarjima qilinadi:

Trek (rang: #FFF;)
.track__title (to‘ldirish: 10px;)
.track__title:hover, .track-title:focus (rang: ko'k)

Lakonik, qulay, tushunarli, ota-onadan bolaga tuzilish juda yaxshi, shunday emasmi? Ikkinchi va bundan kam muhim bo'lmagan afzallik - bu o'zgaruvchilar. Ularning ishlash printsipi juda oddiy: o'zgaruvchining nomi $ belgisidan boshlanadi, keyin esa nomning o'zi. Biz qiymatni ikki nuqta orqali yozamiz - bu har qanday qulay shakldagi rang, chekinish qiymatlari, kenglik, shrift o'lchami va boshqalar bo'lishi mumkin. Natijada, biz shunga o'xshash narsani olamiz:

$btn-rang: ko'k;
$font-main-size: 16px;

Va foydalanish quyidagicha ko'rinadi:

Bloklash (
font-size: $font-main-size;
}

Bu qanchalik qulay ekanligini tasavvur qiling. Agar siz butun sayt bo'ylab tugmalar rangini o'zgartirishingiz kerak bo'lsa, uni faqat bitta joyda qilishingiz kerak! Mayli, davom etaylik. CSS protsessorlari bizga taklif qiladigan uchinchi va eng katta narsa bu miksinlardan foydalanishdir. Bizning odatiy tushunchamizda, miksinlar kodning bir xil qismlarini takrorlamasdan bir necha marta ishlatilishi mumkin bo'lgan funktsiyalardir (dasturlash tamoyillaridan birini eslang - DRY - O'zingizni takrorlamang). Rostini aytsam, men aralashmalarni tez-tez ishlatmayman, shekilli, bunday shoshilinch ehtiyoj yo'q edi, lekin men hali ham bir nechta misollarni ko'rsataman. Men eng ko'p foydalanadigan funktsiyalardan biri quyidagilar:

@funksiya em($piksel, $kontekst: $brauzer konteksti) (
@if (birliksiz($piksel)) (
$piksel: $piksel * 1px;
}
@if (birliksiz($kontekst)) (
$kontekst: $kontekst * 1px;
}
@return $piksel / $kontekst * 1em;
}

Va uning qo'llanilishi quyidagicha:

tanasi (
shrift o'lchami: em(14px);
}

Ha, siz tushunganingizdek, bu shunchaki shrift o'lchamini PX-dan Em-ga o'tkazish (bunday mayda narsalar uchun siz maxsus xizmatlardan foydalangan yoki ularni kalkulyatorda o'zingiz hisoblagan kunlar uzoq bo'lsin). Quyidagi misol ham ko'p vaqtni tejaydi:

@mixin input-placeholder (
&.placeholder ( @content; )
&:-moz-placeholder ( @content; )
&::-moz-placeholder ( @content; )
&:-ms-input-placeholder ( @content; )
&::-webkit-input-placeholder ( @content; )
}

Uning qo'llanilishi:

kiritish, matn maydoni (
@include input-placeholder (
rangi: $grey;
}
}

Yana ko'plab misollarni keltirish mumkin, ammo qanday qilib aralashganini tushunish uchun o'zingizdan foydalanishni boshlashga arziydi foydali vosita. Ehtimol, sizni CSS preprotsessorlariga oshiq bo'lishiga sabab bo'ladigan yana bir sabab bor va uning nomi modullikdir. Bu 2018 yil va modullilik hamma joyda mavjud - HTML shablonlari dvigatellaridan tortib turli CSS ramkalari va loyiha quruvchilarigacha.