Препроцессора CSS: шолу, таңдау, қолдану

Мүлдем барлық тәжірибелі веб дизайнерлер препроцессор пайдаланыңыз. Бұл жерде ерекше. Егер сіз осы қызметке табысқа келсе, осы бағдарламалар туралы ұмытпаңыз. Бір қарағанда, олар жаңа бастаған тыныш қасіретін әкелуі мүмкін - бұл бағдарламалау тым ұқсас! Шын мәнінде, бір-екі сағатқа, содан кейін сіз туралы бір күн CSS препроцессордың барлық ерекшеліктерімен күресуге болады, және сіз көріңіз, егер. Болашақта олар айтарлықтай өміріңізді жеңілдетеді.

Қалай CSS препроцессора жасады

жақсы Бұл технологияның сипаттамаларын түсіну үшін, қысқаша веб-беттерді көрнекі тарихында Қопа.

ғана Интернет жаппай пайдалану басталды кезде, Жоқ Мәнер кестелері жоқ. құжаттарды ресімдеу шолғышта толығымен тәуелді. Олардың әрқайсысы белгілі бір тегтер емдеу үшін пайдаланылған өз стильдер, болды. Тиісінше, беттер браузер сіз оларды ашу, оның тәртіппен байланысты әр түрлі көрінеді. нәтижесі - хаос, сананың шатасуы, әзірлеушілер үшін мәселелері.

1994 жылы, норвегиялық ғалым Håkon Ли HTML-құжаттың бөлек беттердің пайда үшін пайдаланылуы мүмкін мәнерлер кестесін әзірледі. дереу аяқтау үшін баяндалған W3C идеясы priglanulas мүшелері. Бірнеше жыл өткен соң, ол CSS нақтылау бірінші нұсқасын жариялады. Содан кейін ол үнемі аяқталды жатыр, жақсарды ... Бірақ тұжырымдамасы барлық бірдей қалды: әрбір стилі белгілі бір сипаттарын орнату.

CSS үстелдер пайдалану әрқашан проблемалы болды. Мысалы, веб-дизайнерлер жиі мүмкіндіктерін сұрыптау және топтау проблемалар болды, сонда мұрасы оңай емес.

Ал содан кейін екі мыңыншы келді. Таңбалау барған икемді және динамикалық жұмыс стильдер болуы маңызды болып табылатын, кәсіби реакторға дейінгі әзірлеушілер айналысуға бастады. уақытта болған CSS орналастыру префикс талап және шолғыштың жаңа мүмкіндіктерін қолдау қадағалау. JavaScript арқылы, және Ruby сарапшылар препроцессора құру, төмен бизнеске алды, содан кейін - CSS үшін қондырманы, жаңа мүмкіндіктер оған қосылады.

Бастаушы CSS: препроцессора ерекшеліктері

Олар бірнеше функциялар бар:

• браузер префикстер хаки біріздендіру;

• синтаксисті жеңілдету;

• қатесіз салынған селекторов жұмыс істеуге мүмкіндік береді;

• логикалық мәнерлеуді жақсарту.

Қысқаша айтқанда: препроцессора CSS бағдарламалау логикалық мүмкіндіктерін қосады. Енді, сәндейтін стильдер әдеттегі листингіне және бірнеше қарапайым әдістерін жүзеге мен тәсілдері етілмейді: Айнымалылар, функциялар, hagfish, циклдар шарттары. Сонымен қатар, математиканы қолдана білу.

Осы қондырмалар танымал көріп, W3C біртіндеп CSS коды олардың мүмкіндігін қосу бастады. Мысалы, көптеген браузерлерде қолдау, ерекшеліктер Сондықтан Қақ () функциясы,. Ол көп ұзамай ол айнымалылар орнату және hagfish жасау мүмкін болады деп күтілуде. Алайда, бұл алыс болашақта орын алуы, және preprocessors қазірдің өзінде жерде және қазірдің өзінде-ақ жұмыс істейтін болады.

Танымал preprocessors CSS. Sass

2007 жылы жобаланған. Алғашында компоненті Haml - үлгі HTML. CSS элементтері үшін жаңа мүмкіндіктер барлық жерде оны тарала бастады Rails бойынша Ruby, бойынша ләззат жасаушылар бақылау. Sass енді кез-келген препроцессордың енгізілген мүмкіндіктерінің зор саны: айнымалылар, тізімдер салу, hagfish (содан кейін, алайда, бұл дәлелдер қосу мүмкін емес).

Микс декларациялау айнымалылар

$ Белгісімен жариялады Айнымалылар. Олар, мысалы, олардың қасиеттері мен жиынтықтарын сақтауға болады: «$ borderSolid: 1px қатты қызыл;». Бұл мысалда біз borderSolid деп аталатын айнымалыны жариялады және ол 1px қатты қызыл бағалаймыз сақталады. Енді, біз 1px қызыл шекарасы ені жасау керек CSS болса, жай ғана меншік атындағы деп айнымалыны көрсетеді. айнымалы жариялағаннан кейін өзгертуге болмайды. бірнеше кіріктірілген функциялар бар. Мысалы, $ redcolor # FF5050 мәнімен айнымалыны жариялау. P {түсі: Енді, кез-келген элементтің қасиеттері CSS код, қаріп түсін орнату үшін оны пайдалану $ redColor; }. Егер сіз түспен эксперимент келе ме? қарайып кетуіне немесе жеңілдету функциясын пайдаланыңыз. Бұл сондықтан жасалады: P {түсі: ($ redColor, 20%) қарайып; }. Нәтижесінде, түсі redColor 20% жеңіл болады.

Sass көптеген кіріктірілген функциялары. Worth кем дегенде оларды оқып, бірақ жақсы - үйрену.

ұя

Бұрын, беттеу көрсету үшін ұзақ және ыңғайсыз дизайн пайдалануға мәжбүр болды. біз р болып DIV, делік, және оған, өз кезегінде, аралығын орнатыңыз. сары, аралығы үшін - - қызғылт бөлгішінде үшін, біз р қаріп түсі қызыл, орнату қажет. төмендегідей типтік CSS бұл жасалатынын:

DIV {

түсі: қызыл;

}

DIV P {

түсі: сары;

}

DIV P аралығының {

түсі: қызғылт;

}

CSS препроцессордың барлық жеңіл және жинақы болып:

DIV {

түсі: қызыл;

P {

түсі: сары;

.span {

түсі: қызғылт;

}

}

}

Элементтер сөзбе бір-бірін «инвестиция».

директивалар препроцессора

@import директивалар пайдалану файлдарын импорттай аласыз. Мысалы, біз қаріптер үшін мәнерлерін жариялайды fonts.sass файлды бар. файл негізгі style.sass оны қосыңыз: @import «қаріптер. Done! Оның орнына біз қажетті қасиеттері жылдам және оңай қол жеткізу үшін пайдаланылуы мүмкін, бұл бірнеше бар стильдер бір үлкен файл.

hagfish

ең қызықты идеялардың бірі. Ол бір жолы сипаттар жиынтығы сұрауға мүмкіндік береді. төмендегідей жұмыс істейді:

largeFont {@mixin

қаріп-отбасы: «Times New Roman ';

қаріп мөлшері: 64px;

желісі-биіктігі: 80 пиксель;

қаріп-салмағы: батыл;

}

директива @include пайдаланыңыз бетінде элементіне қолдану Hagfish. Мысалы, біз h1 тақырыбындағы оны қолдануға келеді. h1 {@include: Біз келесі құрылымға ие largeFont; }

hagfish Барлық қозғалмайтын мүлік ретінде h1 элементін тағайындалады.

препроцессора аз

Синтаксис Sass бағдарламалау еске алады. Егер сіз CSS зерделеу бастауыш неғұрлым қолайлы болып табылатын опцион үшін іздесеңіз, кем іздеңіз. Ол 2009 жылы құрылды. басты ерекшелігі - бағдарламалау верстальщика ол үйренуге оңай болады, сондықтан бейтаныс CSS ана синтаксисі қолдау.

айнымалылар @ символы пайдалана жарияланды. Мысалы: @fontSize: 14px;. Микс сияқты сол қағидаттар бойынша жұмыстар ұя. төмендегідей Hagfish жарияланады: .largeFont () {қаріп-отбасы: «Times New Roman '; қаріп мөлшері: 64px; желісі-биіктігі: 80 пиксель; қаріп-салмағы: батыл; }. ғана таңдалған элементтің қасиеттері жаңадан құрылған hagfish қосу - оны қосу үшін директиваларын препроцессора пайдалану қажет емес. Мысалы: {.largeFont h1; }.

Stylus

Тағы бір препроцессора. сол автор 2011 жылы құрылған, осы дүниедегі Джейда, Express және басқа да пайдалы өнімдер берді.

Айнымалылар екі жолмен жариялануы мүмкін - немесе тікелей немесе жанама. Мысалы: қаріп = 'Times New Roman'; - неявное опция. Бірақ $ қаріп = 'Times New Roman' - айқын. Hagfish жариялады және жанама байланысты. төмендегідей синтаксисі бар: redColor () қызыл түс. Енді біз, мысалы, элементті қосуға болады: h1 redColor ();.

ол түсініксіз көрінуі мүмкін, бірінші көзқарас бойынша Stylus. «Ана» жақшалар және нүктелі үтір қайда? Бірақ ол оған енуге қажетті болып табылады, барлық көп яснее. Осы препроцессордың ұзақ мерзімді даму сіз классикалық CSS синтаксисін пайдалану «тастайды» мүмкін екенін, алайда, есте сақтаңыз. «таза» стилінде жұмыс істеуге бар кезде осы кейде проблемалар туғызады.

Қандай препроцессора таңдауға?

Шын мәнінде, ол ... ол маңызды емес. Барлық нұсқалары әр ғана синтаксис әр түрлі болып табылады, сол мүмкіндіктері туралы ұсынамыз. Біз төмендегідей орындаңыз ұсынамыз:

• ; Бағдарламашы және екі коды стильдер жұмыс істеу үшін келеді, Sass пайдалану - Сіз, егер
• Егер Сіз - бір кодер және орналасу ретінде стильдер жұмыс істеу үшін келеді, аз назар аудару;
• Сіз минимализм ұнайды, егер стилус пайдаланыңыз.

тіпті одан әрі дамыту жеңілдетуге болады қызықты кітапханалардың шексіз санының барлық нұсқалары үшін. көптеген кіріктірілген мүмкіндіктермен қуатты құралы - Пайдаланушылар Sass Compass назар аудару ұсынылады. сіз оны орнатқаннан кейін, мысалы, сіз сатушы нұсқасы префикс туралы алаңдатты болмайды. Жеңілдетеді торлардағы жұмыс істеу. гүл, спрайты жұмыс істеу үшін құралдар бар. А ауқымы қазірдің өзінде hagfish жариялады. Бұл құралдың бірнеше күн беріңіз - осылайша, сіз болашақта уақыт пен күш көп үнемдеуге мүмкіндік береді.