Функция Less.js jsList length()

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

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

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

Синтаксис:

length(list)

Параметры:

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

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

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" type="text/css" 
          href="styles.css"/>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js jsList length() Function</b></h3>
    <div class="c1">  
        <p>
            <strong>width: 100px * length(@list);
            <br>height: 50px * length(@list);</strong>
        </p>
    </div>
</body>
  
</html>

стили.лесс:

CSS

@body-bg-color: #eeeeee;
@list: 200px, rgb(0, 128, 0), rgb(48, 28, 3), 250px;
@l: length(@list);
body {
    background-color: @body-bg-color;
}
.c1 {
    width: 100px * @l;
    height: 50px * @l;
    background-color: green;
    margin: 1rem;
}
p{
    padding: 70px 0 0 50px;
    color: #ffffff;
}

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

lessc styles.less styles.css

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

стили.css:

CSS

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

Выход:

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

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" type="text/css" 
          href="styles.css"/>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js jsList length() Function</b></h3>
    <div class="c1">  
        <p>
            <strong>background-color: #46c346;
            <br>color: #301c03;</strong>
        </p>
    </div>
</body>
</html>

стили.лесс:

CSS

@body-bg-color: #eeeeee;
@list: 200px, rgb(70, 195, 70), rgb(48, 28, 3), 250px;
@l: length(@list);
@cond: boolean(ispixel(extract(@list, 1)));
body {
    background-color: @body-bg-color;
}
.c1 {
    width: 100px * @l;
    height: 50px * @l;
    background-color: if(@cond, 
        extract(@list, 2), extract(@list, 3));
    margin: 1rem;
}
p{
    padding: 70px 0 0 60px;
    color: if(@cond, extract(@list, 3), extract(@list, 2));
}

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

lessc styles.less styles.css

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

стили.css:

CSS

body {
    background-color: #eeeeee;
}
.c1 {
    width: 400px;
    height: 200px;
    background-color: #46c346;
    margin: 1rem;
}
p {
    padding: 70px 0 0 60px;
    color: #301c03;
}

Выход:

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

JavaScript Picked

Функция Less.js jsList length()

HTML

CSS

CSS

HTML

CSS

CSS

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