Less.js Тип Функция ispixel()
Less.js — это простой препроцессор CSS, облегчающий создание управляемых, настраиваемых и многократно используемых таблиц стилей для веб-сайтов. Это лучше, поскольку CSS использует язык динамических таблиц стилей. LESS достаточно гибок, чтобы его можно было использовать в самых разных браузерах. Веб-браузеры могут использовать CSS только в том случае, если он разработан и улучшен с использованием компьютерного языка, называемого препроцессором CSS. Это расширение языка CSS, а также предлагающее такие функции, как переменные, функции, примеси и операции, помогающие создавать динамический CSS при сохранении обратной совместимости.
В этой статье мы собираемся обсудить функцию Type ispixel() , функция которой состоит в том, чтобы определить, является ли заданное значение значением пикселя или нет. Эта функция возвращает логическое значение.
Синтаксис:
ispixel(value)
Параметры:
- value: Это единственный обязательный параметр для этой функции. Это значение определяется тем, является ли это единицей пикселей или нет.
Тип возвращаемого значения: этот метод возвращает логическое значение.
Пример 1. В приведенном ниже коде показано использование и реализация функции типа ispixel() с функциями 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 Type ispixel() Function</b></h3> <div class="c1"> <p>ispixel(150px)<br>TRUE</p> <p>ispixel(color)<br>FALSE</p> </div></body> </html> |
стили.less
CSS
@body-bg-color: #eeeeee;@dark: hsl(25, 71%, 8%);@light: rgb(253, 255, 146);@str: "55%";@eStr: e(@str);@cond1: boolean(isstring(@eStr));@cond2: boolean(ispercentage(@eStr));body { background-color: @body-bg-color;}.c1 { width: @eStr; height: 150px; margin: 1rem; background-color: if(@cond1, @dark, @light); padding: 40px 0px 0px 55px;}p { color: if(@cond2, @dark, @light);} |
Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду.
lessc styles.less styles.css
styles.css: скомпилированный файл CSS выглядит следующим образом.
CSS
body { background-color: #eeeeee;}.c1 { width: 55%; height: 150px; margin: 1rem; background-color: hsl(25, 71%, 8%); padding: 40px 0px 0px 55px;}p { color: #fdff92;} |
Выход:
Пример 2: приведенный ниже код демонстрирует использование и реализацию функции Type ispixel() с функциями if() и булевых логических функций image-height misc.
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 Type ispixel() Function</b></h3> <div class="c1"> </div></body> </html> |
стили.less
CSS
@body-bg-color: #eeeeee;@len: image-height("1.png");@cond: boolean(ispixel(@len));body { background-color: @body-bg-color;}.c1 { width: @len * 3; height: @len; background-image: url("1.png"); background-repeat: if(@cond, repeat, no-repeat); margin: 1rem;} |
Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду.
lessc styles.less styles.css
styles.css: скомпилированный файл CSS выглядит следующим образом:
CSS
body { background-color: #eeeeee;}.c1 { width: 55%; height: 150px; margin: 1rem; background-color: hsl(25, 71%, 8%); padding: 40px 0px 0px 55px;}p { color: #fdff92;} |
Выход:
Ссылка: https://lesscss.org/functions/#type-functions-ispixel