Привіт, шановні читачі XoZblog a! Веб-дизайн і веб-розробка дуже швидко розвиваються. Ми кожен день бачимо все більше і більше новинок, будь то додатки або нові сервіси, які роблять наше життя в мережі більш продуктивної і зручною. А веб-дизайн це просто безмежний простір, обмежений тільки талантом і вміннями «художника» (дизайнера). Так ось, поговоримо ж ми сьогодні про LESS - динамічному мовою стильової розмітки, який спростить написання стилів CSS.
Що таке LESS?
LESS - це надбудова над CSS. Це означає, що будь-який CSS код - це валідний LESS, але додаткові елементи LESS не працюватимуть в простому CSS коді. Це чудово, тому що існуючий CSS вже є працездатним LESS кодом, що зменшує поріг входження в нову технологію.
LESS додає багато потрібних динамічних властивостей в CSS. Він вводить змінні, операції, елементи і домішки. Можливість писати таблиці стилів модульно позбавить вас від багатьох клопоту.
LESS істотно полегшує написання стилів. Наприклад, застосовуючи примешивания (mixins), ми створюємо щось на подобі функцій, які можуть приймати аргументи. Mixins - дозволяють включати всі властивості класу в інший клас шляхом простого включення імені класу як значення одного з властивостей.
rounded-corners # 40; @radius. 5px # 41; # 123;
border-radius. @radius;
-webkit-border-radius. @radius;
-moz-border-radius. @radius;
# 125;
#header # 123;
.rounded-corners;
# 125;
#footer # 123;
.rounded-corners # 40; 10px # 41; ;
# 125;
А скомпільований CSS буде виглядати так:
#header # 123;
border-radius. 5px;
-webkit-border-radius. 5px;
-moz-border-radius. 5px;
# 125;
#footer # 123;
border-radius. 10px;
-webkit-border-radius. 10px;
-moz-border-radius. 10px;
# 125;
підготовка
Перш ніж приступити до написання коду, давайте розберемося c тим, що нам знадобиться:
2. Less.Js
3. Prefix-Free
Ми також будемо використовувати кілька ефектів CSS3, які включають в себе Вендорний префікси (-moz-. -o-. -webkit-) для того, щоб зробити ефект однаково правильним в різних браузерах.
Завантажуємо бібліотеку prefix-free.js і підчіплюємо її до index.html:
На цьому з підготовкою закінчимо і перейдемо безпосередньо до створення меню в стилі Apple.com
розмітка HTML
LESS стилі
Давайте розглянемо з яких складових частин буде складатися меню:
Як ми можемо бачити на скріншоті вище, навігація Apple.com має наступні 6 основних частин:
- Використовується тінь;
- кордон;
- Роздільник між пунктами меню;
- Градієнт для фону;
- Ефект затемнення при наведенні миші;
- Текст меню.
Використовувати написані стилі можна двома способами:
- підключити styles.less і бібліотеку less.js;
- або скомпілювати styles.less в програмі Crunch і вже приєднати до сторінці звичайний styles.css
Важливо: при використанні першого способу щоб підключення styles.less відбувалося до підключення бібліотеки less.js. Також залишається не забути підключити prefix-free.
Таким чином підключення стилів виглядає так:
Визначення змінної базового кольору
Будемо використовувати 2 файли: config.less в ньому визначимо всі змінні, примешивания і тд. після чого імпортуємо його в другій (styles.less) в якому вже сформуємо стилі для елементів меню.
Зараз розберемо код в config.less. Визначимо базовий колір меню за допомогою змінних. Змінна в LESS оголошується за допомогою символу @.
Ця змінна @theme зберігає базовий колір меню, ми будемо часто звертатися до цього кольору, тому доцільно його помістити в змінну.
Визначимо тінь для меню за допомогою примешивания (mixins)
Однією з особливостей LESS є - Примішування (mixins). Дозволяють включати всі властивості одного класу в інший клас.
shadow # 123;
box-shadow. 0 1px 2px 0 @theme;
# 125;
У наведеному вище коді я не включив префікс для box-shadow. бібліотека prefix-free автоматично додасть його. Крім того, колір тіні успадковується від кольору змінної @theme.
Визначимо стиль для кордонів меню використовуючи mixins з параметром
Для нашого меню знадобиться кордон з закругленими кутами. Mixins з параметром - насправді має таку ж функціональність як і просте Примішування, єдиною відмінністю є те, що він також має змінюваний параметр.
border # 40; @radius. 3px # 41; # 123;
border-radius. @radius;
border. 1px solid @theme - # 050505;
# 125;
У наведеному вище прикладі, ми встановили закруглення за замовчуванням @radius в 3 пікселі і, як ми вже говорили, це значення може бути змінено.
Визначимо градієнт, роздільник і стиль при наведенні миші за допомогою операцій
У LESS за допомогою операцій можна збільшувати, зменшувати, ділити і множити і значення і кольору властивостей, даючи можливість вказувати складні співвідношення між властивостями, щоб отримати бажаний результат. Давайте поглянемо на наступний код, який задає властивості для роздільник в меню:
divider # 123;
border-style. solid;
border-width. 0 1px 0 1px;
border-color. transparent @theme - # 111 transparent @theme + # 333;
# 125;
У наведеному вище прикладі ми віднімаємо з змінної @theme колір # 111. таким чином, ліва частина роздільник буде трохи темніше ніж базовий колір, а права світліша. Ось такі маніпуляції ми можемо робити з HEX-кольором.
Для кращого розуміння маніпуляцій з кольором, давайте розглянемо колірну схему:
Максимальна темний колір # 000 (чорний), а максимальний світлий колір #FFF (білий) і базовий колір # 555. Таким чином, якщо ми хочемо отримати колір на три рівні темніше, то віднімаємо # 333.
Тепер стилі градієнта:
gradient # 123;
background. linear-gradient # 40; to bottom. @theme + # 252525 0%. @theme + # 171717 50%. @theme - # 010101 51%. @theme + # 151515 100% # 41; ;
# 125;
.hovereffect # 123;
background. linear-gradient # 40; to bottom. @theme - # 010101 0%. @theme - # 121212 50%. @theme - # 222222 51%. @theme - # 050505 100% # 41; ;
# 125;
Визначення стилю тексту меню на домішках (mixins) з запобіжниками
Ми плануємо використовувати 2 кольори тексту і кольору тіней тексту. Один варіант використовується якщо фон меню буде світлим то колір тексту темний і навпаки.
По-перше, якщо колір тексту на має яскравість рівну або більше ніж 50%, то тінь повинна потемніти, в даному випадку прийняти колір # 000000.
textcolor # 40; @txtcolor # 41; when # 40; lightness # 40; @txtcolor # 41;> = 50% # 41; # 123;
color. @txtcolor;
text-shadow. 1px 1px 0px # 000000;
# 125;
І другий варіант, коли яскравість кольору тексту становить менше 50%, то тінь стане білою.
textcolor # 40; @txtcolor # 41; when # 40; lightness # 40; @txtcolor # 41; <50% ) {
color. @txtcolor;
text-shadow. 1px 1px 0px #ffffff;
# 125;
На цьому етапі закінчуємо створення файлу config.less і переходимо до створення файлу styles.less
імпорт config.less
Давайте створимо файл з назвою styles.less і насамперед причепимо до нього вже створений config.less. в такий спосіб:
Стиль для тіла станиці
Тепер ми поставимо колір фону сторінки (який повинен бути світліше, ніж базовий колір), а також вказати сімейство шрифтів і розміру шрифту. За допомогою функції зробимо колір фону сторінки світліше ніж базовий колір на 30%:
body # 123;
background. lighten # 40; @theme. 30% # 41; ;
font-family. AsapRegular. sans-serif;
font-size. 11pt;
# 125;
На даний момент результат нашої роботи виглядає так.
Ще не дуже привабливо. Але все ще попереду.
Основний стиль для меню з вкладеними правилами
У LESS ми можемо вкладати стилі будь-якого елементу, безпосередньо в стиль родітеля.Навігаціонние тег nav специфікація HTML5, який містить всі необхідні елементи для навігації. Ось його стилі:
nav # 123;
margin. 50px auto 0;
width. 788px;
height. 45px;
.border;
.shadow;
# 125;
Зверніть увагу, що замість того, щоб писати купу правил CSS, визначили тільки висоту, ширину і відступи. У той час як кордон і її стиль, а також тінь ми підчіплюємо за допомогою примешивания (mixins), вказуємо ім'я класу .border і .shadow і до класу nav додаються правила цих класів, які ми писали в файлі config.less.
Далі, ми додамо стиль для списку ul всередині nav. У простому CSS це виглядало б так:
Однак в LESS спадкування відбувається інакше, зрозумію простіше і логічніше:
nav # 123;
margin. 50px auto 0;
width. 788px;
height. 45px;
.border;
.shadow;
ul # 123;
padding. 0;
margin. 0;
# 125;
# 125;
Як видно на зображенні, елементи списку li розташовані вертикально, а нам треба щоб вони розташовувалися горизонтально. Для цього задамо властивість display: inline;
nav # 123;
margin. 50px auto 0;
width. 788px;
height. 45px;
.border;
.shadow;
ul # 123;
padding. 0;
margin. 0;
li # 123;
display. inline;
# 125;
# 125;
# 125;
Тепер опишемо стилі для посилання в елементі списку, і додамо готові стилі. textcolor. divider. gradient.
nav # 123;
margin. 50px auto 0;
width. 788px;
height. 45px;
.border;
.shadow;
ul # 123;
padding. 0;
margin. 0;
li # 123;
display. inline;
a # 123;
text-decoration. none;
display. inline-block;
float. left;
width. 156px;
height. 45px;
text-align. center;
line-height. 300%;
.textcolor # 40; # f2f2f2 # 41; ;
.divider;
.gradient;
# 125;
# 125;
# 125;
# 125;
У наведеному вище прикладі ми застосовуємо шістнадцятковий колір # f2f2f2. цей колір має яскравість понад 50%, тому тінь буде встановлена автоматично чорним кольором. Інша частина коду я впевнений, цілком очевидна.
Однак, якщо ми подивимося на поточний результат вище, останній елемент виїжджає за межі панелі. Щоб позбутися від цього приберемо кордон зліва в першому елементі меню, і кордон справа в останньому елементі меню.
nav # 123;
margin. 50px auto 0;
width. 788px;
height. 45px;
.border;
.shadow;
ul # 123;
padding. 0;
margin. 0;
li # 123;
display. inline;
a # 123;
text-decoration. none;
display. inline-block;
float. left;
width. 156px;
height. 45px;
text-align. center;
line-height. 300%;
.textcolor # 40; # f2f2f2 # 41; ; // You can change this line
.divider;
.gradient;
# 125;
# 125;
li. first-child a # 123;
border-left. none;
# 125;
li. last-child a # 123;
border-right. none;
# 125;
# 125;
# 125;
Стиль для ефекту при наведенні
В останньому кроці ми додамо ефект при наведенні курсору. У LESS ми можемо додати pseudo-element такий як: hover за допомогою символу # 038; .
nav # 123;
margin. 50px auto 0;
width. 788px;
height. 45px;
.border;
.shadow;
ul # 123;
padding. 0;
margin. 0;
li # 123;
display. inline;
a # 123;
text-decoration. none;
display. inline-block;
float. left;
width. 156px;
height. 45px;
text-align. center;
line-height. 300%;
.textcolor # 40; # f2f2f2 # 41; ; // You can change this line
.divider;
.gradient;
. hover # 123;
.hovereffect;
# 125;
# 125;
# 125;
li. first-child a # 123;
border-left. none;
# 125;
li. last-child a # 123;
border-right. none;
# 125;
# 125;
# 125;
Компілюємо LESS в CSS
Ну ось і все, написання меню apple.com на цьому можна завершити. Залишається вирішити яким способом ми будемо приєднувати написані стилі до веб-сторінці. Як я вже згадував вище, використовувати написані стилі можна двома способами:
- підключити styles.less і бібліотеку less.js;
- або скомпілювати styles.less в програмі Crunch і вже приєднати до сторінці звичайний styles.css
Звичайно більш другий варіант краще, навіщо приєднувати 2 файли і виконувати подвійну роботу на стороні клієнта, тому скомпілюємо написані стилі LESS в звичайний статичний CSS.
Для цього треба натиснути на велику кнопку Crunch It. І зберегти звичайний styles.css
На цьому, урок завершую.
Щоб залишатися в курсі свіжих статей і уроків підписуйтесь на щотижневу поштову розсилку або на новинну стрічку RSS. Дякуємо!