Less.js функция извлечения jsList ()

Опубликовано: 24 Января, 2023

Less.js — это простой препроцессор CSS, облегчающий создание управляемых, настраиваемых и многократно используемых таблиц стилей для веб-сайтов. Это лучше, поскольку CSS использует язык динамических таблиц стилей. LESS достаточно гибок, чтобы работать в широком диапазоне браузеров. Для создания и улучшения CSS, чтобы веб-браузеры могли его использовать, используется компьютерный язык, известный как препроцессор CSS. Кроме того, это расширение языка CSS, предоставляющее такие инструменты, как переменные, функции, примеси и операции, помогающие в разработке динамического CSS при сохранении обратной совместимости.

В нашей статье мы познакомимся с функцией извлечения() из jsList , задачей которой является извлечение значения из заданного списка из указанного индекса.

Синтаксис:

extract(list, index)

Параметры:

список: этот параметр используется для указания списка, над которым будут выполняться операции.
index: этот параметр используется для указания индекса списка, над которым будут выполняться операции.

Скомпилируйте код LESS в код CSS.

Пример 1: приведенный ниже код демонстрирует использование и реализацию функции извлечения() из jsList .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" type="text/css" 
          href="style.css"/>
 </head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js jsList extract() Function</b></h3>
    <div class="c1">  
        <p>
            <strong>extract(@list, 3)<br>rgb(120, 77, 21)</strong>
        </p>
    </div>
</body>
</html>

стили.лесс:

CSS

@body-bg-color: #eeeeee;
@list: 200px, rgb(0, 128, 0), rgb(120, 77, 21), 250px;
body {
    background-color: @body-bg-color;
}
.c1 {
    width: extract(@list, 4);
    height: extract(@list, 1);
    background-color: extract(@list, 3);
    margin: 1rem;
    margin-left: extract(@list, 4);
}
p{
    padding: 70px 0 0 50px;
    color: #ffffff;
}

Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду:

lessc styles.less styles.css

Скомпилированный файл CSS выглядит следующим образом:

стили.css:

CSS

body {
     background-color: #eeeeee;
}
.c1 {
    width: 250px;
      height: 200px;
      background-color: #784d15;
      margin: 1rem;
      margin-left: 250px;
}
p {
      padding: 70px 0 0 50px;
      color: #ffffff;
}

Выход:

Пример 2: приведенный ниже код демонстрирует использование и реализацию функции извлечения() из jsList. с помощью if() и булевых логических функций.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js jsList extract() Function</b></h3>
    <div class="c1">  
        <p>
            <strong>extract(@list, 3)<br>margin-left: 150px</strong>
        </p>
    </div>
</body>
  
</html>

стили.лесс:

CSS

@body-bg-color: #eeeeee;
@list: 200px, green, 150px, 250px;
@cond: boolean(ispixel(extract(@list, 1)));
body {
    background-color: @body-bg-color;
}
.c1 {
    width: extract(@list, 4);
    height: extract(@list, 1);
    background-color: if(@cond, extract(@list, 2), #ffffff);
    margin: 1rem;
    margin-left: extract(@list, 3);
}
p{
    padding: 70px 0 0 40px;
}

Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду:

lessc styles.less styles.css

Скомпилированный файл CSS выглядит следующим образом:

стили.css:

CSS

body {
    background-color: #eeeeee;
}
.c1 {
    width: 250px;
      height: 200px;
      background-color: green;
      margin: 1rem;
      margin-left: 150px;
}
p {
      padding: 70px 0 0 40px;
}

Выход:

Ссылка: https://lesscss.org/functions/#list-functions-extract

JavaScript Picked

Less.js функция извлечения jsList ()

HTML

CSS

CSS

HTML

CSS

CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ