Функция Less.js jsList length()
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; } .c 1 { width : 100px * @l; height : 50px * @l; background-color : green ; margin : 1 rem; } p{ padding : 70px 0 0 50px ; color : #ffffff ; } |
Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду:
lessc styles.less styles.css
Скомпилированный файл CSS выглядит следующим образом:
стили.css:
CSS
body { background-color : #eeeeee ; } .c 1 { width : 400px ; height : 200px ; background-color : green ; margin : 1 rem; } 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; } .c 1 { width : 100px * @l; height : 50px * @l; background-color : if(@cond, extract(@list, 2 ), extract(@list, 3 )); margin : 1 rem; } 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 ; } .c 1 { width : 400px ; height : 200px ; background-color : #46c346 ; margin : 1 rem; } p { padding : 70px 0 0 60px ; color : #301c03 ; } |
Выход:
Ссылка: https://lesscss.org/functions/#list-functions-length