LESS CSS Tutorial Проектирование Slick Menu Navigation bar

Эта статья является частью нашей «Серия руководств по HTML5 / CSS3» - призван помочь вам стать лучшим дизайнером и / или разработчиком. кликните сюда чтобы увидеть больше статей из этой серии.

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

Сегодня меня привлекло внимание к развитию веб-дизайна LESS, программируемому языку таблиц стилей, который расширяет наши возможности написания синтаксиса CSS путем объединения некоторых концепций программирования, таких как переменные, миксины, функции и операции..

Это открывает новые возможности в написании синтаксиса CSS. Например, применяя Mixins в CSS так же, как мы делаем это в программе, мы теперь можем хранить стили и значения по умолчанию, которые могут быть применены во всем файле, когда это возможно. При этом нам не нужно будет писать одни и те же стили снова и снова.

Что ж, давайте сделаем несколько упражнений с LESS, чтобы лучше понять, что он может предложить.

Проектирование с LESS

В этом уроке мы попытаемся создать удобную панель навигации по меню, вдохновленную той, что есть на Apple.com. Так как он «вдохновлен» только оригинальным продуктом, обратите внимание, что наш конечный учебный продукт не будет точно таким же, как оригинальный.

Для начала вы можете сначала прочитать следующие полезные ресурсы. Они объясняют некоторые основные реализации языка LESS, которые будут вам полезны, прежде чем вы углубитесь в этот урок.

• МЕНЬШЕ БОЛЬШЕ: упростите CSS-кодирование с LESS
• Пишите лучше CSS с меньшими затратами
• Введение в LESS и сравнение с Sass

подготовка

Прежде всего, есть несколько важных вещей, которые нам нужны для этого небольшого проекта, а именно:

1. Меньше текстового редактора

Нам понадобится текстовый редактор для кодирования меню навигации. Однако большинство текстовых редакторов, доступных на рынке сегодня (таких как Dreamweaver, Notepad ++, InType, Sublime Text 2), еще не поддерживают .Меньше Расширения файлов по умолчанию, поэтому синтаксис может быть не очень хорошо выделен.

Итак, для целей данного урока мы будем использовать специальный текстовый редактор для LESS с именем ChrunchApp. Мы можем открыть и редактировать .Меньше расширение файла и скомпилировать его в статический CSS с помощью этого приложения. Так как это приложение Adobe Air, оно может быть установлено во всех основных настольных ОС (Win, OSX и Linux).

Для редактора HTML вы можете использовать любой редактор, который вам уже удобен. Мне лично нравится Sublime Text 2.

2. Less.js

Затем загрузите LESS JavaScript Library с их официального сайта, текущая версия 1.2.1. Поместите это в свою тренировочную папку для этого.

Затем свяжите файл с документом HTML.

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

Мы также будем использовать несколько функций CSS3 для достижения некоторых эффектов в меню навигации, которое будет включать префиксы поставщиков (-Мос-, -о-, -WebKit-) для правильного рендеринга в разных браузерах. Тем не менее, я лично не одобряю использование префиксов, так как это приведет к увеличению размера файла CSS..

По этой причине я решил использовать библиотеку JavaScript без префиксов, созданную Lea Verou, которая будет автоматически обрабатывать префиксы поставщиков в фоновом режиме. Так что нам останется только написать официальный синтаксис от W3C.

Загрузите файл и свяжите его с файлом HTML.

Хорошо, мы все настроены; Теперь давайте начнем структурировать разметку HTML.

HTML-разметка

Навигация довольно проста. Он будет иметь пять меню, обернутых в неупорядоченный тег списка. Откройте ваш любимый 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 @theme; 

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

Определить стиль границы с помощью параметрических миксов

Навигационная панель будет нуждаться в отдельном цвете границы со слегка закругленным углом Мы можем скомпилировать стиль границы, используя параметрические миксины. Он на самом деле имеет ту же функциональность, что и Mixins, с той лишь разницей, что он также имеет изменяемые параметры, поэтому значения более настраиваемы.

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

В приведенном выше коде мы устанавливаем границу по умолчанию @радиус за 3px и, как мы упоминали ранее, это значение может быть изменено позже.

Определите градиент, разделитель и стиль наведения с помощью операции

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

.divider border-style: solid; border-width: 0 1px 0 1px; цвет рамки: прозрачный @theme - # 111 прозрачный @theme + # 333; 

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

Уровень цветовой схемы

Что ж, для некоторых из вас, кто может быть спутан с формулами, давайте рассмотрим диаграмму цветовой схемы ниже, чтобы лучше понять:

Максимальный темный тон # 000 (черный), в то время как максимальный светлый тон #fff (белый) и наша текущая цветовая база # 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%); 

Определите стиль текста с помощью охранных миксинов

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

Во-первых, когда тексту присвоен цвет, яркость которого равна или превышает 50%, текст-тень должен потемнеть, в этом случае цвет # 000000.

.textcolor (@txtcolor) when (легкость (@txtcolor)> = 50%) color: @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 font-family: 'AsapRegular'; ЦСИ: URL ( 'шрифты / ASAP-Regular-webfont.eot'); Формат src: url ('fonts / 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, без засечек; размер шрифта: 11pt; 
 
 
 
Стилизация навигации с помощью вложенного правила
 
В LESS мы можем вкладывать стили непосредственно под его родителем. Давайте посмотрим на код ниже.
 
 навигационный тегу, содержащему все необходимые элементы для навигации, будут присвоены следующие стили.
 
nav margin: 50px auto 0; ширина: 788 пикселей; высота: 45 пикселей; .border; .тень; 
 
Обратите внимание, что вместо того, чтобы давать кучу правил CSS снова, я только вставил .граница придать границу стиля и .тень добавить тень. В реальных случаях этот набор классов может быть повторно использован и в другом элементе, где бы он ни требовался.
 
 
 
Далее мы даем стили для уль внутри навигационный иметь нулевое заполнение и запас. Не так давно мы подойдем к стилю, написав что-то вроде этого:
 
nav … nav ul …
 
В этом подходе нет ничего плохого, на самом деле, я делал это каждый раз, и мне это довольно удобно. Тем не менее, этот метод, по словам многих дизайнеров CSS, является многословным и в некоторых случаях не легко управляемым.
 
Теперь мы можем сделать что-то вроде этого:
 
nav margin: 50px auto 0; ширина: 788 пикселей; высота: 45 пикселей; .border; .тень; ul padding: 0; поле: 0; 
 
 
 
И тогда меню будет отображаться в строке с помощью дисплей: встроенный имущество.
 
nav margin: 50px auto 0; ширина: 788 пикселей; высота: 45 пикселей; .border; .тень; ul padding: 0; поле: 0; li display: inline; 
 
 
 
В приведенном ниже синтаксисе мы указываем стиль тега привязки меню и добавляем наши предопределенные стили: .цвет текста, .делитель, .градиент.
 
nav margin: 50px auto 0; ширина: 788 пикселей; высота: 45 пикселей; .border; .тень; ul padding: 0; поле: 0; li display: inline; a текстовое оформление: нет; дисплей: встроенный блок; плыть налево; ширина: 156 пикселей; высота: 45 пикселей; выравнивание текста: по центру; высота линии: 300%; .textcolor (# f2f2f2); // Вы можете изменить эту строку .divider; .gradient; 
 
В коде выше мы применяем шестнадцатеричный цвет # f2f2f2 в котором яркость считается выше 50%, поэтому мы ожидаем, что тень станет темной (автоматически). Остальная часть кода, я уверен, вполне понятна.
 
 
 
Однако, если мы посмотрим на текущий результат выше, у каждого из меню есть разделители, что приводит к переполнению последнего раздела внизу. Таким образом, мы должны опустить стиль границы для первого и последнего дочернего элемента панели навигации..
 
nav margin: 50px auto 0; ширина: 788 пикселей; высота: 45 пикселей; .border; .тень; ul padding: 0; поле: 0; li display: inline; a текстовое оформление: нет; дисплей: встроенный блок; плыть налево; ширина: 156 пикселей; высота: 45 пикселей; выравнивание текста: по центру; высота линии: 300%; .textcolor (# f2f2f2); // Вы можете изменить эту строку .divider; .gradient;  li: first-child a border-left: none;  li: последний ребенок a border-right: none; 
 
 
 
Hover State
 
Для последнего шага мы добавим эффект наведения. В LESS мы можем добавить Псевдо-элемент такие как : парить с помощью & условное обозначение.
 
nav margin: 50px auto 0; ширина: 788 пикселей; высота: 45 пикселей; .border; .тень; ul padding: 0; поле: 0; li display: inline; a текстовое оформление: нет; дисплей: встроенный блок; плыть налево; ширина: 156 пикселей; высота: 45 пикселей; выравнивание текста: по центру; высота линии: 300%; .textcolor (# f2f2f2); // Вы можете изменить эту строку .divider; .gradient; &: hover .hovereffect;  li: first-child a border-left: none;  li: последний ребенок a border-right: none; 
 
 
 
Изменить цвет темы
 
Вот классная часть LESS. Если мы хотим изменить общую цветовую тему, мы можем сделать это за меньшее количество строк, чем нужно в чистом CSS.
 
В этом случае я изменю цвет навигации, чтобы он стал немного светлее. Просто измените следующие две строки.
 
@theme: #ccc; // Изменить это
 
.TextColor (# 555); //И это
 
И вот результат.
 
 
 
Скомпилировать LESS в CSS
 
Когда мы все еще используем LESS JavaScript, он будет захватывать .Меньше файл и перевести его в статический CSS, чтобы стандартный браузер мог его интерпретировать. Это двойная работа на стороне клиента, не говоря уже о избыточности и потере пропускной способности. Суть LESS заключается в том, чтобы упростить нашу практику компиляции статического CSS, чтобы он был более динамичным и программируемым..
 
Поэтому, когда мы собираемся разместить панель навигации на веб-сайте, важно скомпилировать файл LESS в статический CSS.
 
Нажмите на Хруст Это! большая кнопка.
 
 
 
Сохраните .less в нашем файле упражнения, свяжите его с HTML-документом и отмените .Меньше & less.js файл из документа.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; 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 ('fonts / 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'); Вес шрифта: нормальный; стиль шрифта: нормальный;  body background: # a2a2a2; семейство шрифтов: AsapRegular, без засечек; размер шрифта: 11pt;  nav margin: 50px auto 0; ширина: 788 пикселей; высота: 45 пикселей; радиус границы: 3 пикселя; граница: 1px solid # 505050; тень от рамки: 0 1px 2px 0 # 555555;  nav ul padding: 0; поле: 0;  nav ul li display: inline;  nav ul li a текстовое оформление: нет; дисплей: встроенный блок; плыть налево; ширина: 156 пикселей; высота: 45 пикселей; выравнивание текста: по центру; высота линии: 300%; цвет: # f2f2f2; тень текста: 1px 1px 0px # 000000; стиль границы: твердый; border-width: 0 1px 0 1px; цвет границы: прозрачный # 444444 прозрачный # 888888; фон: линейный градиент (вверху, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover фон: линейный градиент (вверху, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: first-child a border-left: none;  nav ul li: last-child a border-right: none;  
 
Давайте посмотрим на результат еще раз.
 
 
 
И мы сделали, пожалуйста, не стесняйтесь экспериментировать с этим.
 
Заключение
 
Мы узнали много нового о языке LESS сегодня, например:
 

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

Несмотря на то, что есть много вещей, которые могут быть рассмотрены далее, и много возможностей, которые можно показать и объяснить, мы надеемся, что вам понравился этот базовый урок.

• демонстрация
• Скачать исходник