ЛЕСС ЦСС Туториал Дизајнирање Слицк Мену Навигацијске траке

Овај чланак је део нашег "ХТМЛ5 / ЦСС3 Туториалс сериес" - посвећена да вам помогне да будете бољи дизајнер и / или програмер. Кликните овде да бисте видели више чланака из исте серије.

Свет за веб дизајн и развој се заиста брзо развија. То можемо видети у великом броју нових ствари које се покрећу у заједници (скоро) свакодневно, било да се ради о апликацијама или новим оквирима који помажу да наш свакодневни посао као веб дизајнера или програмера постане ефикаснији и ефикаснији.

Оно што је привукло моју пажњу од развоја веб дизајна данас је ЛЕСС, програмабилни језик стилова који проширује начин на који пишемо ЦСС синтаксу комбиновањем неких програмских концепата као што су варијабле, микини, функције и операције.

Отвара нове могућности у писању ЦСС синтаксе. На пример, применом Микинс-а у ЦСС-у као што то радимо у програму, сада можемо да складиштимо подразумеване стилове и вредности које се могу применити у целом фајлу кад год је то могуће. Уз то, нећемо морати стално писати исте стилове.

Па, хајде да урадимо неке вежбе са МАЊЕМ да бисмо добили бољи увид у оно што нуди.

Пројектовање са ЛЕСС

У овом водичу покушаћемо да осмислимо лаку навигацијску траку менија која је инспирисана оном на Аппле.цом. Пошто је оригинални производ само „инспирисан“, имајте на уму да наш коначни производ неће бити исти као оригинални производ.

Да бисте започели, прво бисте желели да прочитате следеће корисне ресурсе. Они објашњавају неке основне имплементације ЛЕСС језика, који ће вам бити од помоћи прије него што кренете даље у овај водич.

• ЛЕСС ис море: Учините ваш ЦСС кодирање лакшим са МАЊЕМ
• Напишите боље ЦСС са мање
• Увод у мање, и поређење са Сасс

Препаратион

Као прво, постоје неке битне ствари које су нам потребне за овај мали пројекат, а то је:

1. ЛЕСС Тект Едитор

Потребан нам је уређивач текста за кодирање навигацијског изборника. Међутим, већина текстуалних едитора доступних на тржишту данас (као што су Дреамвеавер, Нотепад ++, ИнТипе, Сублиме Тект 2) тек треба да подрже .мање екстензије датотека по дефаулту, тако да синтакса можда неће бити добро истакнута.

Дакле, за потребе овог туториала, користићемо специјални текст едитор за ЛЕСС назван ЦхрунцхАпп. Можемо отворити и уредити .мање екстензије и компајлирати га у статички ЦСС користећи ову апликацију. Пошто је то Адобе Аир апликација, она се може инсталирати у свим већим оперативним системима (Вин, ОСКС и Линук)..

За ХТМЛ едитор можете користити било који едитор који вам је већ удобан. Ја лично волим узвишени текст 2.

2. Лесс.јс

Следеће, преузмите ЛЕСС ЈаваСцрипт библиотеку са њихове званичне веб странице, тренутна верзија је 1.2.1. Ставите га у вашу мапу праксе за ово.

Затим повежите датотеку са ХТМЛ документом.

3. Без префикса

Користићемо и неколико ЦСС3 карактеристика да бисмо остварили неке ефекте у навигационом менију који ће укључивати префиксове добављача (-моз-, -о-, -вебкит-) да би се исправно приказивао у различитим претраживачима. Међутим, ја особно не преферирам кориштење префикса јер ће напухати ЦСС датотеку.

Из тог разлога, одлучио сам да користим ЈаваСцрипт библиотеку коју је креирао Леа Вероу без префикса и која ће аутоматски управљати префиксима произвођача у позадини. Зато ћемо само требати написати службену синтаксу из В3Ц.

Преузмите датотеку и повежите је са ХТМЛ датотеком.

У реду, сви смо спремни; сада ћемо почети са структуирањем ХТМЛ ознаке.

ХТМЛ Маркуп

Навигација је врло једноставна. Имаће пет менија умотаних у неуређену листу. Отворите свој омиљени ХТМЛ едитор и ставите следећу ознаку:

ЛЕСС Стилинг

У овом одељку ћемо започети стилизовање навигације ЛЕСС језиком. За оне који су нови у језику сличном програмирању, писање ЦСС синтаксе са ЛЕСС би се осећало мало чудно и незгодно. Али не брините, када будете имали неку праксу, сигурно ће вам бити пријатније од начина на који пишемо чист ЦСС (то је моје искуство, такође је мало заразна).

Погледајмо стил навигације из нашег извора инспирације.

Као што можемо видети на слици изнад, Аппле.цом навигација има следећих 6 главних заједничких стилова:

• схадов
• граница
• дивидер
• градијенти
• ховер еффецт
• текст

Спремићемо ове стилове и сачувати их унутра цонфиг.лесс као подразумевани стил Цонфигуратион; неки дизајнери би могли да је назову либ.цсс који се залаже Либрари. Повежите овај фајл са нашим документом.

Побрините се да је поставите пред ЛЕСС ЈаваСцрипт библиотеку.

Дефинишите базу боја помоћу променљивих

У овом кораку дефинисаћемо основну боју навигације помоћу варијабли. Променљива у ЛЕСС се декларише помоћу @ симбол.

@тхеме: # 555;

Ово @тхеме променљива је наша стандардна боја; Користићемо га на сваки могући начин како бисмо пратили савршену схему боја и како бисмо очекивали да ће састав боја постати конзистентнији.

Дефине Дефаулт Схадов Стиле са Микинс

Једна од особина које волим од ЛЕСС-а је Микинс. То је програмски концепт који складишти неколико предефинисаних стилова који се у ЛЕСС-у могу наследити у класама или ид-овима касније у стилу.

.схадов бок-схадов: 0 1пк 2пк 0 @тхеме; 

У горњем коду нисам укључио префиксну верзију бок-схадов власништво, јер ће библиотека без префикса поступати са њима аутоматски. Такође, боја сенке је наслеђена од променљиве боје теме.

Дефинишите стил обруба помоћу параметарских комбинација

Навигацијска трака ће требати јасну боју обруба с благо заобљеним кутом. Можемо компајлирати стил границе помоћу параметричног Микинс-а. Заправо има исту функционалност као и Микинс, једина разлика је у томе што има и промјењиве параметре тако да су вриједности подесивије.

.бордер (@радиус: 3пк) бордер-радиус: @радиус; бордер: 1пк солид @тхеме - # 050505; 

У горе наведеном коду постављамо подразумевану границу @радиус за 3пк и као што смо раније поменули, ова вредност може бити промењена касније.

Дефинишите градијент, делитељ и стил ховер-а са радом

Операција је једноставно програмски језик гдје можемо примијенити математичку формулу као што су додавање, подјела, одузимање и множење како би добили жељени резултат. Погледајмо следећи код:

.дивидер бордер-стиле: солид; бордер-видтх: 0 1пк 0 1пк; бордер-цолор: транспарент @тхеме - # 111 транспарент @тхеме + # 333; 

У горњем коду одузимамо @тхеме вариабле би # 111, на тај начин би излаз боја на левој ивици био мало тамнији. Иако је права боја границе изведена из додатка @тхеме варијабла са хек бојом # 333, излаз би био лакши.

Левел Сцхеме Левел

Па, за неке од вас који могу бити збуњени формулама, проучимо дијаграм схеме боја у наставку да бисмо боље разумели:

Максимални тамни тон је # 000 (црно), док је максимални светлосни тон #ффф (бела) и наша тренутна боја је # 555. Дакле, ако желимо да боја буде 3 нивои тамнији од струје, можемо их једноставно одузети # 333. Исто се може применити и за осветљавање боје.

Затим ћемо управљати бојом градијента.

.градиент бацкгроунд: линеар-градиент (топ, @тхеме + # 252525 0%, @тхеме + # 171717 50%, @тхеме - # 010101 51%, @тхеме + # 151515 100%);  .ховереффецт бацкгроунд: линеар-градиент (топ, @тхеме - # 010101 0%, @тхеме - # 121212 50%, @тхеме - # 222222 51%, @тхеме - # 050505 100%); 

Дефинишите стил текста са Гуард Микинс

Планирамо да имамо 2 боје на навигацијској траци, не тамну боју и једну свјетлост. Примењујемо два условна израза за текст користећи Гуард Микинс.

Прво, када се тексту даје боја која има лакоћу једнаку или већу од 50%, тект-схадов треба да се смрачи, у овом случају боја # 000000.

.тектцолор (@тктцолор) када (светлост (@тктцолор)> = 50%) цолор: @тктцолор; текст-сенка: 1пк 1пк 0пк # 000000; 

Затим, када је текст дат боји, лакоћа је мања од 50% тект-схадов ће постати бела.

.тектцолор (@тктцолор) када (лакоћа (@тктцолор)) 
Импортинг ЛЕСС
 
Хајде да креирамо другу .мање филе намед стилес.лесс и увоз цонфиг.лесс у њу:
 
@импорт "цонфиг.лесс";
 
Додај породицу фонтова
 
Да би навигациона трака изгледала привлачније, користићемо нову фамилију фонтова @ фонт-фаце правило. Изненађујуће, @ фонт-фаце Правило је заправо већ подржано од ИЕ6!
 
Овај пут ћемо користити Асап фонт. Преузмите је из колекције фонтова Фонт Скуиррел. Затим убаците следеће стилове у наш недавно креиран стилес.лесс филе.
 
@ фонт-фаце фонт-фамили: 'АсапРегулар'; срц: урл ('фонтс / Асап-Регулар-вебфонт.еот'); формат срц: урл ('фонтс / Асап-Регулар-вебфонт.еот? #иефик') ('ембеддед-опентипе'), урл ('фонтс / Асап-Регулар-вебфонт.вофф') формат ('вофф'), урл ('фонтс / Асап-Регулар-вебфонт.ттф') формат ('труетипе'), урл ('фонтс / Асап-Регулар-вебфонт.свг # АсапРегулар') формат ('свг'); фонт-веигхт: нормал; фонт-стиле: нормал;  
 
Стилизовање тела са функцијама боје
 
Сада ћемо дати боју позадине тело (која би требала бити лакша од базе боја), као и специфицирање породице фонта и величине фонта. Можемо приступити ефекту користећи функције боја:
 
Следећи код ће олакшати позадину за 30%.
 
тело позадина: осветли (@тхеме, 30%); фамили-фонт: АсапРегулар, санс-сериф; фонт-сизе: 11пт; 
 
 
 
Стилизирање навигације с угнијежђеним правилом
 
У ЛЕСС-у смо у могућности да гнежемо стилове директно под његовим родитељем. Погледајмо код испод.
 
Тхе нав Ознака која садржи све потребне елементе за навигацију добиће следеће стилове.
 
нав маргин: 50пк ауто 0; видтх: 788пк; хеигхт: 45пк; .бордер; .схадов; 
 
Обратите пажњу на то да сам уместо да додам гомилу ЦСС правила, само убацио .граница да бисте дали стил и границу .схадов да додате сенку. У стварним случајевима, ови скупови класа се могу поново користити у другом елементу, гдје год је то потребно.
 
 
 
Затим дајемо стилове за ул унутар нав да имају нулу паддинг и маргин. Не тако давно ћемо приступити стилу пишући нешто овако:
 
нав … нав ул …
 
Нема ничег лошег у овом приступу, у ствари, ја сам то радио сваки пут и прилично ми је пријатно. Међутим, овај метод, многи ЦСС дизајнер је рекао, је вербосед и у неким случајевима, није лако руковање.
 
Сада можемо да урадимо нешто овако:
 
нав маргин: 50пк ауто 0; видтх: 788пк; хеигхт: 45пк; .бордер; .схадов; ул паддинг: 0; маргин: 0; 
 
 
 
И онда ће се мени приказати редом користећи дисплаи: инлине својство.
 
нав маргин: 50пк ауто 0; видтх: 788пк; хеигхт: 45пк; .бордер; .схадов; ул паддинг: 0; маргин: 0; ли дисплаи: инлине; 
 
 
 
У доле наведеној синтакси одређујемо стил ознаке анцхор менија и додајемо предефинисане стилове, а то су: .тектцолор, .дивидер, .градиент.
 
нав маргин: 50пк ауто 0; видтх: 788пк; хеигхт: 45пк; .бордер; .схадов; ул паддинг: 0; маргин: 0; ли дисплаи: инлине; а тект-децоратион: ноне; дисплеј: инлине-блоцк; флоат: лефт; видтх: 156пк; хеигхт: 45пк; тект-алигн: центар; висина линије: 300%; .тектцолор (# ф2ф2ф2); // Можете да промените ову линију .дивидер; .градиент; 
 
У горњем коду примењујемо хексадецималну боју # ф2ф2ф2 у којој се светлост сматра изнад 50%, тако да бисмо очекивали да сенка постане тамна (аутоматски). Сигуран сам да је остатак кода сасвим разумљив.
 
 
 
Међутим, ако погледамо тренутни резултат изнад, сваки мени има раздјелнике, што резултира тиме да се посљедња секција прелијева до дна. Тако да морамо изоставити стил границе за прво и задње дијете навигацијске траке.
 
нав маргин: 50пк ауто 0; видтх: 788пк; хеигхт: 45пк; .бордер; .схадов; ул паддинг: 0; маргин: 0; ли дисплаи: инлине; а тект-децоратион: ноне; дисплеј: инлине-блоцк; флоат: лефт; видтх: 156пк; хеигхт: 45пк; тект-алигн: центар; висина линије: 300%; .тектцолор (# ф2ф2ф2); // Можете да промените ову линију .дивидер; .градиент;  ли: прво дете а бордер-лефт: ноне;  ли: последње дете гранично право: нема; 
 
 
 
Ховер Стате
 
За последњи корак додаћемо ефекат лебдења. У ЛЕСС можемо додати псеудо-елемент као такав :лебдети Користећи & симбол.
 
нав маргин: 50пк ауто 0; видтх: 788пк; хеигхт: 45пк; .бордер; .схадов; ул паддинг: 0; маргин: 0; ли дисплаи: инлине; а тект-децоратион: ноне; дисплеј: инлине-блоцк; флоат: лефт; видтх: 156пк; хеигхт: 45пк; тект-алигн: центар; висина линије: 300%; .тектцолор (# ф2ф2ф2); // Можете да промените ову линију .дивидер; .градиент; &: ховер .ховереффецт;  ли: фирст-цхилд а бордер-лефт: ноне;  ли: последње дете гранично право: нема; 
 
 
 
Промените тему боје
 
Овде је цоол део ЛЕСС-а. Ако желимо да променимо целокупну тему боје, можемо то да урадимо у мање промене редова него што нам је потребно у чистом ЦСС-у.
 
У овом случају, променићу боју навигације да буде мало лакша. Једноставно промените следеће две линије.
 
@тхеме: #ццц; // Промените ово
 
.тектцолор (# 555); //И ово
 
И ево резултата.
 
 
 
Компајлирајте ЛЕСС у ЦСС
 
Када још увек користимо мањи ЈаваСцрипт, он ће ухватити .мање фајл и преведите га у статичан ЦСС тако да га стандардни интерпретатор може интерпретирати. Ово је двоструки посао на страни клијента, а да не спомињемо сувишан и расипан пропусни опсег. Главна тачка ЛЕСС-а је да се поједностави наша пракса у компајлирању статичног ЦСС-а да би била динамичнија и програмабилнија.
 
Дакле, када ћемо поставити навигациону траку уживо на веб-локацију, важно је да компајлирате ЛЕСС датотеку у статички ЦСС.
 
Кликните Црунцх Ит! велико дугме.
 
 
 
Сачувајте .лесс у нашој датотеци за вежбање, повежите га са ХТМЛ документом и прекините везу .мање & лесс.јс из документа.
 
 .схадов бок-схадов: 0 1пк 2пк 0 # 555555;  .дивидер бордер-стиле: солид; бордер-видтх: 0 1пк 0 1пк; бордер-цолор: транспарент # 444444 транспарент # 888888;  .градиент бацкгроунд: линеар-градиент (топ, # 7а7а7а 0%, # 6ц6ц6ц 50%, # 545454 51%, # 6а6а6а 100%);  .ховереффецт бацкгроунд: линеар-градиент (горе, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ фонт-фаце фонт-фамили: 'АсапРегулар'; срц: урл ('фонтс / Асап-Регулар-вебфонт.еот'); формат срц: урл ('фонтс / Асап-Регулар-вебфонт.еот? #иефик') ('ембеддед-опентипе'), урл ('фонтс / Асап-Регулар-вебфонт.вофф') формат ('вофф'), урл ('фонтс / Асап-Регулар-вебфонт.ттф') формат ('труетипе'), урл ('фонтс / Асап-Регулар-вебфонт.свг # АсапРегулар') формат ('свг'); фонт-веигхт: нормал; фонт-стиле: нормал;  тело позадина: # а2а2а2; фамили-фонт: АсапРегулар, санс-сериф; фонт-сизе: 11пт;  нав маргин: 50пк ауто 0; видтх: 788пк; хеигхт: 45пк; бордер-радиус: 3пк; бордер: 1пк солид # 505050; бок-схадов: 0 1пк 2пк 0 # 555555;  нав ул паддинг: 0; маргин: 0;  нав ул ли дисплаи: инлине;  нав ул ли а тект-децоратион: ноне; дисплеј: инлине-блоцк; флоат: лефт; видтх: 156пк; хеигхт: 45пк; тект-алигн: центар; висина линије: 300%; боја: # ф2ф2ф2; текст-сенка: 1пк 1пк 0пк # 000000; гранични стил: солид; бордер-видтх: 0 1пк 0 1пк; бордер-цолор: транспарент # 444444 транспарент # 888888; бацкгроунд: линеар-градиент (топ, # 7а7а7а 0%, # 6ц6ц6ц 50%, # 545454 51%, # 6а6а6а 100%);  нав ул ли: а: ховер бацкгроунд: линеар-градиент (топ, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  нав ул: први-дете бордер-лефт: ноне;  нав ул ли: ласт-а бордер-ригхт: ноне;  
 
Погледајмо још једном резултат.
 
 
 
И завршили смо, слободно експериментишите с њим.
 
Закључак
 
Данас смо научили много ствари о ЛЕСС језику, као што су:
 

• Променљиве.
• Микинс
• Параметриц Микинс
• Оператионс
• Гуардед Микинс
• И угњетена правила

Иако постоји много ствари које се могу покрити даље и многе могућности да се прикажу и објасне, надамо се да сте уживали у овом основном водичу.

• Демо
• Довнлоад соурце