Учебники

МЕНЬШЕ — Продлить

Сентябрь 5, 2018

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

пример

В следующем примере демонстрируется использование extension в файле 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;
}

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

lessc style.less style.css

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

style.css 

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

Выход

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

  • Сохраните приведенный выше HTML-код в файле exte_syntax.htm .

  • Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле exte_syntax.htm .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Менее продлить

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

Расширение помещается в набор правил или прикрепляется к селектору. Это похоже на псевдокласс, содержащий один или несколько классов, разделенных запятой. Используя необязательное ключевое слово 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-код в файле exte_syntax.htm .

  • Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле exte_syntax.htm .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Менее продлить

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

Sr.No. Типы и описание
1 Расширить прикрепленный к селектору

Extend связан с селектором, который похож на псевдокласс с селектором в качестве параметра.

2 Расширьте Inside Ruleset

Синтаксис &: extend (селектор) может быть помещен в тело набора правил.

3 Расширение вложенных селекторов

Вложенные селекторы сопоставляются с помощью селектора расширения .

4 Точное соответствие с расширением

По умолчанию, расширение ищет точное соответствие между селекторами.

5 n-е выражение

Форма n-го выражения важна в расширении, иначе она рассматривает селектор как другой.

6 Расширить «все»

Когда ключевое слово all идентифицируется наконец в аргументе расширения, тогда LESS сопоставляет этот селектор как часть другого селектора.

7 Селекторная интерполяция с расширением

Расширение может быть подключено к интерполированному селектору.

8 Обзор / Расширение внутри @media

Расширение соответствует только селектору, который присутствует в той же декларации мультимедиа.

9 Обнаружение дублирования

Он не может обнаружить дублирование селекторов.

Extend связан с селектором, который похож на псевдокласс с селектором в качестве параметра.

Синтаксис &: extend (селектор) может быть помещен в тело набора правил.

Вложенные селекторы сопоставляются с помощью селектора расширения .

По умолчанию, расширение ищет точное соответствие между селекторами.

Форма n-го выражения важна в расширении, иначе она рассматривает селектор как другой.

Когда ключевое слово all идентифицируется наконец в аргументе расширения, тогда LESS сопоставляет этот селектор как часть другого селектора.

Расширение может быть подключено к интерполированному селектору.

Расширение соответствует только селектору, который присутствует в той же декларации мультимедиа.

Он не может обнаружить дублирование селекторов.

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

Классический вариант использования используется, чтобы избежать добавления базового класса в LESS.

Расширение используется для перемещения селектора до свойств, которые вы хотите использовать; это помогает уменьшить код, сгенерированный CSS.

Используя extension, мы можем объединить те же стили отдельных селекторов в другой селектор.

43
Share: