Процессор CSS: тойм, сонгон шалгаруулах, програм

Мэдээж бүх туршлагатай вэб дизайнер процессор ашигладаг. ямар нэг жич зөвшөөрөл байхгүй байна. Та энэ үйл ажиллагаанд амжилт хүсэж байгаа бол эдгээр хөтөлбөрүүдийн талаар мартаж болохгүй. Өнгөц харахад, тэд нам гүм шинэхэн аймшиг хүргэж болох юм - энэ нь програм хэтэрхий адил юм байна! Ер нь, талаар та нэг өдөр CSS кодоос машин кодод бүх шинж шийдвэрлэх болно, мөн та нар оролдвол, цагийн дараа хосууд. Ирээдүйд тэд ихээхэн таны амьдралыг хялбаршуулах болно.

Хэрхэн CSS процессор байсан

Энэ технологийн шинж чанарыг илүү сайн ойлгохын тулд товчхон Вэб хуудсуудын харааны танилцуулга түүхэнд онгичих.

дөнгөж Интернэтийн том ашиглах эхэлсэн үед, ямар ч загварын хуудас байхгүй байгаа юм. баримт бичгийн биелэлтийг браузер дээр бүхэлдээ хамааралтай. Тэдний тус бүр өөрийн гэсэн арга барилтай зарим хаягууд эмчилгээнд ашиглаж байна байв. Иймээс хуудас нь хөтөч та тэдгээрийг нээж тулд хамааран өөр өөр харагддаг. үр дүн - хөгжүүлэгчид нь эмх замбараагүй байдлын улмаас, төөрөгдөл, асуудал.

1994 онд Норвегийн эрдэмтэн Håkon худал HTML-баримт тусад нь хуудсуудын дүр төрх ашиглаж болох загварын хуудас боловсруулсан. W3C, нэн даруй дуусгах гэж заасан санаа priglanulas гишүүд. Хэдэн жилийн дараа тэр нь CSS тодорхойлох эхний хувилбарыг нийтэлсэн байна. Дараа нь тэр, байнга сайжруулж байсан эцэслэн байна ... Гэхдээ үзэл баримтлал нь бүгд адил хэвээр байна: хэв маяг бүр тодорхой хөрөнгийг тогтоосон.

CSS хүснэгтүүдийг ашиглан үргэлж асуудалтай байсаар ирсэн. Жишээ нь, вэб дизайнерууд ихэвчлэн онцлогийг ялгах, бүлэглэх нь асуудал байсан, өв маш энгийн биш юм.

Тэгээд дараа нь хоёр мянга байв. Тэмдэглэгээ улам мэргэжлийн урдаа хөгжүүлэгчид, уян хатан, динамик ажлын арга барилтай байх нь чухал ач холбогдолтой үйл ажиллагаа явуулах эхэлсэн байна. цаг хугацаа шаардсан CSS олонлог байрлуулах үед оршин тогтнож, дэмжлэг хөтөч шинэ боломжууд хянах. Дараа нь, JavaScript, мөн Ruby-ийн мэргэжилтнүүд бизнест доош нь процессор бий болсон - CSS нь биений, шинэ боломжууд Хэрэв нэмж байна.

Эхлэн CSS: процессор онцлог

Тэд хэд хэдэн чиг үүргийг хэрэгжүүлнэ:

• хөтөч угтвар болон Khaki нэгтгэх;

• синтакс хялбаршуулах;

• алдаа ямар түүвэрлэсэн сонгон шалгаруулагчийн хамтран ажиллах боломж олгох;

• логик загварыг сайжруулах.

Товчоор хэлбэл: процессор нь CSS програмчлалын логик чадварыг нэмдэг. хувьсагчууд, чиг үүрэг, hagfish, цикл нөхцөл: Одоо сарлагийн саваг хэв маяг нь ердийн жагсаалт болон хэд хэдэн энгийн арга барил, хандлага нь гүйцэтгэсэн байна. Үүнээс гадна, чадвар математик хэрэглэх.

Эдгээр нэмэлт оролтуудын түгээмэл хараад, W3C аажмаар CSS код нь тэдний боломжийг нэмж эхэлсэн байна. Жишээ нь, тодорхойлолтод тэнд Calc буюу тооцоологч () функц олон хөтчүүдийг дэмжиж байгаа болохоор. Энэ нь тун удахгүй энэ нь хувьсагчуудыг тохируулах болон hagfish бий болгох боломжтой болно гэж үзэж байна. Гэсэн хэдий ч, энэ нь аль хэдийн энд хөрвүүлэлтэнд хэрэглэгддэг процессорууд алс холын ирээдүйд тохиолдох бөгөөд аль хэдийн сайн ажиллаж байна.

Алдартай хөрвүүлэлтэнд хэрэглэгддэг процессорууд нь CSS. Sass

2007 онд зохион бүтээсэн. Анх нэг бүрэлдэхүүн хэсэг Haml - нь загвар HTML. CSS элементийн Нью онцлог Rails дээр Ruby, хаа сайгүй л тархаж эхэлсэн дээр олддог хөгжүүлэгчдэд хянадаг. Sass одоо ямар нэг эх кодоос машин кодод орсон байдаг онцлог нь асар дугаар: сонгон шалгаруулагчийн оруулах хувьсагч, hagfish (дараа Гэхдээ эдгээр нэмэлт өгөгдлүүдийг нэмж болохгүй).

Sass онд зарлах хувьсагчид

Хувьсагчид $ тэмдэг нь зарласан. "$ BorderSolid: 1px хатуу улаан," Тэд жишээ нь, тэдгээрийн шинж чанар, багц хадгалж болно. Энэ жишээн дээр бид borderSolid нэртэй хувьсагч зарласан бөгөөд энэ нь 1px хатуу улаан үнэлдэг аварсан. Одоо бол CSS бид 1px нь улаан хилийн өргөн үүсгэх хэрэгтэй, зүгээр л өмч нэрээр гэсэн хувьсагчийг зааж өгнө. хувьсагч зарлах дараа өөрчилж болохгүй. хэд хэдэн барьсан нь үйл ажиллагаа байдаг. Жишээ нь, $ redcolor # FF5050 нь үнэ цэнэ бүхий хувьсагч тунхаглаж байна. P {өнгө: Одоо ямар ч элементийн шинж чанар нь CSS код, үсгийн өнгө тохируулах ашиглах $ redColor; }. Хэрэв та өнгө туршиж хүсэж байна уу? функц нь барайх ашиглах буюу хөнгөлдөг. Энэ нь тэгээд хийж байна: P {өнгө: барайх ($ redColor, 20%); }. Үүний үр дүнд өнгө redColor 20% нь хөнгөн байх болно.

Sass олон барьсан чиг үүрэг. Үнэ наад зах нь тэднийг уншиж, гэхдээ илүү сайн - сурах.

үүрлэх

Өмнө нь үүрлэх заах нь урт, эвгүй загварыг ашиглаж байсан. Бид DIV, х юм байна гэж төсөөлөөд үз дээ, түүн дотор, энэ нь эргээд, тогтоосон хугацааг. хугацаанд нь, шар - - DIV хувьд бид P нь улаан, үсгийн өнгө тохируулах хэрэгтэй ягаан. Ердийн CSS энэ нь дараах байдлаар хийж болно:

DIV {

өнгө: улаан,

}

DIV P {

өнгө: Шар;

}

DIV P SPAN {

өнгө: ягаан,

}

CSS кодоос машин кодод нь бүх илүү хялбар, авсаархан болдог:

DIV {

өнгө: улаан,

P {

өнгө: Шар;

.span {

өнгө: ягаан,

}

}

}

Элементүүд үгчилбэл "хөрөнгө оруулалт" бие биенээ.

процессор удирдамж

@import тушаал ашиглан файлуудыг импорт хийж чаддаг. Жишээ нь, бид үсгийн хэв маягийг тунхаглаж fonts.sass файлыг байна. үндсэн файл style.sass уруу холбохын: @import "фонтуудыг". Үүнийг! Харин оронд нь хэв маяг нь ганц том файлын бид шаардлагатай шинж хурдан, хялбар ашиглаж болно гэсэн хэд хэдэн байна.

hagfish

Хамгийн сонирхолтой санаа нэг юм. Энэ нь нэг мөр шинж багц асуух боломжийг олгодог. дараах байдлаар ажиллуулах:

@mixin largeFont {

үсгийн-гэр бүл: "Times New Roman ';

үсгийн хэмжээ: 64px;

шугам өндөр: 80px;

үсгийн-жин: Болд,

}

Hagfish, хуудсан дээр элемент хэрэглэх удирдамж @include ашигладаг. Жишээ нь, бид h1 толгой хэрэглэнэ хүсэж байна. H1 {@include: Бид дараах бүтэцтэй байна largeFont; }

hagfish бүх шинж чанар нь h1 элементийг өгсөн байна.

процессор бага

Syntax Sass нэвтрүүлэг дурсан ярилаа. Хэрэв та сонголт хайж байгаа бол гэж бага хайх, CSS суралцаж эхлэн илүү тохиромжтой. Энэ нь 2009 онд бүтээгдсэн. гол онцлог нь - CSS уугуул синтаксын талаар дэмжлэг, програм Imposer тийм танил биш энэ нь сурах нь илүү хялбар байх болно.

хувьсагчуудыг @ тэмдгийг ашиглан зарласан байна. Жишээ нь: @fontSize: 14px;. Sass адил зарчим дээр үүрлэх ажил. .largeFont () {үсгийн гэр бүлийн: дараах байдлаар Hagfish зарласан байна 'Times New Roman'; үсгийн хэмжээ: 64px; шугам өндөр: 80px; үсгийн-жин: Болд, }. зөвхөн сонгосон элементийн шинж чанар нь шинээр бий болсон hagfish нэмнэ - энэ нь процессор директивийг ашиглаж шаардлагатай биш юм холбоно. Жишээ нь: H1 {.largeFont; }.

зүүг

Өөр нэг процессор. Мөн зохиогч, хаш, Экспресс болон бусад ашигтай бүтээгдэхүүн өгсөн 2011 онд бий болгосон байна.

Хувьсагчид хоёр аргаар зарлаж болно - шууд буюу далдуур. Жишээ нь: фонт = 'Times New Roman'; - далд сонголт. Гэвч $ үсгийн = 'Times New Roman "- нь тодорхой. Hagfish зарласан бөгөөд далд холбогдсон. redColor () өнгө нь улаан: синтакс дараах байдлаар байна. h1 redColor (); Одоо бид зүйл, жишээ нь нэмж болно.

Өнгөц харахад дээр зүүг нь ойлгомжгүй юм шиг санагдаж болох юм. "Уугуул" хаалт болон semicolons хаана байдаг вэ? Гэхдээ энэ нь түүн уруу түлхэн шаардлагатай бүх их тодорхой болж байна. Энэ кодоос машин кодод урт хугацааны хөгжлийн та сонгодог CSS синтакс ашиглах "wean" болох хэдий ч санаж байна. нь "цэвэр" хэв маяг хамтран ажиллах байх үед энэ нь заримдаа асуудал үүсгэдэг.

Ямар процессор сонгох вэ?

Үнэн хэрэгтээ энэ бол ... энэ нь хамаагүй. Бүх хувилбарууд нь зүгээр л бие нь синтакс өөр нэг онцлог тухай санал болгож байна. Бид дараах байдлаар үргэлжлүүлнэ санал болгож байна:

• Та нар бол - програмист болон хэв маяг нь аль аль код ажиллах Sass ашиглахыг хүсэж байгаа;
• Та нар бол - нь хамрагдсан бөгөөд ердийн зохион шиг хэв маяг хамтран ажиллах бага анхаарал хандуулах хэрэгтэй;
• Та минимализмыг хүсэж байгаа бол зүүг ашиглаж байна.

хөгжлийг улам хялбар болох сонирхолтой номын сан нь эцэс төгсгөлгүй тооны бүх хувилбарууд нь. Олон барьсан нь онцлог нь хүчирхэг хэрэгсэл - Хэрэглэгч Sass зөвлөж луужин анхаарлаа хандуулах нь. Жишээ нь, та түүнийг суулгах дараа та хэзээ ч худалдаачин хувилбар угтвар санаа зовох байх болно. Хялбаршуулдаг талбайд ажилладаг. цэцэг, sprites хамтран ажиллах арга хэрэгсэл байдаг. А хүрээ нь аль хэдийн hagfish зарласан. Энэ хэрэгсэл нь хоногийн хэдэн өг - тиймээс та цаашид цаг хугацаа, хүчин чармайлт маш их хэмнэх болно.