Простіше кажучи, псевдоклас: extend () автоматизує наступний процес:
З'явилося в v1.4.0
У зазначеному вище правилі селектор: extend буде застосовувати «розширює селектор» (nav ul) на клас .inline де б не з'явився клас .inline. Блок декларації залишиться як є, без будь-яких посилань до розширення (тому що розширення - це не CSS).
В результаті отримаємо:
Зверніть увагу, як селектор nav ul: extend (.inline) перетворюється на виході як nav ul - розширення видаляється перед виведенням, а блок селектора залишається незмінним. Якщо в той блок не вкладено жодних властивостей, він видаляється з виведення (але розширення і раніше може впливати на інші селектори).
Синтаксис: extend ()
Псевдоклас: extend () або приєднатися до селектору, або розміщений в наборі правил. Він виглядає як псевдо-клас з параметром селектора, опціонально наступним за ключовим словом all:
Розширення селектор може містити один або кілька класів, розділених комами. наприклад:
Розширення селектор, приєднаний до селектору
Розширення селектор, приєднане до селектору, виглядає як звичайний псевдо-клас з параметром у вигляді селектора. Селектор може містити кілька extend, але всі вони повинні стояти в кінці селектора.
- Extend після селектора: pre: hover: extend (div pre).
- Між селектором і extend можна ставити пробіл: pre: hover: extend (div pre).
- Можна ставити кілька extend: pre: hover: extend (div pre): extend (.bucket tr) - Те ж саме, що і pre: hover: extend (div pre. Bucket tr)
- А ось так не можна: pre: hover: extend (div pre) .nth-child (odd). Extend повинен стояти в кінці.
Якщо набір правил містить кілька селекторів, у будь-якого з них може бути Extend. Кілька селекторів з extend в одному наборі правил:
Контекстна угруповання
Розширення селектор (Extend) можна розміщувати всередині набору правил за допомогою синтаксису : Extend (selector). Розміщення псевдокласу: extend () в тілі є своєрідним ярликом для розміщення його в кожному селекторі цього набору правил.
Extend всередині набору правил:
Те ж саме, що і додавання extend після кожного селектора:
Угруповання внутрішніх селектор
Extend може групувати внутрішні селектори. наприклад:
В результаті отримаємо:
По суті, розширення переглядає скомпільований CSS, а не оригінальний Less-код. наприклад:
Точний збіг з Extend
Розширення селектор (Extend) за замовчуванням шукає точні співпадіння між селекторами. Неважливо, чи використовує селектор «провідну зірку». Неважливо, що два N-них вирази мають однакове значення, вони повинні бути однаково сформовані, щоб збігатися. Єдиний виняток - лапки в селекторі атрибута, тому що Less вважає, що у них однакове значення і вони збігаються.
Провідна зірка не грає ролі. Селектори * .class і .class еквівалентні, але extend НЕ буде порівнювати їх:
В результаті отримаємо:
Порядок псевдо-класів має значення. Cелектор link: hover: visited і link: visited: hover відповідають однаковому набору елементів, але extend розглядає їх як різні:
В результаті отримаємо:
N-ну вираз
Форма N-ного виразу не має значення. N-ні виразу 1n + 3 і n + 3 еквівалентні, 3еквівалентни, але extend не буде їх порівнювати:
В результаті отримаємо:
Тип лапок в селекторі атрибута не важливий. Всі наступні записи еквівалентні.
В результаті отримаємо:
"All" в розширеному селектор
Коли ви вказуєте ключове слово «all» останнім в аргументі псевдокласу: extend (). - це говорить Less порівняти цей селектор з частиною іншого селектора. Селектор скопіюється і яка збіглася частина селектора тільки тоді заміниться розширенням, створивши новий селектор. наприклад:
В результаті матимемо такі CSS стилі:
Ви можете вважати, що цей варіант операції по суті робить звичайний пошук і заміну.
Інтерполяція селекторів з Розширенням селектор
Розширення селектор НЕ може порівнювати селектори зі змінними. Якщо селектор містить змінну, розширення проігнорує її. Для цього існує запит функції очікування, але це не проста заміна. Однак, розширення можна приєднати до інтерпольованого селектору.
Селектор з змінної не буде порівнюватися:
А розширення зі змінною в цільовому селекторі ні з чим не збігається:
Обидва попередніх прикладу компілюються в:
Однак. extend. приєднане до інтерпольованого селектору буде працювати:
Попередній LESS компілюється в наступний CSS:
Охоплення / Розширення селекторів всередині @media
Розширення селектор, написане всередині медіа-декларування повинно збігатися тільки з селекторами всередині того ж самого медіа-декларування:
Розширення селекторів верхнього збігаються з усім, включаючи селектори всередині вбудованого медіа:
виявлення дублікатів
Поки що дублікати не виявлені. наприклад:
В результаті отримаємо:
Випадки використання розширень
класичний
Класичний випадок використання - уникати додавання базового класу. Наприклад, якщо у вас є
і ви хочете, щоб у вас був підтип animal, який перевизначити фоновий колір, то у вас є два варіанти. Перше - змінити HTML-код
або створити спрощений код і використовувати розширення в Less, наприклад
Зменшення розміру CSS
Домішки копіюють все властивості в селектор, що може привести до непотрібного дублювання. Таким чином, ви можете користуватися розширеннями, а не примусом, щоб перемістити селектор до властивостей, які ви хочете використовувати, що призведе до створення меншою CSS. Приклад з домішкою:
В результаті отримаємо:
Приклад (з розширенням селектор):
В результаті отримаємо:
Комбінування стилів / Більш просунута домішка
Інший випадок використання - альтернатива домішкам, тому що домішки можуть використовуватися тільки з простими селекторами, якщо у вас є два різних HTML-блоку, але вам потрібно застосувати до них однаковий стиль, ви можете використовувати розширення. наприклад:
- unity
- unity
- unity
- unity
- unity
- unity
- unity
- unity