LESS CSS Инструкция за проектиране на лента за навигация в менюто

Тази статия е част от нашата "Серия уроци на HTML5 / CSS3" - посветен да ви помогне да сте по-добър дизайнер и / или разработчик. Натисни тук за да видите повече статии от същата серия.

Светът на уеб дизайна и развитието наистина се развива бързо. Виждаме това в големия брой нови неща, пуснати в общността (почти) всеки ден, независимо дали става въпрос за приложения или нови рамки, които помагат за по-ефективната и ефикасна нашата ежедневна работа като уеб дизайнери или разработчици..

Това, което привлече вниманието ми от развитието на уеб дизайна днес, е LESS, програмируем език за стилове, който разширява начина, по който пишем синтаксиса на CSS чрез комбиниране на някои програмни концепции като променливи, миксини, функции и операции..

Той отваря нови възможности за писане на CSS синтаксис. Например, като прилагаме Mixins в CSS, подобно на начина, по който го правим в една програма, сега можем да съхраняваме стилове по подразбиране и стойности, които могат да се прилагат в целия файл, когато е възможно. С това няма да се налага да пишем същите стилове отново и отново.

Е, нека направим някои упражнения с LESS, за да разберем по-добре какво може да предложи.

Проектиране с по-малко

В този урок ще се опитаме да проектираме гладка лента за навигация в менюто, която е вдъхновена от тази в Apple.com. Тъй като това е само „вдъхновено“ от оригиналния продукт, вземете под внимание, че крайният ни урок продукт няма да бъде точно същият като оригинала.

За да започнете, първо можете да прочетете следните полезни ресурси. Те обясняват някои основни реализации на LESS езика, които ще ви бъдат полезни, преди да продължите с този урок.

• LESS е повече: Направете своя CSS кодиране по-лесно с LESS
• Напишете по-добър CSS с по-малко
• Въведение за по-малко и сравнение със Sass

подготовка

Първо, има някои важни неща, от които се нуждаем за този малък проект, а именно:

1. LESS текстов редактор

Ще се нуждаем от текстов редактор, за да кодираме навигационното меню. Въпреки това повечето текстови редактори, налични днес на пазара (като Dreamweaver, Notepad ++, InType, Sublime Text 2), все още не са поддържани. .по-малко файловите разширения по подразбиране, така че синтаксисът може да не бъде подчертан добре.

За целта на този урок ще използваме специален текстов редактор за LESS с името ChrunchApp. Можем да отваряме и редактираме .по-малко разширение и компилиране в статичен CSS, използвайки това приложение. Тъй като това е приложение на Adobe Air, то може да се инсталира във всяка голяма настолна операционна система (Win, OSX и Linux).

За редактора на HTML можете да използвате всеки редактор, който вече ви е удобен. Аз лично обичам Високия текст 2.

2. Less.js

След това изтеглете библиотеката LESS JavaScript от официалния им сайт, текущата версия е 1.2.1. Поставете го във вашата практика папка за това.

След това свържете файла с HTML документа.

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

Ще използваме и няколко функции на CSS3, за да постигнем някои ефекти в навигационното меню, които ще включват префикси на доставчици (-Моз-, -о-, -WebKit-), за да се визуализира правилно в различни браузъри. Въпреки това, аз лично не предпочитам използването на префикси, тъй като ще надуе CSS файла.

Поради тази причина реших да използвам JavaScript без библиотека, създадена от Lea Verou, която автоматично ще обработва префиксите на продавача във фонов режим. Така че ще трябва само да напишем официалния синтаксис от W3C.

Изтеглете файла и го свържете с HTML файла.

Добре, всички сме готови; сега нека започнем да структурираме HTML маркировката.

HTML Markup

Навигацията е доста проста. Тя ще има пет менюта, които ще бъдат опаковани в неспореден етикет. Отворете любимия си HTML редактор и поставете следната маркировка:

По-малко стил

В този раздел ще започнем да оформяме навигацията с език LESS. За онези, които са нови в езика на програмиране, писането на CSS синтаксис с LESS би се почувствало малко странно и неудобно. Но не се притеснявайте, след като имате някаква практика, тя със сигурност ще е по-приятна от начина, по който пишем чист CSS (това е моят опит, също е малко пристрастяващо).

Да разгледаме навигационния стил от нашия източник на вдъхновение.

Както можем да видим на екрана по-горе, навигацията Apple.com има следните 6 основни общи стила:

• сянка
• граница
• делител
• градиенти
• ефект
• текст

Ние ще съхраним тези стилове и ще ги запазим вътре config.less като стил по подразбиране Конфигурация; някои дизайнери също могат да го назоват lib.css това означава Библиотека. Свържете този файл с нашия документ.

Уверете се, че сте го поставили пред библиотеката LESS JavaScript.

Дефинирайте цветовата база с променливи

В тази стъпка ще определим навигационната цветова база, използвайки Променливи. Променливата в LESS се декларира с помощта на @ символ.

@theme: # 555;

Това @theme променливата е нашият стандартен цвят; ние ще го използваме по всякакъв начин, за да издържим перфектната цветова схема и така да се очаква цветовата композиция да стане по-последователна.

Определете стандартния стил на сенките с Mixins

Една от функциите, които обичам от LESS е Mixins. Това е концепция за програмиране, която съхранява няколко предварително дефинирани стила, които в LESS могат да бъдат наследени в класове или идентификатори по-късно в таблицата със стилове.

.shadow box-shadow: 0 1px 2px 0 @ тема; 

В горния код не се включва предшестващата версия на кутия сянка , тъй като библиотеката без префикс ще ги обработва автоматично. Освен това цветът на сенките се наследява от променливия цвят на темата.

Определете стила на границата с параметрични миксини

Навигационната лента ще се нуждае от различен цвят на рамката с леко заоблен ъгъл. Можем да компилираме стила на границата с помощта на Parametric Mixins. Той всъщност има същата функционалност като Mixins, единствената разлика е, че има и променливи параметри, така че стойностите са по-регулируеми.

.border (@radius: 3px) border-radius: @radius; граница: 1px solid @theme - # 050505; 

В горния код ние поставяме границата по подразбиране @radius за 3px и както вече споменахме, тази стойност може да бъде променена по-късно.

Дефинирайте градиент, разделител и стил Hover с операция

Операцията е просто език за програмиране, където можем да приложим математическа формула като добавяне, разделяне, изваждане и умножение, за да получим желания резултат. Нека разгледаме следния код:

.разделител граничен стил: твърд; border-width: 0 1px 0 1px; border-color: transparent @theme - # 111 прозрачен @theme + # 333; 

В горния код изваждаме @theme променлива по # 111, по този начин цветният изход на лявата граница ще бъде малко по-тъмен. Докато десният цвят на границата се получава от добавянето на @theme променлива с шестнадесетичен цвят # 333, изходът ще бъде по-лек.

Ниво на цветова схема

Е, за някои от вас, които биха могли да се объркат с формули, нека да разгледаме диаграмата на цветовата схема по-долу, за да разберем по-добре:

Максималният тъмен тон е # 000 (черно), докато максималният светлинен тон е #Ф ф ф (бяло) и текущата ни цветова база е # 555. Така че, ако искаме цветната основа да бъде 3 нива по-тъмни от сегашните, можем просто да го извадим # 333. По същия начин може да се приложи и за облекчаване на цвета.

След това ще оперираме градиентен цвят.

.градиент фон: линеен градиент (отгоре, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect фон: линеен градиент (отгоре, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Дефинирайте стила на текста с Guard Mixins

Планираме да имаме 2 цвята на навигационната лента, ne тъмен цвят и една светлина. Ние прилагаме два условни израза за текста, използвайки Guard Mixins.

Първо, когато на текста е даден цвят, който има лекота равна или по - голяма от 50%,. \ T текстови сянка трябва да затъмни, в този случай цвят # 000000.

.textcolor (@txtcolor) когато (лекота (@txtcolor)> = 50%) цвят: @txtcolor; текстова сянка: 1px 1px 0px # 000000; 

След това, когато на текста е даден цвят, светлината е по-малка от 50% текстови сянка ще стане бял.

.textcolor (@txtcolor) когато (лекота (@txtcolor)) 
Импортиране на LESS
 
Нека сега създадем друг .по-малко файл с име styles.less и внос config.less в него:
 
@import "config.less";
 
Добавяне на семейство за шрифтове
 
За да изглежда лентата за навигация по-привлекателна, ние ще използваме ново семейство с шрифтове @ Шрифт лице се произнесе. учудващо, @ Шрифт лице правило вече се поддържа от IE6!
 
Този път ще използваме шрифта Asap. Изтеглете го от колекцията с шрифтове на Font Squirrel. След това поставете следните стилове в нашия наскоро създаден styles.less досие.
 
@ font-face семейство на шрифта: 'AsapRegular'; SRC: URL ( "шрифтове / ASAP-Regular-webfont.eot '); src: формат url („шрифтове / Asap-Regular-webfont.eot? #iefix“) („embedded-opentype“), url („fonts / Asap-Regular-webfont.woff“) формат („woff“), URL адрес ('fonts / Asap-Regular-webfont.ttf') формат ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') формат ('svg'); тегло на шрифта: нормално; стил на шрифта: нормален;  
 
Оформяне на тялото с цветови функции
 
Сега ще дадем фонов цвят на тяло (което трябва да е по-светло от цветовата база), както и да определи семейството на шрифта и размера на шрифта. Можем да достигнем до ефекта, като използваме Цветни функции:
 
Следният код ще облекчи фона на 30%.
 
тяло фон: осветление (@theme, 30%); семейство на шрифта: AsapRegular, sans-serif; размер на шрифта: 11pt; 
 
 
 
Оформяне на навигацията с вложено правило
 
В LESS ние можем да вмъкнем стилове директно под неговия родител. Нека разгледаме кода по-долу.
 
Най- навигация таг, който съдържа всички необходими елементи за навигацията, ще получи следните стилове.
 
nav марж: 50px auto 0; ширина: 788px; височина: 45px; .border; .shadow; 
 
Забележете, че вместо да давам куп правила за CSS, аз само вмъкнах .граница за да даде стила на границата и .сянка за да добавите сянка. В реални случаи, тези групи от класове могат да бъдат използвани отново и в друг елемент, където и да е необходимо.
 
 
 
След това даваме стилове за ул вътре навигация да има нулева подложка и марж. Не толкова отдавна ще подходим към стила, като напишем нещо подобно:
 
Nav … навик …
 
Няма нищо лошо в този подход, всъщност аз го правех всеки път и се чувствах доста удобно с него. Въпреки това, този метод, много от CSS дизайнер е казал, е verbosed и в някои случаи, не е лесно управляеми.
 
Сега можем да направим нещо подобно:
 
nav марж: 50px auto 0; ширина: 788px; височина: 45px; .border; .shadow; ul padding: 0; марж: 0; 
 
 
 
След това менюто ще се покаже подред, като се използва дисплей: inline Имот.
 
nav марж: 50px auto 0; ширина: 788px; височина: 45px; .border; .shadow; ul padding: 0; марж: 0; li дисплей: inline; 
 
 
 
В синтаксиса по-долу ние указваме стила на маркера на anchor менюто и добавяме нашите предварително дефинирани стилове, а именно: .цвят на текст, .делител, .градиент.
 
nav марж: 50px auto 0; ширина: 788px; височина: 45px; .border; .shadow; ul padding: 0; марж: 0; li дисплей: inline; a text-decoration: none; дисплей: вграден блок; поплавък: наляво; ширина: 156px; височина: 45px; text-align: center; височина на линията: 300%; .textcolor (# f2f2f2); // Можете да промените този ред. .gradient; 
 
В горния код прилагаме шестоъгълни цветове # f2f2f2 при което лекотата се счита над 50%, така че очакваме сянката да стане тъмна (автоматично). Останалата част от кода, който съм сигурен, е доста очевидна.
 
 
 
Въпреки това, ако погледнем текущия резултат по-горе, всяко от менюто има разделители, което води до последното преливане на долната част. Така че трябва да пропуснем стила на границата за първото и последното дете на навигационната лента.
 
nav марж: 50px auto 0; ширина: 788px; височина: 45px; .border; .shadow; ul padding: 0; марж: 0; li дисплей: inline; a text-decoration: none; дисплей: вграден блок; поплавък: наляво; ширина: 156px; височина: 45px; text-align: center; височина на линията: 300%; .textcolor (# f2f2f2); // Можете да промените този ред. .gradient;  li: първо дете a border-left: none;  li: последно дете a border-right: none; 
 
 
 
Държава Hover
 
За последната стъпка ще добавим ефекта на навъртане. В LESS можем да добавим псевдо-елемент като : навъртам използвайки & символ.
 
nav марж: 50px auto 0; ширина: 788px; височина: 45px; .border; .shadow; ul padding: 0; марж: 0; li дисплей: inline; a text-decoration: none; дисплей: вграден блок; поплавък: наляво; ширина: 156px; височина: 45px; text-align: center; височина на линията: 300%; .textcolor (# f2f2f2); // Можете да промените този ред. .gradient; &: hover .hovereffect;  li: първо дете a border-left: none;  li: последно дете a border-right: none; 
 
 
 
Промяна на цветната тема
 
Тук е хладната част на МАЛКО. Ако искаме да променим общата цветна тема, можем да го направим с по-малко промени в реда, отколкото с чистата CSS.
 
В този случай ще променя цвета на навигацията, за да е малко по-лек. Просто променете следните два реда.
 
@theme: #ccc; // Променете това
 
.цвят на текст (# 555); //И този
 
И тук е резултатът.
 
 
 
Компилирайте LESS в CSS
 
Когато все още използваме по-малък JavaScript, той ще вземе .по-малко файл и го преведете в статичен CSS, така че стандартният браузър да може да го интерпретира. Това е двойна работа в клиентската страна, да не говорим за излишни и разхищаващи трафик. Основната цел на LESS е в работния процес да опрости нашата практика при компилирането на статичен CSS, за да бъде по-динамичен и програмируем.
 
Така че, когато сме на път да поставим навигационната лента на живо на уебсайт, важно е да компилирате файла LESS в статичен CSS.
 
Кликнете върху Крънч! голям бутон.
 
 
 
Запазете .less в нашия файл за упражнения, свържете го към HTML документа и премахнете връзката .по-малко & less.js файл от документа.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider граничен стил: твърдо; border-width: 0 1px 0 1px; граничен цвят: прозрачен # 444444 прозрачен # 888888;  .gradient фон: линеен градиент (отгоре, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect фон: линеен градиент (отгоре, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face семейство на шрифтове: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: формат url („шрифтове / Asap-Regular-webfont.eot? #iefix“) („embedded-opentype“), url („fonts / Asap-Regular-webfont.woff“) формат („woff“), URL адрес ('fonts / Asap-Regular-webfont.ttf') формат ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') формат ('svg'); тегло на шрифта: нормално; стил на шрифта: нормален;  тялото фон: # a2a2a2; семейство на шрифта: AsapRegular, sans-serif; размер на шрифта: 11pt;  nav margin: 50px auto 0; ширина: 788px; височина: 45px; граничен радиус: 3px; граница: 1px твърдо # 505050; кутия сянка: 0 1px 2px 0 # 555555;  nav ul padding: 0; марж: 0;  на дисплея: inline;  nav ul li a text-decoration: none; дисплей: вграден блок; поплавък: наляво; ширина: 156px; височина: 45px; text-align: center; височина на линията: 300%; цвят: # f2f2f2; текстова сянка: 1px 1px 0px # 000000; граничен стил: твърдо; border-width: 0 1px 0 1px; граничен цвят: прозрачен # 444444 прозрачен # 888888; фон: линеен градиент (отгоре, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  навигация: hover фон: линеен градиент (отгоре, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  навик: първо дете a border-left: none;  nav ul: последното дете border-right: none;  
 
Нека отново да видим резултата.
 
 
 
И ние сме готови, моля не се колебайте да експериментирате с него.
 
заключение
 
Научихме много неща за езика LESS днес, като:
 

• Променливи.
• Mixins
• Параметрични миксини
• Операции
• Охраняем миксинс
• И вложени правила

Въпреки че има много неща, които могат да бъдат обхванати по-нататък и много възможности да бъдат показани и обяснени, ние се надяваме да се радвате на този основен урок.

• Демонстрация
• Изтегляне на източника