Preprocessor CSS: ümumi, seçilməsi, tətbiqi

Tamamilə bütün təcrübəli web dizaynerlər preprocessor istifadə edin. heç bir istisna var. Siz bu fəaliyyəti uğur istəyirsinizsə, bu proqramlar haqqında unutmayın. İlk baxışdan, onlar təcrübəsiz sakit dəhşət səbəb ola bilər - bu, proqramlaşdırma üçün çox benzer! Əslində, bir gün üçün CSS preprocessor bütün xüsusiyyətləri ilə məşğul, və siz cəhd əgər, saat sonra bir neçə. Gələcəkdə, onlar əhəmiyyətli dərəcədə sizin həyat sadələşdirmək olacaq.

Necə CSS preprocessor etdi

daha yaxşı bu texnologiya xüsusiyyətləri anlamaq üçün, qısa Web pages vizual təqdimat tarixi delve.

yalnız İnternet kütləvi istifadə başlayıb zaman, heç stillər yox idi. sənədlərin icrası browser tamamilə asılı. Onların hər biri müəyyən tags müalicəsi üçün istifadə edilmişdir öz üslub idi. Buna görə, pages browser onlara açıq olan qaydada asılı olaraq müxtəlif baxmaq. Nəticədə - developers üçün xaos, qarışıqlıq, problemləri.

1994-cü ildə Norveç alimi Håkon Lie HTML-sənədin ayrı pages görünüşünü üçün istifadə edilə bilər ki, bir stil inkişaf. dərhal başa müəyyən W3C, ideyası priglanulas üzvləri. Bir neçə il sonra o, CSS dəqiqləşdirilməsi ilk versiyası nəşr. Sonra o, daim təkmilləşdirilmiş tamamlanır ... Amma anlayışı eyni qalmışdır: hər stil müəyyən xassələri seçin.

CSS masalar istifadə həmişə problemli olmuşdur. Məsələn, web dizaynerlər tez-tez xüsusiyyətləri çeşidlənməsi və qruplaşdırılması ilə problemləri var idi, və miras belə sadə deyil.

Və sonra iki mində gəldi. Markings getdikcə çevik və dinamik iş üslub olmaq vacibdir professional ön-end developers ilə məşğul başladı. vaxt tələb CSS önek yerləşdirilməsi mövcud və dəstək brauzerinizin yeni imkanları izleme. Sonra JavaScript, və Ruby mütəxəssisləri preprocessor yaradılması, aşağı iş var - CSS üst quruluş, yeni funksiyalar ona əlavə edilir.

Başlayanlar üçün CSS: preprocessor xüsusiyyətləri

Onlar bir neçə funksiyaları var:

• browser önek və xaki birləşdirmək;

• sintaksis asanlaşdırmaq;

• səhvsiz nested seçiciler ilə işləmək üçün imkan verir;

• məntiq dizayn yaxşılaşdırılması.

Qısa olaraq: preprocessor CSS proqramlaşdırma məntiq imkanları əlavə edir. dəyişənlər, funksiyaları, hagfish, dövründən şərtləri: İndi dizayn üslub adi siyahısı və bir neçə sadə texnika və yanaşmalar ilə həyata deyil. Bundan əlavə, imkanı riyaziyyat istifadə etmək.

Bu əlavə-ins populyarlıq görən W3C tədricən CSS kodu onlardan imkanı əlavə başlamışdır. Məsələn, dəqiqləşdirilməsi çox brauzerlərdə tərəfindən dəstəklənir orada calc () funksiyası, belə. Tezliklə bu dəyişənlərin təyin və bir hagfish yaratmaq mümkün olacaq gözlənilir. Lakin, bu uzaq gələcəkdə baş və preprocessors artıq burada və artıq yaxşı işləyəcək.

Popular preprocessors CSS. qabarma

2007-ci ildə nəzərdə tutulmuşdur. Originally bir komponent haml - bir şablon HTML. CSS elementləri üçün yeni funksiyalar hər yerdə yayılmağa başladı Rails haqqında Ruby on kefini developers nəzarət. dəyişənlərin, seçiciler daxilolma, hagfish (sonra, lakin bu arqumentləri əlavə edilə bilməz): indi hər hansı bir preprocessor daxil olan funksiyalar bir çox Sass.

Sass bəyan dəyişənlər

Dəyişənlər $ işarəsi ilə elan etdi. Onlar, məsələn, onların xassələri və dəstləri təmin edə bilər: "$ borderSolid: 1px bərk qırmızı". Bu, məsələn, biz borderSolid adlı dəyişən elan və bu 1px bərk qırmızı qiymətləndiririk saxlanılır. CSS biz 1px qırmızı sərhəd eni yaratmaq lazımdır əgər İndi, sadəcə əmlak adına ki, dəyişən göstərir. dəyişənlərin elan edildikdən sonra dəyişdirilə bilməz. bir neçə daxili funksiyaları var. Məsələn, $ redColor # FF5050 dəyəri ilə bir dəyişən elan. p {color: İndi hər hansı bir element xassələri CSS kodu, font rəng təyin etmək üçün istifadə $ redColor; }. rəng cəhd istəyirsiniz? funksiyası qaralmaq istifadə edin və ya işıqlandırmaq. Bu, edilir: p {color: ($ redColor, 20%) qaralmaq; }. Nəticədə, rəng redColor 20% yüngül olacaq.

Sass çox daxili funksiyaları. ən azı onları oxumaq Worth, lakin daha yaxşı - öyrənmək üçün.

quş balası

Əvvəllər yuva göstərir uzun və narahat dizayn istifadə etmək idi. biz p bir div var Təsəvvür edin ki, bu, öz növbəsində, span seçin. span üçün, sarı - - div üçün, biz p qırmızı font rəng təyin etmək lazımdır çəhrayı. aşağıdakı kimi tipik CSS bu edilə bilər:

div {

color: red;

}

div p {

color: yellow;

}

div p span {

color: çəhrayı;

}

CSS preprocessor bütün daha asan və daha yığcam olur:

div {

color: red;

p {

color: yellow;

.span {

color: çəhrayı;

}

}

}

Elements sözün bir-birinə "investisiya".

preprocessor direktiv

faylları idxal edə bilər @import direktivləri istifadə. Məsələn, biz fonts üçün üslub bəyan fonts.sass fayl var. əsas fayl style.sass üçün əlaqə: @import "fonts. Bitti! Əvəzində üslub ilə bir böyük fayl biz tələb xüsusiyyətləri tez və asan daxil olmaq üçün istifadə edilə bilər ki, bir neçə var.

hagfish

Ən maraqlı ideyaları biri. Bu xassələri bir sıra xahiş bir xətt verir. Aşağıdakı kimi fəaliyyət göstərir:

@mixin largeFont {

font-family: "Times New Roman";

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Hagfish, səhifə element müraciət direktiv @include istifadə etmək. Məsələn, h1 mövzu tətbiq etmək istəyirik. h1 {@include: Biz aşağıdakı strukturu largeFont; }

hagfish Bütün xassələri bir h1 element verilir.

preprocessor Less

Sintaksis Sass proqramlaşdırma xatırladır. Bir seçimi üçün axtarır Əgər Less axtarmaq, CSS təhsil başlayanlar üçün daha uygundur. 2009-cu ildə yaradılmışdır. əsas xüsusiyyəti - CSS doğma sintaksis dəstək, proqramlaşdırma Imposer ilə tanımadığı öyrənmək üçün daha asan olacaq.

dəyişənlər @ simvolu istifadə elan olunur. Məsələn: @fontSize: 14px;. Sass eyni prinsiplər əsasında yuva işləyir. .largeFont () {font-family: aşağıdakılardır: Hagfish elan olunur Times New Roman "; font-size: 64px; line-height: 80px; font-weight: bold; }. yalnız seçilmiş element xassələri yeni yaradılmış hagfish əlavə - bu preprocessor direktivləri istifadə etmək lazım deyil qoşulmaq üçün. Məsələn: h1 {.largeFont; }.

Stylus

Başqa bir preprocessor. dünya Jade, Express və digər faydalı məhsullar verdi eyni müəllif tərəfindən 2011-ci ildə yaradılıb.

Dəyişənlər iki yolla elan edilə bilər - ya açıq və ya dolayısı. Məsələn: font = 'Times New Roman "; - Bir gizli seçin. Amma $ font = 'Times New Roman - aydın. Hagfish elan dolayısı bağlıdır. redColor () rəng qırmızı: sintaksis belə. İndi biz, məsələn, maddə əlavə edə bilərsiniz: h1 redColor ().

İlk baxışdan haqqında Stylus Bu anlaşılmaz görünə bilər. "Doğma" mötərizədə və semicolons haradadır? Amma bu qərq etmək lazımdır ki, bütün daha aydın olur. bu preprocessor uzunmüddətli inkişaf klassik CSS sintaksis istifadə "süddən kəsmək" bilər ki, unutmayın. bir "təmiz" üslubu ilə işləmək üçün olan zaman bəzən problemlər yaradır.

Nə preprocessor seçmək?

Əslində, bu ... etməz. Bütün versiyasını yalnız hər sintaksis müxtəlif eyni xüsusiyyətləri haqqında təklif edirik. Biz aşağıdakı kimi davam etmək məsləhətdir:

• əgər - proqramçı və Sass, üslub ilə həm kodu işləmək istifadə etmək istəyirəm;
• əgər - bir coder və şərti layout kimi üslub ilə işləmək Less diqqət istəyirəm;
• Siz minimalizm kimi, əgər Stylus istifadə edin.

hətta daha da inkişaf sadələşdirmək bilər ki, maraqlı kitabxana sonsuz sayda bütün variantlar üçün. Sass tövsiyə İstifadəçilər Compass diqqət - güclü alət çox daxili xüsusiyyətləri ilə. Məsələn, yüklemek sonra satıcı version prefiks narahat heç vaxt. Asanlaşdırır ızgaraları ilə işləmək. güllər, sprites ilə iş üçün alətlər var. Bir sıra artıq hagfish elan edib. Bu alət bir neçə gün ver - beləliklə siz gələcəkdə vaxt və səy bir çox qənaət edəcək.