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

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, мы можем комбинировать одинаковые стили определенных селекторов с другими селекторами.