LESS CSS Підручник Проектування A Slick панелі навігації меню

Ця стаття є частиною нашої "Серія навчальних посібників HTML5 / CSS3" - присвячений допомозі зробити вас кращим дизайнером та / або розробником. Натисніть тут щоб побачити більше статей з тієї ж серії.

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

Те, що привернуло мою увагу від розвитку веб-дизайну сьогодні, це LESS, програмувальна мова стилів, яка розширює спосіб написання синтаксису CSS, поєднуючи деякі поняття програмування, такі як змінні, Mixins, Functions and Operations.

Він відкриває нові можливості при написанні синтаксису CSS. Наприклад, застосовуючи Mixins в CSS, подібно до того, як це робиться в програмі, ми можемо тепер зберігати стилі та значення за замовчуванням, які можна застосовувати у всьому файлі, коли це можливо. При цьому нам не потрібно буде знову і знову писати однакові стилі.

Добре, давайте зробимо деякі вправи з МЕНШЕ, щоб отримати краще розуміння того, що він може запропонувати.

Проектування з МЕНШЕ

У цьому навчальному посібнику ми спробуємо розробити тонку панель навігації меню, натхненну такою в Apple.com. Оскільки оригінальний продукт надихає лише "натхнення", зверніть увагу на те, що наш остаточний посібник не буде точно таким же, як оригінальний продукт.

Щоб розпочати, спочатку слід прочитати наведені нижче корисні ресурси. Вони пояснюють деякі основні реалізації мови LESS, які будуть корисними для вас, перш ніж ви довідаєтесь у цьому підручнику.

• МЕНШЕ більше: зробіть свій CSS-кодування легшим за допомогою LESS
• Напишіть краще CSS з менше
• Вступ до МЕНШІ, і порівняння з Sass

Підготовка

Перш за все, для цього невеликого проекту потрібні деякі важливі речі:

1. Менший текстовий редактор

Для кодування навігаційного меню нам знадобиться текстовий редактор. Однак більшість текстових редакторів, доступних сьогодні на ринку (такі як 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 для виконання деяких ефектів у навігаційному меню, які включатимуть префікси постачальників (-moz-, -o-, -webkit-) для правильного візуалізації в різних браузерах. Тим не менш, я особисто не виступаю за використання префіксів, як це буде роздувати CSS файл.

З цієї причини я вирішив використати бібліотеку JavaScript без префіксів, створену Lea Verou, яка автоматично оброблятиме префікси виробників у фоновому режимі. Тому нам буде потрібно лише написати офіційний синтаксис з W3C.

Завантажте файл і приєднайте його до файлу HTML.

Гаразд, ми всі налаштовані; тепер почнемо структурувати розмітку HTML.

Розмітка HTML

Навігація досить проста. Він буде мати п'ять меню, загорнуті всередині невпорядкованого тега списку. Відкрийте свій улюблений редактор HTML і поставте наступну розмітку:

LESS Styling

У цьому розділі ми почнемо стилізацію навігації за допомогою мови 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 @ тема; 

У наведеному вище коді я не включав префіксну версію box-shadow властивість, оскільки бібліотека без префіксів оброблятиме їх автоматично. Крім того, колір тіні успадковується від кольору змінних теми.

Визначте стиль кордону за допомогою параметра Parametric Mixins

Панель навігації потребуватиме чіткого кольору рамки зі злегка закругленим кутом. Ми можемо компілювати стиль кордону за допомогою Parametric Mixins. Фактично він має ту ж функціональність, що і Mixins, тільки різниця в тому, що вона також має змінні параметри, так що значення більш регульовані.

.border (@radius: 3px) border-radius: @radius; кордон: 1px solid @theme - # 050505; 

У наведеному вище коді ми встановлюємо типовий кордон @radius для 3px і, як ми вже згадували раніше, це значення можна змінити пізніше.

Визначте "Градієнт", "Роздільник" та "Стиль наведення" за допомогою операції

Операція - це просто мова програмування, де ми можемо застосувати математичну формулу, як додавання, поділ, віднімання та множення, щоб отримати бажаний результат. Давайте подивимося на наступний код:

.дільник прикордонний стиль: твердий; border-width: 0 1px 0 1px; border-color: transparent @theme - # 111 прозорий @theme + # 333; 

У наведеному вище коді віднімаємо @theme змінна за # 111, таким чином, колірний вихід лівої межі буде трохи темнішим. Хоча правий колір кордону випливає з додавання @theme змінна з шестигранним кольором # 333, вихід буде легшим.

Рівень колірної схеми

Ну, для деяких з вас, які можуть бути переплутані з формулами, давайте розглянемо схему колірної схеми нижче, щоб краще зрозуміти:

Максимальний темний тон # 000 (чорний), а максимальний світловий тон #fff (білий) і наша нинішня кольорова основа # 555. Отже, якщо ми хочемо, щоб кольорова основа була 3 рівнів, темніших від струму, ми можемо просто відняти його # 333. Те ж саме можна застосувати і для полегшення кольору.

Далі ми будемо керувати градієнтним кольором.

.градієнт background: linear-gradient (зверху, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect фон: лінійний градієнт (top, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Визначте стиль тексту за допомогою гвинтів Mixins

Ми плануємо мати 2 кольори на навігаційній панелі, ne темний колір і одне світло. Ми застосовуємо два умовних операції для тексту за допомогою Guard Mixins.

По-перше, коли тексту дається колір, який має легкість, що дорівнює або перевищує 50%, text-shadow повинна бути темною, в цьому випадку колір # 000000.

.textcolor (@txtcolor), коли (легкість (@txtcolor)> = 50%) color: @txtcolor; текстова тінь: 1px 1px 0px # 000000; 

Потім, коли в тексті задано колір, світлості менше 50% text-shadow стане білим.

.textcolor (@txtcolor), коли (легкість (@txtcolor)) 
Імпортування LESS
 
Давайте тепер створимо інший .менше Файл з ім'ям styles.less та імпорт config.less в це:
 
@import "config.less";
 
Додати сімейство шрифтів
 
Для того, щоб навігаційна панель виглядала більш привабливо, ми будемо використовувати нову сімейство шрифтів @ font-face правило. Дивно, @ font-face Правило фактично вже підтримується після IE6!
 
Цього разу ми будемо використовувати шрифт Asap. Завантажте його з колекції шрифтів Font Squirrel. Потім вставте наступні стилі до нашого нещодавно створеного styles.less файл.
 
@ font-face font-family: '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'); font-weight: нормальний; стиль шрифту: нормальний;  
 
Стиль тіла з функціями кольору
 
Тепер ми надамо колір фону фону тіла (що повинно бути світлішим за колірну основу), а також вказати сімейство шрифтів і розмір шрифту. Ми можемо підійти до ефекту, використовуючи функції кольорів:
 
Наступний код полегшить фон на 30%.
 
тіло фон: освітлює (@theme, 30%); сімейство шрифтів: AsapRegular, sans-serif; розмір шрифту: 11pt; 
 
 
 
Стилізація навігації за допомогою вкладеного правила
 
У LESS ми можемо вкладати стилі безпосередньо під його батьківську. Давайте подивимося на код нижче.
 
The nav тег, який містить всі необхідні елементи для навігації, буде надано наступні стилі.
 
nav margin: 50px auto 0; ширина: 788px; висота: 45px; .border; .shadow; 
 
Зверніть увагу на те, що замість того, щоб знову надати групу правил CSS, я тільки вставив .кордону дати стиль кордону і .тінь щоб додати тінь. У реальних випадках ці множини класів можуть бути повторно використані в іншому елементі, де це необхідно.
 
 
 
Далі ми надаємо стилі для ul всередині nav мати нульову відстань і запас. Не так давно ми підійдемо до стилю, написавши щось на зразок цього:
 
nav … nav ul …
 
Немає нічого поганого в такому підході, насправді, я робив це кожного разу, і мені це дуже зручно. Однак, цей метод, як стверджує дизайнер CSS, є вербованим, а в деяких випадках - непростим.
 
Тепер ми можемо зробити щось подібне:
 
nav margin: 50px auto 0; ширина: 788px; висота: 45px; .border; .shadow; ul padding: 0; маржа: 0; 
 
 
 
А потім меню буде відображатися в рядку за допомогою дисплей: inline власності.
 
nav margin: 50px auto 0; ширина: 788px; висота: 45px; .border; .shadow; ul padding: 0; маржа: 0; li відображення: inline; 
 
 
 
У нижченаведеному синтаксисі ми вказуємо стиль тегу прив'язки меню та додаємо наші попередньо визначені стилі, а саме: .textcolor, .дільник, .градієнт.
 
nav margin: 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 margin: 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: перша дитина border-left: none;  li: остання дитина прикордонне право: немає; 
 
 
 
Держава Ховер
 
Для останнього кроку ми додамо ефект hover. У LESS ми можемо додати псевдоелемент як от : hover використання & символ.
 
nav margin: 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: first-child border-left: none;  li: остання дитина прикордонне право: немає; 
 
 
 
Змініть колірну тему
 
Ось прохолодна частина МЕНШЕ. Якщо ми хочемо змінити загальну кольорову тему, ми можемо зробити її меншою кількістю змін, ніж те, що нам потрібно в чистому CSS.
 
У цьому випадку я змінити колір навігації буде трохи легше. Просто змініть наступні два рядки.
 
@theme: #ccc; // Змінити це
 
.textcolor (# 555); //І це
 
І ось результат.
 
 
 
Скомпілюйте LESS в CSS
 
Коли ми все ще використовуємо МЕНШЕ JavaScript, він захопить .менше файл і перекласти його в статичний CSS, щоб стандартний браузер міг його інтерпретувати. Це подвійна робота на стороні клієнта, не кажучи вже про надлишкову та марну пропускну здатність. Головним моментом LESS є робочий процес для спрощення нашої практики компіляції статичних CSS, щоб бути більш динамічним і програмованим.
 
Отже, коли ми збираємося розмістити панель навігації на веб-сайті, важливо скомпілювати файл LESS у статичний CSS.
 
Натисніть кнопку Crunch It! велика кнопка.
 
 
 
Збережіть файл .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 font-family: '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'); font-weight: нормальний; стиль шрифту: нормальний;  тіло фон: # a2a2a2; сімейство шрифтів: AsapRegular, sans-serif; розмір шрифту: 11pt;  nav margin: 50px auto 0; ширина: 788px; висота: 45px; радіус кордону: 3px; кордон: 1px суцільний # 505050; box-shadow: 0 1px 2px 0 # 555555;  nav ul padding: 0; маржа: 0;  відображення: вбудовано;  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%);  навігація: наведення (фон: лінійний градієнт (верхній, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  навігація: перша дитина border-left: none;  навігація: остання дитина прикордонне право: немає;  
 
Давайте ще раз подивимося на результат.
 
 
 
І ми зробили, будь ласка, не соромтеся експериментувати з ним.
 
Висновок
 
Сьогодні ми дізналися багато про мову LESS, наприклад:
 

• Змінні.
• Міксини
• Параметричні змішування
• Операції
• Охоронювані міксини
• І вкладені правила

Хоча є багато речей, які можуть бути охоплені далі і багато можливостей, які будуть показані і пояснені, ми сподіваємося, що вам сподобався цей основний підручник.

• Демо
• Завантажити джерело