МЕНЬШЕ - расширить

Extend - это псевдокласс LESS, который расширяет другие стили селектора в одном селекторе с помощью :extend селектор.

пример

Следующий пример демонстрирует использование расширения в файле LESS -

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

Затем создайте файл style.less .

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

Вы можете скомпилировать файл extend.less в extend.css , используя следующую команду -

lessc style.less style.css

Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

Вывод

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -

Сохраните приведенный выше html-код в extend_syntax.htm файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.

Расширить синтаксис

Extend помещается в набор правил или прикрепляется к селектору. Он похож на псевдокласс, содержащий один или несколько классов, разделенных запятыми. Использование необязательного ключевого словаall, можно следовать за каждым селектором.

пример

В следующем примере показано использование расширенного синтаксиса в файле LESS:

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

Теперь создайте файл style.less .

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

Вы можете скомпилировать файл style.less в style.css , используя следующую команду -

lessc style.less style.css

Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

Вывод

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -

Сохраните приведенный выше html-код в extend_syntax.htm файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.

В следующей таблице перечислены все типы расширенного синтаксиса, которые вы можете использовать в LESS -

Sr.No.	Типы и описание
1	Расширение прикреплено к селектору Extend связан с селектором, который похож на псевдокласс с селектором в качестве параметра.
2	Расширение внутреннего набора правил В &:extend(selector) синтаксис можно поместить внутрь набора правил.
3	Расширение вложенных селекторов Вложенные селекторы сопоставляются с помощью селектора расширения .
4	Точное соответствие с расширением По умолчанию, extend ищет точное совпадение между селекторами.
5	n-е выражение Форма n-го выражения важна для расширения, в противном случае он рассматривает селектор как другой.
6	Расширить «все» Когда ключевое слово все наконец определено вextend аргумент, то МЕНЬШЕ соответствует этому селектору как части другого селектора.
7	Селекторная интерполяция с расширением В extend может быть подключен к интерполированному селектору.
8	Объем / расширение внутри @media Extend соответствует только селектору, который присутствует в том же объявлении носителя.
9	Обнаружение дублирования Он не может обнаружить дублирование селекторов.

Ниже приведены типы сценариев использования для расширения.

Sr.No.	Типы и описание
1	Классический вариант использования Классический вариант использования используется, чтобы избежать добавления базового класса в LESS.
2	Уменьшение размера CSS Extend используется для перемещения селектора на те свойства, которые вы хотите использовать; это помогает уменьшить сгенерированный css код.
3	Комбинирование стилей / более продвинутый миксин Используя extension, мы можем комбинировать одинаковые стили определенных селекторов с другими селекторами.