Від автора: отже, ми продовжуємо наше знайомство з LESS і сьогодні розглянемо такий потужний компонент, як міксини LESS.
Давайте дізнаємося, що ж таке міксини LESS та як їх використовувати.
Що таке міксини?
Міксини (англ. mixins) в LESS – це, головним чином, згрупований набір властивостей CSS, які можуть бути вкладені в різні селектори LESS. Це як змінна з кількома різними властивостями.
Є ідеї щодо того, де їх можна застосувати? [Відповідь. CSS3.] Ви будете вражені тим, наскільки широкі можливо дають нам міксини, так як в нашому розпорядженні є й Міксини і Міксини з параметрами, які можуть приймати змінні. Ви також можете змішувати міксини. І так, я вважаю це речення граматично правильним.
Давайте почнемо з найпростішого міксина і створимо сценарій, який ви зможете використати в реальному веб-проекті. Припустимо, що в створюваному вами дизайні використовується для основного тексту стандартний шрифт без засічок, а для заголовків інший шрифт. Замість того, щоб прописувати кожен шрифт в окремому класі (що було б дуже обтяжливе, якщо окремі заголовки використовують різні шрифти), ви можете задати шрифти миксине і включити цей клас в інші класи.
Для цього ми створимо три класи: клас serif, клас sans-serif і клас monospace. Крім того, в цьому прикладі я додам дві змінні, які ми розглянули у другій частині цієї серії. Давайте поглянемо на код.
// Змінні
@baseFontSize: 14px;
@baseLineHeight: 21px;
.serif {
font-family: Georgia, ‘Times New Roman’, serif;
}
.sans-serif {
font-family: Helvetica, Arial, sans-serif;
}
.monospaced {
font-family: ‘Courier New’, monospace;
}
Поки що досить стандартно, чи не так? До речі, символ // в контексті LESS позначає коментар і не є скомпільованим з допомогою програми LESS.app. Стандартні коментарі CSS (/* */) будуть скомпільовані, але, очевидно, не будуть відображатися. Давайте перейдемо до суті.
Повернемося до коду, перевіримо, як ми форматуємо тег абзацу.
p {
font-size: @baseFontSize;
line-height: @baseLineHeight;
.serif;
}
Як бачите, ми задаємо розмір шрифту і висоту рядка, використовуючи зазначені нами змінні, які не потребують пояснення. Потім ми задаємо шрифт, просто звертаючись до класу serif властивості абзацу. Цей міксин діє подібно змінної. Міксин .serif зберігає всі властивості “.serif” і при компіляції всі властивості включаються до властивості абзацу. Давайте подивимося на скомпилированную версію.
.serif {
font-family: Georgia, ‘Times New Roman’, serif;
}
.sans-serif {
font-family: Helvetica, Arial, sans-serif;
}
.monospaced {
font-family: ‘Courier New’, monospace;
}
p {
font-size: 14px;
line-height: 21px;
font-family: Georgia, ‘Times New Roman’, serif;
}
Результат скомпільованого LESS – це чистий і оптимізований CSS. Що сталося б, якби ми просто поміняли .serif на .sans-serif? Ось що LESS відображає в такому випадку:
p {
font-size: @baseFontSize;
line-height: @baseLineHeight;
.sans-serif;
}
І отримуємо результат:
p {
font-size: 14px;
line-height: 21px;
font-family: Helvetica, Arial, sans-serif;
}
Це повинно дати вам уявлення про те, наскільки дивовижні і потужні можливості відкривають перед вами подібні функції. Але ми ще не закінчили, давайте тепер розглянемо міксин з параметрами.
Міксини з параметрами
Міксини з параметрами – це звичайні міксини, але подібно функцій, вони можуть приймати параметри, які приєднуються до коду всередині міксина. Завдяки цьому, ви можете задавати параметри у міксин або визначати змінну в параметрі, використовувану за замовчуванням.
Це – ідеальний варіант, коли ви працюєте з властивостями CSS3 і вам потрібно описати префікс браузера, але ви можете використовувати властивості по-різному. Щоб описати це на прикладі, ми використовуємо домішка border-radius. Ось як виглядає наш міксин:
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.sidebar {
.border-radius(4px);
}
Отже, ми включаємо всі префікси браузера CSS3 у міксин. Ми також визначаємо параметр властивості, в яке ми додаємо його. Ось що ми отримуємо в результаті:
.sidebar {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Крім того, можна присвоїти домішки стандартні значення шляхом включення специфікації в початкову домішка. Це простіше зрозуміти на реальному прикладі. У миксинах з параметрами можна задати розмір, навіть якщо у вас є заданий розмір за замовчуванням. Саме тому я б рекомендував завжди задавати значення по замовчуванню. Таким чином, якщо ви забудете визначити параметр, у вас завжди залишиться параметр за замовчуванням. Ось як виглядає код при обох сценаріях.
.border-radius(@radius: 6px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.sidebar {
.border-radius;
}
.sidebar2 {
.border-radius(12px);
}
І ось який результат ми отримаємо:
.sidebar {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.sidebar2 {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
Висновок
Отже, ми розглянули міксини і міксини з параметрами. Але врахуйте, це тільки початок. Відкрийте редактор коду і спробуйте поекспериментувати самі. Для того, щоб процес розробки був організованим за модульним принципом, почніть розробляти бібліотеку домішок, які ви могли б використовувати в своїх проектах.
